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.