Web Test Tutorial - Part 1

Aus expecco Wiki (Version 2.x)
Zur Navigation springen Zur Suche springen

Preconditions[Bearbeiten]

  • Is the Selenium WebDriver installed? Learn more: Selenium_WebDriver_Plugin/en#Browser_Support
  • Is Firefox installed? Alternatively, Chrome and Safari also work.
  • Internet connection available?
  • Start expecco
  • Select "New Testsuite"


WTT 00 Start Marked.png


  • Undo button to remove existing demos


WTT 01 ResetExpecco Marked.png WTT 02 CleanExpecco.PNG


Create a connection[Bearbeiten]

  • Open the Gui-Browser


WTT 10 GUIBrowser Marked.png


  • Connect to the test website


WTT 11 Selenium WebDriver.PNG

WTT 12 Selenium Connect.PNG

WTT 13 GuiBrowser.PNG


  • Has a Firefox window opened in the background?


WTT 14 Firefox.PNG


First steps with the recorder[Bearbeiten]

  • Start recorder


WTT 20 Recorder Starten Marked.png

WTT 21 Recorder.PNG


  • Recording a login sequence
    • Switch the mode


WTT 220 ModusSetText Marked.PNG


    • Insert text


WTT 221 SetText1 Marked.png

WTT 222 SetText2.PNG

WTT 223 SetText3.PNG


    • Insert passwort


WTT 225 SetPasswort1 Marked.png

WTT 226 SetPasswort2.PNG

WTT 227 SetPasswort3.PNG


    • Press the submit button


WTT 228 ModusAuto.PNG

WTT 229 Submit.PNG


  • Convert workspace in an action block


WTT 23 Workspace1 Marked.png

WTT 24 Workspace2.PNG

WTT 25 Workspace3.PNG


  • Prepare action block for execution


WTT 260 BausteinLogin Marked.png

WTT 260 BausteinLogin Marked2.png


  • Leave GuiBrowserand open network tab


WTT 261 BausteinLogin Marked.png


  • Correlate the connection with the action block, insert action block for this


WTT 262 BausteinEinfügen1.PNG

WTT 263 BausteinEinfügen2.PNG

WTT 264 BausteinEinfügen3.PNG

WTT 265 BausteinEinfügen4.PNG


  • Move and rearrange action blocks


WTT 266 BausteinEinfügen5.PNG



WTT 269 BausteinEinfügen8.PNG


  • Execute action blocks
  • Press "Execute" (the green arrow)


WTT 269 BausteinEinfügen8 Marked.png

WTT 270 TestLäuft.PNG


  • When the test is finished, your browser opens in front.


WTT 271 FirefoxGeöffnet.PNG


  • expecco should look like this now:


WTT 272 BausteinAusgeführt.PNG


  • The detailed execution of action blocks is visible in the network tab.

Verify data fields[Bearbeiten]

  • Verification: is it the right page?
    • Open tab "Gui Browser"


WTT 300 GuiBrowser Marked.png


  • Read path (Xpath) with:
    • Hover the element with the mouse (fly over)In the recorder


WTT 300 GuiBrowser Marked2.png

WTT 301 Recorder Geöffnet Marked.png


  • Select parent element from text


WTT 302 Element auswählen1 Marked.png


  • Prepare AktionblockGet text
    • Expand Elements in the tab "Actions"


WTT 303 Elements aufklappen.PNG


  • Select "Get Text" action block and copy it to the "Test" tab


WTT 304 GetTextSelektieren.PNG

WTT 305 BausteinSelektierenUndKopieren.PNG


  • Switch to the "Login" action block, insert the copied action block there


WTT 306 GetTextInLoginEinfügen1 Marked.png

WTT 307 GetTextInLoginEinfügen2.PNG

WTT 307 GetTextInLoginEinfügen2 Marked.png

WTT 308 AnfügenAnAusführung.PNG


  • Insert action block to check for equality [ Assert Equals ]


WTT 310 AssertEinfügen1.PNG

WTT 311 AssertEinfügen2.PNG

WTT 312 AssertEinfügen3.PNG

WTT 313 AssertEinfügen4.PNG

WTT 314 AssertEinfügen5.PNG


Test execution[Bearbeiten]

  • Click on the green "Play" icon


WTT 320 TestAuführen1 Marked.png

WTT 321 TestAuführen2.PNG

WTT 322 TestAuführen3.PNG


  • View detailed test run


WTT 323 TestAuswerten1 Marked.png

WTT 324 TestAuswerten2.PNG


  • Save test-suite


WTT 325 TestsuiteSpeichern1.PNG

WTT 326 TestsuiteSpeichern2.PNG


Query element properties[Bearbeiten]

  • Properties
    • Open GUI-Browser


WTT 500 GUI-BrowserÖffnen1 Marked.png

WTT 500 GUI-BrowserÖffnen1 Marked2.png

WTT 501 RecorderÖffnen.PNG


  • Hover Project-filter-input to show the elements in the tree of the GUI-Browser


WTT 502 DropdownHovern Marked.png

WTT 503 RecorderSchließen.PNG


  • Select any element and property for the test


WTT 504 ElementAuswahl Marked.png

WTT 505 AttributAuswahl Marked.png


  • Select the "Check Attributes" action block


WTT 506 BausteinAuswählen Marked.png

WTT 507 ExpectedValueEingeben.PNG

WTT 508 BausteinKopieren.PNG


  • Insert and connect action block


WTT 509 BausteinEinfügen.PNG

WTT 510 BausteineVerbinden.PNG

WTT 511 BausteinEinfügen1.PNG

WTT 512 BausteinEinfügen2.PNG

WTT 513 BausteinEinfügen3.PNG

WTT 514 BausteinEinfügen4.PNG

WTT 515 BausteinEinfügen5.PNG

WTT 516 BausteinEinfügen6.PNG

WTT 517 BausteineVerbinden1.PNG


  • Execute Test(see above)
    • It is important that the test environment (the browser) is reset to the start page(see also next step)before each test execution. Alternatively, you can simply close the browser.
      • Close remote-controlled browser


WTT 518 BrowserSchließen Marked.png


  • Execute test


WTT 517 BausteineVerbinden1 Marked.png

WTT 519 TestAusführen1.PNG

WTT 520 TestAusführen2.PNG


Close the session after each test[Bearbeiten]

  • Insert new action block


WTT 600 SessionBeenden1.PNG

WTT 601 SessionBeenden2.PNG

WTT 602 SessionBeenden3.PNG

WTT 603 SessionBeenden4.PNG

WTT 604 SessionBeenden5.PNG

WTT 605 SessionBeenden6.PNG

WTT 606 SessionBeenden7.PNG


  • Apply changes to the SessionEnd action block


WTT 607 SessionBeenden8Marked.png


  • Drag the SessionEnd action block in the field "AfterExecution"


WTT 608 LoginDisconnect1 Marked.png

WTT 609 LoginDisconnect2.PNG


  • Now the test can run as often as required without the Browser has to be closed



Copyright © 2014-2024 eXept Software AG