For Advanced

Lesson 2/10

Elementary ID

The selenium. commands allow to select an element on a page in order to click it, get or set its attribute, or perform other actions. They use the search and the by arguments to pinpoint the required element: you provide the phrase to search for an element after the search argument and the element selector after the by argument.

Open Google in your browser. Now, right-click the Sign In button in the top-right corner of the page and select Inspect (Chrome) or Inspect Element (Firefox, IE) from the context menu. A new pane will be displayed on the right side (Chrome) or at the bottom (Firefox, IE) of the browser by default, revealing the code behind the page. Take a look at it — specifically, at the selected line of the code:

<a class="gb_Hd gb_1 gb_kb" id="gb_70" href="https://accounts.google.com/ServiceLogin?hl=en&amp;passive=true&amp;continue=https://www.google.com/" target="_top">Sign in</a>

This is the full description of an element in HTML: the Sign In button on the Google page. Of course, it will differ if other language than English is set for the browser.

There are several element selectors you can use to point to an element: id, class, cssselector, tag, xpath, name, query, jquery. In the HTML code above you can see two of these selectors: class with three values separated with spaces (gb_Hd, gb_1, gb_kb) and id with a value of gb_70.

The third selector, xpath, is easily accessible when you right-click the selected line of code and choose Copy>Copy Xpath (Chrome) or Copy>Xpath (Firefox) from the context menu (in Firefox, you can also copy the cssselector the same way).

Now, take the script from the previous lesson and change the last line:

selenium.click search gb_70 by id

to use different selectors for the same button element:

selenium.click search gb_Hd by class
selenium.click search //*[@id="gb_70"] by xpath
selenium.click search #gb_70 by cssselector

If you run all four variations of the script with the last line altered, you will notice they bring the same result.

Note that in the second example — using the class element selector — you can use any of the three search phrases: gb_Hd, gb_1 or gb_kb.

Next lesson shows a couple of the selenium. commands in action.