Selenium-element positioning

Regarding positioning elements, you can locate them by id, name, xpath, link, css, tag, etc.

Id positioning: id=kw

Name positioning: name=wd

Xpath positioning: xpath=//input[@id='kw']

Link positioning: link=link_text     

Css positioning: css=#kw

Tag positioning: tag=input

1. id and name positioning

If an element is regarded as a person, id and name can be regarded as a person's ID number and name. Of course, whether these attribute values ​​are the only ones depends on how the front-end engineer designs them.

locator: Used to locate page elements. Common locators include id and name . Because id is the most convenient, some companies require developers to add id to each element. If there is no id, you can use the name, but the name can be the same name, and multiple page elements can use the same name, which brings difficulties to positioning.

For example, the id of the input box=kw

You can use in robotframework:                                                                                                                                                           

 

2 xpath positioning                                                                                                                                                                

XPath is a language for locating elements in XML documents. What if a person has no ID number or name? Think about how you find a friend for dinner, his cell phone can't get through, and the call won't be answered? Go directly to his home, then you must have his home address, No. xx, xx Road, xx District, xx City. Xpath can find elements through this hierarchical relationship.                                                                                                                                                                                           

1. The absolute path of xpath:

xpath=/html/body/div[1]/div[4]/div[2]/div/form/span[1]/input
We can start from the outermost layer, the div below the body below the html The...input tag under the 4th div. Through level-by-level locking, the desired element is found.

2. The relative path of xpath: 

The usage of absolute path is often used when we have no alternative. It is easier to use relative paths most of the time.

2.1. The element itself:
Xpath can also use the attributes of the element itself:
Xpath=//*[@id='kw1']
// indicates a certain level, * indicates a certain tag name. @id=kw1 means that this element has an id equal to kw1.
Of course, you can generally define the tag name:
Xpath=//input[@id='kw1'] The
element itself, the attributes that can be used are not limited to id and name , such as:
Xpath=//input[@type=' text']
Xpath=//input[@autocomplete='off']
But ensure that these elements can uniquely identify an element.

2.1. Find a superior:
When the person we are looking for is a newborn baby who has not yet named or registered a household registration number (ID number), but you will always be by
your father's side, and your father is the only one Name and ID number, so that we can find your father first, and naturally find you.
The parent attribute of the element is:

<form id="form1" class="fm" action="/s" name="f1">
<span class="bg s_ipt_wr">
   <input id="kw1"class="s_ipt"type="text"maxlength="100"name="wd"utocomplete="off"> 

Get Dad: XPath // span = [@ class = 'bgs_ipt_w'] / INPUT                                                                                                                              If there is no unique properties father, grandfather can find: XPath = // form [@ ID = 'Form1'] / span / INPUT
such a a Look up the level until html, then it is an absolute path.

2.3. Boolean writing:
If a person's name is not unique, the ID number is not unique, but the person who is called Zhang San and the ID number is 123 can uniquely identify a person. Then you can write:
Xpath=//input[@id='kw1'and@name='wd']
can and, of course, or:
Xpath=//input[@id='kw1'or@name=' wd']
But the actual meaning of or is not very good. Generally, we don’t need to say that the name of the person we are looking for is either Zhang San, or the ID number is 123.

2.4 CSS positioning
       CSS (Cascading Style Sheets) is a language that is used to describe the performance of HTML and XML documents. CSS uses selectors to bind attributes to page elements. These selectors can be used by selenium as another positioning strategy.
CSS can select any attribute of the control more flexibly, and in general, the positioning speed is faster than XPath, But it is more difficult for beginners to learn and use. Below we will introduce the syntax and use of CSS in detail.


Positioning through the class attribute:
css=.s_ipt
css=.bgs_btn The
csscss_selector() method is used to locate the element in the CSS language, and the dot (.) indicates that the element is positioned through the class attribute.
Locate through the id attribute:
css=#kw
css=#su
pound sign (#) means to locate the element through the id attribute.
Locate by tag name:
css=input
uses tag name to locate elements in CSS language without any symbol identification, just use the tag name directly, but we have learned that the probability of tag name duplication is very high, so this way is very It is difficult to uniquely identify an element.
Locate by parent-child relationship:
css=span>input The
above writing means that there is a parent element, and its tag name is span. Find all its child elements whose tag name is input.
Locate by attributes:
css=input[autocomplete='off']
css=input[maxlength='100']
css=input[type='submit']
In CSS, you can also use any attribute of the element, as long as these attributes can be unique The identification of this element.
Combination positioning:
Of course , we can combine the above positioning strategies to use, which greatly strengthens the uniqueness of the elements.

css=span.bgs_ipt_wr>input.s_ipt
css=span.bgs_btn_wr>input#su

has a parent element, its tag name is span, it has a class attribute value called bg s_ipt_wr, it has a child element, the tag name is input , And the class attribute value of this child element is called s_ipt.

Guess you like

Origin blog.csdn.net/zangba9624/article/details/108542976