In order to click on or typecast into an HTML element, firstly you need to locate that component. The easiest way to get started with locater in Selenium is probably XPATH. It is something like three clicks: Right click, inspect ingredient, look in the developer toolbar, right click, copy XPATH (the ‘ Copy XPath ’ option is hidden under the Copy submenu within the context menu).

Changing selectors from XPATH to CSS can not only create them faster, but less brittle and easier to say. The good approach might be to know both well.

Let ’ s talk about how to change selection scheme from XPATH to CSS.

SIMPLE ELEMENT NAME

Google ’ s homepage presently has a large text input, with a name of “ q. ” The simplest xpath for this is a lucifer:

//input [@ name= & quot; q & quot;]

The CSS is very similar:

input [name=q]

Here are examples choose the element in Ruby using Webdriver 3.0.

driver = Selenium: :WebDriver.for: chrome, alternative: options

driver.navigate.to & quot; http: //google.com & quot;

ingredient = driver.find_element: xpath, & # x27; //input [@ name= & quot; q & quot;] & # x27;

element = driver.find_element: css, & # x27; input [name=q] & # x27;

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

DIRECT CHILD

HTML is built like a tree, with child knob below parents. A child in XPATH is represented with a & quot; / & quot;, as it is with directory on UNIX filesystems. In CSS the tiddler is indicated with a “ & gt; ” Examples of a link (“ a ”) inside of a div tag:

In XPATH: //div/a

In CSS: div & gt; a

CHILD OR SUBCHILD

Sometimes an element is inside another, perhaps several grade down - and the author does not wish to publish /div/div/div/div. In that suit, a lazy match of any subnode can be defined in XPATH use two slashes, or & quot; // & quot;. In CSS merely by a whitespace Examples:

In XPATH: //div//a

In CSS: div a

ID

ID ’ s in XPATH and CSS are similar to name. XPATH defines ID ’ s using: & quot;[@ id= & # x27;example']& quot; while another approach in CSS is to use the pound signaling, or & quot;#& quot; Examples:

In XPATH: //div [@ id= & # x27; example & # x27;] //a

In CSS: div # example a

CLASS

For class, thing are pretty similar in XPATH: & quot;[@ class= & # x27;example']& quot; while another option in CSS is the dot & quot;. & quot; Examples:

In XPATH: //div [@ class= & # x27; model & # x27;] //a

In CSS: css=div.example a

That & # x27; s enough for now. As you can see, the first convention are straightforward and can make locators shorter and, light. The better alternative is probably to be fluent in both. Our next tip will cover advanced concepts in element locators. In the meantime, check out theMolliza description pageon the topic.

Products

Global tools

Set up and integrate

Resources

Company