This tutorial shows a little about what happens when the test case doesn’t do what you think it should be doing. The test case is simple: login to wordpress, hover over the user icon in the top right-hand corner, and then click on Logout. This will fail because the recorder does not capture mouse movements. If it did, your test cases would be littered with mouse movement commands and 99% of those would unneeded. This tutorial shows you what happens when a test case fails, and then demonstrates how to fix it.
1. Record Test Case
First start recording by clicking on the red record button:
Click the Chrome Real Browser, and navigate to http://demo6.webperformance.com.
Click on the Login link:
And then enter the username “demo” and password “p@perdoll”:
Once you’ve logged in immediately hover over the text Howdy, Demo User in the top right-hand corner of the site:
This will cause the Logout link to appear:
Click on the “Log Out” menu item and then stop recording.
Once the recording is finished, it will show up in the Navigator Tab:
Remember to right-click on “New Recording” and change the name to something more appropriate.
2. Replay Test Case
The next step is to replay the test case and see how it works. Click on the green replay button, below, and watch the browser attempt to login to WordPress.
When the browser tries to find the “Log Out” link, however, this error will appear because this link only appears after a hover.
3. Fix Test Case
The problem occurred because the Real Browser Recorder doesn’t do hover mouse events. If it did the recording would be littered with mouse events making the test case difficult to read and edit. The solution is to insert a “Hover” event right before clicking on “Log Out”.
First, select the test case line right before the error:
Then add a step by clicking on the add step button:
Choose Mouse Move as the type:
Change the locator type to “text”, and type in Howdy, which will match the first part of the area where you want the mouse to hover. As the element is matched it will be highlighted in yellow in the browser:
Now its almost ready to go. The remaining issue is that after moving the mouse, the user must wait for the menu to appear. To do this, configure a wait condition on the step. Open the step properties by choosing Properties from the pop-up menu (left-click the mouse move step). Choose the Measurement tab. Choose Element is Clickable from the drop-down and choose from next step in the next drop-down that appears:
The test case is now ready to try out by clicking on the replay button: