Selenium Concepts

Concepts

A command is what tells Selenium what to do. Selenium commands come in three 'flavors': Actions, Accessors and Assertions. Each command call is one line in the test table of the form:
command
target
value
Actions are commands that generally manipulate the state of the application. They do things like "click this link" and "select that option". If an Action fails, or has an error, the execution of the current test is stopped.
Many Actions can be called with the "AndWait" suffix, e.g. "clickAndWait". This suffix tells Selenium that the action will cause the browser to make a call to the server, and that Selenium should wait for a new page to load.
Accessors examine the state of the application and store the results in variables, e.g. "storeTitle". They are also used to automatically generate Assertions.
Assertions are like Accessors, but they verify that the state of the application conforms to what is expected. Examples include "make sure the page title is X" and "verify that this checkbox is checked".
All Selenium Assertions can be used in 3 modes: "assert", "verify", and "waitFor". For example, you can "assertText", "verifyText" and "waitForText". When an "assert" fails, the test is aborted. When a "verify" fails, the test will continue execution, logging the failure. This allows a single "assert" to ensure that the application is on the correct page, followed by a bunch of "verify" assertions to test form field values, labels, etc.
"waitFor" commands wait for some condition to become true (which can be useful for testing Ajax applications). They will succeed immediately if the condition is already true. However, they will fail and halt the test if the condition does not become true within the current timeout setting (see the setTimeout action below).
Element Locators tell Selenium which HTML element a command refers to. Many commands require an Element Locator as the "target" attribute. Examples of Element Locators include "elementId" and "document.forms[0].element". These are described more clearly in the next section.
Patterns are used for various reasons, e.g. to specify the expected value of an input field, or identify a select option. Selenium supports various types of pattern, including regular-expressions, all of which are described in more detail below.
Defines an object that runs Selenium commands.
Element Locators
Element Locators tell Selenium which HTML element a command refers to. The format of a locator is:
locatorType=argument
We support the following strategies for locating elements:
identifier=id: Select the element with the specified @id attribute. If no match is found, select the first element whose @name attribute is id. (This is normally the default; see below.)
id=id: Select the element with the specified @id attribute.
name=name: Select the first element with the specified @name attribute.
username
name=username
The name may optionally be followed by one or more element-filters, separated from the name by whitespace. If the filterType is not specified, value is assumed.
name=flavour value=chocolate
dom=javascriptExpression: Find an element by evaluating the specified string. This allows you to traverse the HTML Document Object Model using JavaScript. Note that you must not return a value in this string; simply make it the last expression in the block.
dom=document.forms['myForm'].myDropdown
dom=document.images[56]
dom=function foo() { return document.links[1]; }; foo();
xpath=xpathExpression: Locate an element using an XPath expression.
xpath=//img[@alt='The image alt text']
xpath=//table[@id='table1']//tr[4]/td[2]
xpath=//a[contains(@href,'#id1')]
xpath=//a[contains(@href,'#id1')]/@class
xpath=(//table[@class='stylee'])//th[text()='theHeaderText']/../td
xpath=//input[@name='name2' and @value='yes']
xpath=//*[text()="right"]
link=textPattern: Select the link (anchor) element which contains text matching the specified pattern.
link=The link text
css=cssSelectorSyntax: Select the element using css selectors. Please refer to CSS2 selectors, CSS3 selectors for more information. You can also check the TestCssLocators test in the selenium test suite for an example of usage, which is included in the downloaded selenium core package.
css=a[href="#id3"]
css=span#firstChild + span
Currently the css selector locator supports all css1, css2 and css3 selectors except namespace in css3, some pseudo classes(:nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :visited, :hover, :active, :focus, :indeterminate) and pseudo elements(::first-line, ::first-letter, ::selection, ::before, ::after).
ui=uiSpecifierString: Locate an element by resolving the UI specifier string to another locator, and evaluating it. See the Selenium UI-Element Reference for more details.
ui=loginPages::loginButton()
ui=settingsPages::toggle(label=Hide Email)
ui=forumPages::postBody(index=2)//a[2]
Without an explicit locator prefix, Selenium uses the following default strategies:
dom, for locators starting with "document."
xpath, for locators starting with "//"
identifier, otherwise
Element Filters
Element filters can be used with a locator to refine a list of candidate elements. They are currently used only in the 'name' element-locator.
Filters look much like locators, ie.
filterType=argument
Supported element-filters are:
value=valuePattern
Matches elements based on their values. This is particularly useful for refining a list of similarly-named toggle-buttons.
index=index
Selects a single element based on its position in the list (offset from zero).
String-match Patterns
Various Pattern syntaxes are available for matching string values:
glob:pattern: Match a string against a "glob" (aka "wildmat") pattern. "Glob" is a kind of limited regular-expression syntax typically used in command-line shells. In a glob pattern, "*" represents any sequence of characters, and "?" represents any single character. Glob patterns match against the entire string.
regexp:regexp: Match a string using a regular-expression. The full power of JavaScript regular-expressions is available.
regexpi:regexpi: Match a string using a case-insensitive regular-expression.
exact:string: Match a string exactly, verbatim, without any of that fancy wildcard stuff.
If no pattern prefix is specified, Selenium assumes that it's a "glob" pattern.
For commands that return multiple values (such as verifySelectOptions), the string being matched is a comma-separated list of the return values, where both commas and backslashes in the values are backslash-escaped. When providing a pattern, the optional matching syntax (i.e. glob, regexp, etc.) is specified once, as usual, at the beginning of the pattern.

How to Saving tests

Saving tests

Saving tests is done in the same manner as saving a test suite. Click on the File Menu and

then click Save Test Case. This will give you a save dialog, save this to somewhere that you

can get to it later. When you save your tests and your test suite, Selenium IDE will try to keep

the relationships between the folders in step when saving the tests and the test suites.

What you cannot record

We have seen our tests work really well by recording them and then playing them back.

Unfortunately there are a number of things that Selenium cannot do. Since Selenium was

developed in JavaScript, it tries to synthesize what the user does with JavaScript events.

Unfortunately this does mean that it is bound by the same rules that JavaScript has in any

browsers by operating within the sandbox.

‹‹ Silverlight and Flex/Flash applications, at the time of writing, cannot be recorded

with Selenium IDE. Both these technologies operate in their own sandbox and do

not operate with the DOM to do their work.

‹‹ HTML 5, at the time of writing, is not fully supported with Selenium IDE. A good

example of this is elements that have the contentEditable=true attribute. If

you want to see this, you can use the type command to type something into the

html5div element. The test will tell you that it has completed the command but

the UI will not have changed, as shown in the following screenshot:

‹‹ Selenium IDE does not work with Canvas elements on the page either so you will not

be able to make your tests move items around on a page.

‹‹ Selenium cannot do file uploads. This is due to the JavaScript sandbox not allowing

JavaScript to interact with <input type=file> elements on a page. While you

might be able to send the text to the box it will not always do what you expect,

so I would recommend not doing it.

How To Create Test Suites

Test Suites

We have managed to create a number of tests using Selenium IDE and have managed to run

them successfully. The next thing to have a look at is how to create a test suite, so that we

can open the test suite and then have it run a number of tests that we have created.

1. Click New Test Case.

2. You will see that Selenium IDE has opened a new area on the left of the IDE as

shown in the following screenshot:

You can do this as many times as you want and when the Play entire test suite button is

clicked it will run all the tests in the test suite. It will log all the passes and failures at the

bottom of the Test Case box.

To Save this, click on the File menu and then click Save Test Suite and save the Test Suite file

to somewhere that you can get to again. One thing to note is that saving a test suite does not

save the test case. Make sure that you save the test case every time you make a change and

not just the test suite.

To change the name of the test case to something a lot more meaningful you can do this by

right-clicking on the test and clicking on the Properties item in the context menu:

You can now add meaningful names to your tests and they will appear in Selenium IDE

instead of falling back to their filenames.

We have managed to create our first test suite. This can be used to group tests together to

be used later. If your tests have been saved, you can update the test suite properties to give

the tests a name that is easier to read.

How Storing information from the page in the test

Storing information from the page in the test

Sometimes there is a need to store elements that are on the page to be used later in a test.

This could be that your test needs to pick a date that is on the page and use it later so that

you do not need to hardcode values into your test.

Once the element has been stored you will be able to use it again by requesting

it from a JavaScript dictionary that Selenium keeps track of. To use the variable it

will take one of the following two formats: it can look like ${variableName} or

storedVars['variableName']. I prefer the storedVars format as it follows

the same format as it is within Selenium internals.

1. Open up Selenium IDE and switch off the Record button.

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

3. Right-click on the text Assert that this text is on the page and go to the storeText

command in the context menu and click on it.

4. A dialog will appear as shown in the following screenshot. Enter the name

of a variable that you want to use. I have used textOnThePage as the name

of my variable.

5. Click on the row below the storeText command in Selenium IDE.

6. Type type into the Command textbox.

7. Type storeinput into the Target box.

8. Type ${textOnThePage} into the Value box.

9. Run the test. It should look like the following screenshot:

Once your test has completed running you will see that it has placed Assert that this text is

on the page into the textbox.

We have successfully created a number of tests and have seen how we can work against

AJAX applications but unfortunately creating tests that run perfectly first time can be

difficult. Sometimes, as a test automator, you will need to debug your tests to see

what is wrong.

To work through this part of the chapter you will need to have a test open in Selenium IDE.

These two steps are quite useful when your tests are not running and your want to execute a

specific command.

1. Highlight a command.

2. Press the X key, this will make the command execute in Selenium IDE.

When a test is running you can press the Pause button to pause the test after the step that is

currently being run. Once the test has been paused the Step button is no longer disabled and

you can press it to step through the test as if you were stepping through an application.

If you are having issues with elements on the page you can type in their location and then

click on the Find button. This will surround the element that you are looking for with a green

border that flashes for a few seconds.

The echo command is also a good way to write something from your test to the log. This is

equivalent to Console.log in JavaScript. For example, echo | ${variableName}.

Also remember that if you are trying to debug a test script that you have created with

Selenium IDE, you can set breakpoints in your test. You simply right-click on the line and

select breakpoint from the list.

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.