📋 Overview
What are Locators?
Locator is a command that tells Selenium IDE which GUI elements ( say Text Box, Buttons, Check Boxes etc) its needs to operate on. Identification of correct GUI elements is a prerequisite to creating an automation script. But accurate identification of GUI elements is more difficult than it sounds. Sometimes, you end up working with incorrect GUI elements or no elements at all! Hence, Selenium provides a number of Locators to precisely locate a GUI element
The different types of Locators in Selenium IDE.
Syntax for Locator Usage
Method | Target Syntax | Example | illustration |
|---|---|---|---|
By ID | id= id_of_the_element | id=Id |  |
By Name | name=name_of_the_element | name=id-user |  |
By Name Using Filters | name=name_of_the_element filter=value_of_filter | name=tripType value=oneway |  |
By Link Text | link=link_text | link=LOGIN |  |
Tag and ID | css=tag#id | css=input#email |  |
Tag and Class | css=tag.class | css=input.user-email |  |
Tag and Attribute | css=tag[attribute=value] | css=input[name=email] |
|
Tag, Class, and Attribute | css=tag.class[attribute=value] | css=input.email[tabindex=0] |  |
Locating by XPath:
XPath is the language used when locating XML (Extensible Markup Language) nodes. Since HTML can be thought of as an implementation of XML, we can also use XPath in locating HTML elements.
...
Disadvantage: It is the most complicated method of identifying elements because of too many different rules and considerations.
✍ Select Target base on FrontBuilder:
When you playback a recording:
The selenium IDE will display some target for you select.
...
Copy xpath of target on DevTools
Step 1: Open DevTools in page test and select the target you want to copy (see Open Chrome DevTools in bellow).
Step 2: Right click on the element's HTML code and then select the “Copy“ and then select "Copy XPath" option.
...
Icon | Action |
|---|---|
 | Select target in page |
 | Find target in page |
💡 Tips and tricks
My tips select target in frontBuilder
With respect to the element not usually change we should use the css:finder
With respect to the element usually change but not change order element in Form, you should use xpath. Explain for it in blellow:
For example you create a page with Form have nodeType is
상품and enable form field follow order in illustration bellow.And you look at your page created
I recommend you use xpath for this situation because Id just change when the order of Field in Form.You can select target in Selenium IDE
Open Chrome DevTools:
When you want to inspect a DOM node's styles or attributes, right-click the element and select Inspect Or press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS).
...