How Selenium tests against AJAX applications

Selenium tests against AJAX applications

Web applications today are being designed in such a way that they appear the same as

desktop applications. Web developers are accomplishing this by using AJAX within their web

applications. AJAX stands for Asynchronous JavaScript And XML due to the fact that it relies

on JavaScript creating asynchronous calls and then returning XML with the data that the user

or application requires to carry on. AJAX does not rely on XML anymore, as more and more

people move over JSON, JavaScript Object Notation, which is more lightweight in the way

that it transfers the data. It does not rely on the extra overhead of opening and closing tags

that is needed to create valid XML.

In our first example, we are going to click on a link and then assert some text is visible

on the screen:

1. Start up Selenium IDE and make sure that the Record button is pressed.

2. Navigate to http://book.theautomatedtester.co.uk/chapter1.

3. Click on the text that says Click this link to load a page with AJAX.

4. Verify the text that appears on your screen. Your test should look like the

following screenshot:

5. Run the test that you have created. When it has finished running it should look like

the following screenshot:

Have a look at the page that you are working against. Can you see the text that the test is

expecting? You should see it, so why has this test failed? The test has failed because when

the test reached that point, the element containing the text was not loaded into the DOM.

This is because it was being requested and rendered from the web server into the browser.

To remedy this issue, we will need to add a new command to our test so that our tests pass

in the future:

1. Right-click on the step that failed so the Selenium IDE context menu appears.

2. Click on Insert New Command.

3. In the Command select box, type waitForElementPresent or select it from the dropdown

menu.

4. In the Target box add the target that is used in the verifyText command.

5. Run the test again and it should pass this time:

Selenium does not implicitly wait for the item that it needs to interact with, so it is seen as

good practice to wait for the item you need to work with then interact with it. The waitFor

commands will timeout after 30 seconds by default but if you need it to wait longer you can

specify the tests by using the setTimeout command. This will set the timeout value that

the tests will use in future commands.

If need be you can change the default wait if you go to Options | Options and then on

the General tab and under Default timeout value of recorded command in milliseconds

(30s = 30000ms) change it to what you want. Remember that there are 1000 milliseconds

in a second.

handle synchronization steps between our test and our application. In this section we will

see how to handle AJAX and what to synchronize.

1. Click on the load text to the page button.

2. Navigate to http://book.theautomatedtester.co.uk/chapter1.

3. Wait for the text I have been added with a timeout.

In the previous examples, we waited for an element to appear on the page; there are a number

of different commands that we can use to wait. Also remember that we can take advantage

of waiting for something not to be on the page. For example, waitForElementNotPreset.

This can be just as effective as waiting for it to be there. The following commands make up the

waitFor set of commands but this is not an exhaustive list

• ‹‹ waitForAlertNotPresent
• ‹‹ waitForAlertPresent
• ‹‹ waitForElementPresent
• ‹‹ waitForElementNotPresent
• ‹‹ waitForTextPresent
• ‹‹ waitForTextNotPresent
• ‹‹ waitForPageToLoad
• ‹‹ waitForFrameToLoad

A number of these commands are run implicitly when other commands are being run. An

example of this is the clickAndWait command. This will fire off a click command and

then fire off a waitForPageToLoad. Another example is the open command which only

completes when the page has fully loaded.

If you are feeling confident then it would be a good time to try different waitFor

techniques.

How to work with multiple windows

Working with multiple windows

Working with multiple browser windows can be one of the most difficult things to do within

a Selenium Test. This is down to the fact that the browser needs to allow Selenium to

programmatically know how many child browser processes have been spawned.

In the following examples we shall see the tests click on an element on the page which will

cause a new window to appear. If you have a pop-up blocker running, it may be a good idea

to disable it for this site while you work through these examples.

1. Open up Selenium IDE and go to the Chapter 1 page on the site.

2. Click on one of the elements on the page that has the text Click this link to launch

another window. This will cause a small window to appear.

3. Verify the text in the popup by right-clicking and selecting VerifyText id=popup text

within the popup window.

4. Once the window has loaded, click on the Close the Window text inside it.

5. Add a verify command for an element on the page. Your test should now look like

the following screenshot:

In the next example we are going to open up two pop-up windows and move between them

and the parent window as it completes its steps.

1. Start Selenium IDE and go to Chapter 1 on the website.

2. Click on the Click this link to launch another window link. This will launch

a pop-up window.

3. Assert the text on the page. We do this by right-clicking and selecting assertText.

4. Go back to the parent window and click on the link to launch the second

pop-up window.

5. Verify the text on the page.

6. Move to the first pop-up window and close it using the close link. As before,

be aware of clickAndWait instead of click.

7. Move to the second pop-up window and close it using the close link.

8. Move back to the parent window and verify an element on that page.

9. Run your test and watch how it moves between the windows. When complete it

should look like the following screenshot:

We just had a look at creating a test that can move between multiple windows. We saw how

we can move between the child windows and its parent window as though we were a user.

Now update a test to verify items on the page

Updating a test to assert items are on the page

1. Open the IDE so that we can start recording.
2. Navigate to http://qc.test.com
3. Select Selenium Grid from the drop-down box.
4. Change the Select to Selenium Grid.
5. Verify that Assert that this text is on the page text is mentioned on the righthand
side of the drop-down box, by right-clicking on the text and selecting Verify
TextPresent Assert that this text is on the page. You can see the command in the
previous screenshot.
6. Verify that the button is on the page. You will need to add a new command for
verifyElementPresent with the target verifybutton in Selenium IDE.
7. Now that you have completed the previous steps, your Selenium IDE should look like
the following screenshot

If you now run the test you will see it has verified that what you are expecting to see on the

page has appeared. Notice that the verify commands have a darker green color. This is to
show that they are more important to the test than moving through the steps. The test has
now checkedthat the text we required is on the page and that the button was there too.

What would happen if the verify command did not find what it was expecting? The IDEwould have thrown an Error stating what was expected was not there, but it carried on
with the rest of the test. We can see an example of this in the following screenshot:

The test would not have carried on if it was using assert as the mechanism for validating that

the elements and text were loaded with the page.