Moving elements on the page
As I just mentioned, Selenium, when using the value of the ID attribute, can find elements on a page even if they are moved. Click on the button with the text Random on the Chapter 2 page of the site (you can do this manually), and then run the script that we created earlier. You will see that your test executes successfully.
Finding elements by name
Elements do not necessarily have ID attributes on all of them. Elements can have names that we can use to locate them. In the Target textbox, this would look like name=Element. Try the following example to see how it works:
- Open Selenium IDE.
- Navigate to http://book.theautomatedtester.co.uk/chapter2 and click on the Firebug icon.
- Find any element that you want to interact with and, in the Target textbox of Selenium IDE, place the value of its name attribute. For example, use
but2, as in the following screenshot, against http://book.theautomatedtester.co.uk/chapter2:
- Type the
clickcommand into the Command select box. - Play your script.
Your test will have executed the step successfully. Since the test used the name of the element, if that element were to be moved around, it would find the item without any issue.
There are times when there may be elements on the page that have the same name but a different attribute. When this happens, we can apply filters to the locator so that Selenium IDE can find the element that we are after. An example of this on the page is name=verifybutton1 value=chocolate;. This will find the second button with the name verifybutton1. See an example of this in the following screenshot:
Finding elements by link text
The most common element on a page is a link. Links allow pages to be joined together so that end users can navigate a site with confidence. You can see a screenshot of the element being found in Selenium IDE:
- To specify that you want to follow a link, you use the
link=linktarget. - On http://book.theautomatedtester.co.uk/chapter2, there is a link to the
indexpage of the site. In the Target textbox in Selenium IDE, we will need to addlink=Index. If you click the Find button on Selenium IDE, you will see the following screenshot:
We have seen how we can find links that are on that page so that they can be used in your test. All that is needed is the inner text of the nodes in the DOM.
Finding elements by accessing the DOM via JavaScript
There are times when the DOM will be updated via AJAX and this means that the locator needed for the test needs some form of JavaScript to see if it is there. In JavaScript, calling the DOM to find the first link on the page looks like document.links[0];. The document element represents the HTML document and links is an array on that object. On the Chapter 2 page of the website, it will show the link that we used in the previous sections of this chapter.
However, normally, it will just be calls to the DOM to see if an element has been added as in the following screenshot:
We have just seen that we can use JavaScript to find elements on a page. This can be extremely useful if you have a web application that does a lot of interaction with the DOM.
Finding elements by XPath
Unfortunately, best practices cannot always be followed when building the markup or, if they are, then they may have a dynamic edge to them. An example of this is working against a page that uses a key from the database as the element ID, so when something is edited and stored back in the database, it can be found a lot quicker and updated. In this section of the chapter, we will work with XPath. XPath allows us to query the DOM as though it were an XML document. With XPath, we can execute some rather complex queries to find elements on the page that may not have been accessible otherwise.
Let's start by creating a basic XPath. We will look for an input button:
- Open Selenium IDE.
- Navigate to http://book.theautomatedtester.co.uk/chapter2.
- Type
clickinto the Command select box. - Type
xpath=//inputinto the Target textbox. - Click on the Find button. It will find a button on the page as in the following screenshot. Note that sometimes Selenium IDE flashes the button in a yellow color:
Your test will have looked against the DOM to find an element that was of the input type. The xpath= value at the beginning tells Selenium that the element needed will be located by XPath. It removes the guesswork that Selenium will have to do and is seen as good practice. The // tells the query that it needs to stop at the first element that it finds. It is a greedy query so, if you have a rather large web page, it can take some time to return since it will try to parse the page. Writing the XPath like this allows us to make changes to the UI, within reason, without it impacting the test.