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 (Asynchronous JavaScript And XML) 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 to JSON (JavaScript Object Notation), which is more lightweight in the way it transfers the data. It does not rely on the extra overhead of opening and closing tags that is needed to create valid XML.

Working on pages with AJAX

In our example, we will click on a link and then assert that 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 that 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 drop-down 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 and 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 = 30,000ms) change it to what you want. Remember, 1,000 milliseconds = 1 second.

Working with AJAX applications

As more and more applications try to act like desktop applications, we need to be able to handle synchronization steps between our test and our application. In this section, we will see how to handle AJAX and what to synchronize:

1. Navigate to http://book.theautomatedtester.co.uk/chapter1.
2. Click on the load text to the page button.
3. Wait for the text I have been added with a timeout. Your test will look like the following screenshot:
   

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, waitForElementNotPresent. 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:

Selenium Command	Command Description
waitForAlertNotPresent	This waits for an alert to disappear from the page.
waitForAlertPresent	This waits for an alert to appear on the page.
waitForElementPresent	This waits for an expected element to appear on the page.
waitForElementNotPresent	This waits for an expected element to disappear from the page.
waitForTextPresent	This waits for expected text and its corresponding HTML tags to appear on the page.
waitForTextNotPresent	This waits for expected text and its corresponding HTML tags to disappear from the page.
waitForPageToLoad	This waits for all elements to appear on the expected page.
waitForFrameToLoad	This waits for an expected frame and its corresponding HTML tags to appear on the page.

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 command. Another example is the open command, which only completes when the page has fully loaded.

If you are feeling confident, then it's a good time to try different waitFor command techniques.