login

Real Browser Tutorial #2:
Usernames and Passwords

In this tutorial you’ll learn how to customize a test case so that each virtual user logs into WordPress with a separate account.

1. Record Test Case

step-two-record

Start recording by clicking on the red record button, and select the Chrome icon in the Real Browsers section to start a Real Browser recording.

real-browser-selection

Browse to http://demo6.webperformance.com, click on the Login link in the bottom left-hand side of the page:

Screen Shot 2014-02-25 at 1.58.25 PM

This of course goes to the login screen, where the username is “demo”, and the password is “p@perdoll”.

Screen Shot 2013-10-07 at 4.31.37 PM

Click the blue “Log In” button, then click on Posts, and then click on Add New:

Screen Shot 2014-02-25 at 2.12.28 PM

From there enter a title and post content:

Screen Shot 2014-02-25 at 2.14.06 PM

When you’re finished click on the blue Publish button:

Screen Shot 2014-02-25 at 3.09.52 PM

The post has been published and the test case is complete, so stop the recording by clicking on the black stop button:

Screen Shot 2013-10-01 at 3.56.52 PM

2. Create Dataset

Now that the test case is recorded, its time to customize it so that each virtual user has a separate username, password, and blog post title.  This type of customization information is kept in a “dataset”, or a collection of data in rows and columns like a database.  Datasets are stored in the Datasets folder in the Navigation Tab:

Screen Shot 2013-10-03 at 9.02.38 PM

In this tutorial you’ll be shown how to create the needed dataset, but if you want to save time, feel free to use the provided dataset with the title “Login and Post on Blog”, and skip down to Section 3, Customize Test Case.

If you want to learn how to create a dataset, right-click on the repository, and select New->Dataset:

Screen Shot 2013-10-01 at 5.19.31 PM

The dataset editor will now show up in the main window area.  Next, you’ll want to rename the default field name “field” to be “Username” by first clicking on the Field column, below:

Screen Shot 2013-10-01 at 5.22.35 PM

and then clicking on the field name editor icon in the middle:

Screen Shot 2013-10-01 at 5.23.01 PM

which brings up editor:

Screen Shot 2013-10-07 at 5.06.56 PM

Click on the green cross to add one more field named “Blog Post Title”.

The next step is to generate values for each column.  Start by clicking on the “Username” field and then clicking fill:

Screen Shot 2013-10-01 at 5.26.09 PM

You can create data in several different ways.  In this case it makes sense to use a sequence from 1 to 25 with a prefix of “user”:

Screen Shot 2013-10-03 at 9.08.41 PM

Click the “Generate values” button to generate the parameters, and then “OK” insert them into the Username field.

Next, click on the head for the Blog Post Title field, and click on the “Fill” button again.  Again, just the sequence method from 1 to 25 and a prefix to create unique blog post titles.  (Anything would do, as long as its unique.)

Screen Shot 2013-10-03 at 9.10.33 PM

Click “OK”, and the dataset should look like this:

Screen Shot 2013-10-03 at 9.12.03 PM

The final step is to rename the dataset from “New Dataset” to “Logins” by right-clicking on the dataset in the Navigator Tab and selecting “Rename”.

3. Customize Test Case

Once there’s a dataset,  the next step is to locate the parts of the test case you want to customize.  First up is where you entered the username and password:

Screen Shot 2014-02-25 at 4.26.15 PM

Select the line “Type demo into element with ID = “user_login” and then click on the edit button shown below in red.

Screen Shot 2014-02-25 at 4.26.30 PM

This will popup and editor dialog;

Screen Shot 2014-02-25 at 4.26.59 PM

Set the Datasource to be “Dataset”, and select either the dataset you configured or the provided dataset “Login and Post on Blog”, and then select the Username field.

Next, select the line for typing in the blog post title.  You can see it below “Type “Test Post #4″ into element with ID = “title:

Screen Shot 2014-02-25 at 4.41.10 PM

This will be up the editor at the top of the window:

Screen Shot 2014-02-25 at 4.42.22 PM

Click on the circled button in red to bring up the field configuration dialog.  Use the same dataset as before, but this time select the field with the title  ”Blog Post Title”.

Screen Shot 2014-02-25 at 4.44.18 PM

 4. Replay Test Case

After any customization of a test case you’ll want to see it work with a single user before doing a load test.  Use the down arrow on the button to select various replay options such as Fast Play.

Screen Shot 2014-02-25 at 4.46.16 PM

While the replay runs a browser window will popup, and the fields being manipulated will blink red.  Don’t touch the browser during this process or it could change the webpage and cause the test case replay to malfunction.

When the test case has finished playing back click on the black “stop” button to finish.

Screen Shot 2014-02-25 at 4.51.49 PM

5. Load Test

To start a load test from the test case window, click on the Load Test button:

Screen Shot 2014-02-25 at 4.53.43 PM

This will bring up the load test configuration dialog. Note that the demo is limited to playing back 5 real browsers at one time.

Screen Shot 2013-10-01 at 5.46.45 PM

Click ok to go to the main load test window where you click on the Start button to start the load test.

Screen Shot 2013-10-01 at 5.48.01 PM

Leave a Reply