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.

Now record your first test with Selenium IDE

Now record your first test with Selenium IDE

We are going to record our first test using Selenium IDE. To start recording the tests we will
need to start Mozilla Firefox. Once it has been loaded, you will need to start Selenium IDE.
You will find it under the Tools dropdown menu in Mozilla Firefox or in the Web Developer
dropdown menu. Once loaded it will look like the next screenshot. Note that the record
button is engaged when you first load the IDE.

To start recording your tests let us do the following:
1. When in record mode, navigate to http://site.testing.com
2. On the Web Application do the following:
a. Click on the radio button.
b. Select another value from the drop-down box, for example,
Selenium RC.
c. Click on the Home Page link.

3. Your test has now been recorded and should look like the previous screenshot. Click
the play button that looks like this:

4. Once your test has completed it will look like this:

Terms Use For Selenium IDE

Terms Use For Selenium IDE

‹‹ 1. Base URL: This is the URL that the test will start at. All open commands will be
relative to the Base URL unless a full path is inserted in the open command.
‹‹ 2. Speed Slider: This is the slider under the Fast and Slow labels on the screen.
‹‹ 3. Run all the tests in the IDE.
‹‹ 4. Run a single test in the IDE.
‹‹ 5. Pause a test that is currently running.
‹‹ Step through the test once it has paused.
‹‹ 6. This is the record button. This will be engaged when the test is recording.
‹‹ 7. The Command select box has a list of all the commands that are needed to
create a test. You can type into it to use the auto complete functionality or use
it as a dropdown.
‹‹ 8. The Target text box allows you to input the location of the element that you want to
work against.
‹‹ 9. The Find button, once the target box is populated, can be clicked to highlight the
element on the page.
‹‹ 10. The Value text box is where you place the value that needs to change. For example,
if you want your test to type in an input box on the web page, you would put what
you want it to type in the value box.
‹‹ 11. The Test table will keep track of all your commands, targets, and values. It has been
structured this way because the original version of Selenium was styled on FIT tests.
12. FIT was created by Ward Cunningham and means Framework for Integrated Testing.
The tests were originally designed to be run from HTML files and the IDE keeps this
idea for its tests.
13. ‹‹ If you click the Source tab you will be able to see the HTML that will store the test.

The area below the Value text box will show the Selenium log while the tests are

running. If an item fails, then it will have an [error] entry.

This area will also show help on Selenium Commands when you are working in the

Command selectbox. This can be extremely useful when typing commands into

Selenium IDE instead of using the record feature.

‹‹ The Log tab will show a log of what is happening during the test. The Reference tab

gives you documentation on the command that you have highlighted.

Now Getting Started with Selenium IDE

Started with Selenium IDE

Testing automation is growing in popularity over the years because teams do
not have the time or money to invest in large test teams to make sure that
applications work as they are expected. Developers also want to make sure
that the code they have created works as they expect it to.
Selenium is one of the most well known testing frameworks in the world that
is in use. It is an open source project that allows testers and developers alike to
develop functional tests to drive the browser. It can be used to record workflows
so that developers can prevent future regressions of code. Selenium can work
on any browser that supports JavaScript, since Selenium has been built using
JavaScript.

Very Important preliminary points.

Before we start working through this chapter we need to make sure that Mozilla Firefox

is installed on your machine. If you do not have Mozilla Firefox installed you will need to

download it.

What Selenium IDE

Selenium IDE was developed to allow testers and developers to record their actions as they

follow the workflow that they need to test. 

Selenium IDE is a Firefox Add-on developed originally by Shinya as a way to use the

original Selenium Core code without having to copy Selenium Core onto the server. Selenium

Core is the key JavaScript modules that allow Selenium to drive the browser. It has been

developed using JavaScript so that it can interact with DOM (Document Object Model) using

native JavaScript calls.

Easy installing Selenium IDE

Now that we understand what Selenium IDE is, it is a good time to install it. At the end of

these steps, you will have successfully installed Selenium IDE on to your computer:

1. Go to http://seleniumhq.org/download

2. Click on the download link for Selenium IDE. You may see a message appear saying

Firefox prevented this site (seleniumhq.org) from asking you to install software on

your computer. If you do, click the Allow button.

3. A Firefox prompt will appear, as shown in the following screenshot:

4. You will then be asked if you would like to install Selenium IDE and the exporter

add-ons. These have been made pluggable to the IDE by the work that Adam

Goucher did. You will see a screen like the following appear:

5. Once the countdown has finished on the Install button, it will become active; click it.

This will now install Selenium IDE and formatters as Firefox Add-ons.

6. Once the install process is complete it will ask you to restart Firefox. Click the Restart

Now button. Firefox will close and then re-open. If you have anything open in another

browser it might be worth saving your work, as Firefox will try to go back to its original

state but this cannot be guaranteed.

7. Once the installation is complete, the Add-ons window will show the Selenium IDE

and its current version: