Selenium IDE | Locating by DOM & CSS | Locating Hyperlinks by Link Texts

Selenium IDE | Locating by DOM

Locating by DOM – The Document Object Model represents an HTML document and can be accessed using JavaScript. This location strategy takes JavaScript that evaluates to an element on the page, which can be simply the element’s location using the hierarchical dotted notation.

Since only dom locators start with “document”, it is not necessary to include the dom= label when specifying a DOM locator.

<html>

<body>

</form>

</body>

<html>

dom=document.getElementById(‘loginForm’) (3)
dom=document.forms[‘loginForm’] (3)
dom=document.forms[0] (3)
forms[0].username (4)
forms[0].elements[‘username’] (4)
forms[0].elements[0] (4)
forms[0].elements[3] (7)

You can use Selenium IDE itself as well as other sites and extensions to explore the DOM of web application.

Locating by CSS: CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents CSS uses Selectors for binding style properties to elements in the document These Selectors can be used by Selenium as another locating strategy.

<html>

<body>

</form>

</body>

<html>

css=form#loginForm (3)
css=input[name=”username”] (4)
css=input.required[type=”text”] (4)
css=input.passfield (5)
css=#loginForm input[type=”button”] (7)
css=#loginForm input:nth-child(2) (5)

Most experienced Selenium IDE users recommend CSS as their locating strategy of choice as it’s considerably faster than XPath and can find the most complicated objects in an intrinsic HTML document.

Implicit Locators

You can choose to omit the locator type in the following situations:

Locators without an explicitly defined locator strategy will default to using the identifier locator strategy.
Locators starting with “//” will use the XPath locator strategy.
Locators starting with “document” will use the DOM locator strategy.

Locating Hyperlinks by Link Text: This is a simple method of locating a hyperlink in web page by using the text of the link. If two links with the same text are present, then the first match will be used.

<html>

<body>

<a href=”continue.html”>Continue</a>

<a href=”cancel.html”>Cancel</a>

</body>

<html>