real-browser-debugging

Real Browser Tutorial #3:
Debugging

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:

step-two-record

Click the Chrome Real Browser, and navigate to http://demo6.webperformance.com.

real-browser-selection

Click on the Login link:

Screen Shot 2014-02-25 at 1.58.25 PM

 

And then enter the username “demo” and password “p@perdoll”:

Screen Shot 2014-02-26 at 4.51.23 PM

Once you’ve logged in immediately hover over the text Howdy, Demo User in the top right-hand corner of the site:

Screen Shot 2014-02-26 at 4.52.48 PM

 

This will cause the Logout link to appear:

Screen Shot 2014-02-26 at 4.53.48 PM

 

Click on the “Log Out” menu item and then stop recording.

 

Screen Shot 2013-10-01 at 3.56.52 PM

Once the recording is finished, it will show up in the Navigator Tab:

real browser testcases

 

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.

Screen Shot 2014-02-25 at 4.46.16 PM

When the browser tries to find the “Log Out” link, however, this error will appear because this link only appears after a hover.

Screen Shot 2014-02-26 at 4.45.14 PM

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:

Screen Shot 2014-02-28 at 12.08.02 PM

Then add a step by clicking on the add step button:

Screen Shot 2014-02-28 at 12.09.41 PM

Choose Mouse Move as the type:

Screen Shot 2014-10-14 at 11.19.52 AM

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:

Screen Shot 2014-10-14 at 11.23.12 AM

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:

SetIsClickableCondition

The test case is now ready to try out by clicking on the replay button:

Screen Shot 2014-02-25 at 4.46.16 PM

Leave a Reply