Locating Web Elements by walking up the DOM

1 vote

This is one of the rare cases where we need use XPath, as parent selecting is not supported in CSS. We prepared a sample to visualize this case. Take a look on the following website: when to use XPath

As you can see the amount of unique identifiers is very limited. However, we can select the `edit` or `delete` button based on the value which is present in the first table-cell.

The following example will select the `edit` button of the third row.

//td[contains(text(), '678')]/../td/button[@class = 'edit']

As you can see, we first select the right table-cell based on the text it contains. Then we go one level up ( ../) in the HTML structure and select the right button based on the `class`.

 

Examine your knowledge and play the ‘locator game‘.

Locating Web Elements by text matching

1 vote

Although it is not the best solution, sometimes we need to locate elements based on the text displayed. It’s not the best solution if you have to test a multilingual website, because the text is different in every language.

Using XPath we have the following options:

Text equals

//E[text() = 'Displayed text']

Text contains

//E[contains(text(), 'Displayed text')]

 

Examine your knowledge and play the ‘locator game‘.

Access in-browser Development Tools

0 votes

Most common browsers have some built-in development tools. These tools will help you to reveal HTML of the page and understand how the page is structured. This all sounds good, but they all have their own look and feel. We will see how we can launch the `Developer Tools`.

Internet Explorer
In Internet Explorer we can access `Developer Tools` by pressing `F12`.

Firefox
Firfox has some built-in developer tools, but Firebug seems to be more popular and powerful. We can download the Firebug add-on from http://getfirebug.com/ .

The shortcut to open `Firebug` is `F12`.

FireBug toolbar

Click on the `Inspect` button on Firebug’s toolbar. Move around the page and everything beneath your mouse will be instantly revealed within Firebug, showing you the HTML and CSS behind it.

Chrome
Chrome comes with `Developer Tools`. The shortcut to open `Developer Tools` is `CTRL` + `SHIFT` + `I` or `F12`.

Chrome toolbar

Click on the `Inspect` button on Chrome Developer Tools toolbar. Move around the page and everything beneath your mouse will be instantly revealed within Chrome Developer Tools, showing you the HTML and CSS behind it.

Opera
Opera comes with `Opera Dragonfly`. The shortcut to open `Opera Dragonfly` is `CTRL` + `SHIFT` + `I`.

Safari
Safari has a built-in `Developer Tools`. First, you need to enable that you want to see the Develop menu.

Click on `Preferences…` in the `settings` drop down menu. Go to the `Advanced` tab and check `Show Develop menu in menu bar`.

The shortcut to open `Developer Tools` is `CTRL` + `ALT` + `I`.