First, the use of Xpath in selenium
1. What is xpath?
Xpath is the path language of XML. In layman's terms, it is to find the tag element through the path of the element.
2. Tools for practicing Xpath
Firefox, download plugins FireBug and FirePath
3. How to use Xpath
Note: The default dead format, write //* first to represent all elements under the positioning page
(1) Xpath supports ID, class and name positioning functions
Locate by id: //*[@id='i1']
Locate by class: //*[@class='classname']
Locate by name: //*[@name='name']
(2) If the note does not have three overviews of id, class and name, Xpath also supports attribute location function
@ stands for attribute positioning, and then look at any attribute in the attached tag, such as:
//*[@placeholder='Please locate the element via XPATH']
(3) When the attributes of tags are repeated, Xpath provides filtering by tags, //input displays all input tags
//input[@placeholder='Please locate the element through XPATH']
(4) When the tab page is repeated, Xpath provides hierarchical filtering
For example: If I can't find my son, I'll look for his father first, but if it really doesn't work, I can look for his grandfather.
//div/div[@id='dis']
(5) When the levels are repeated, they can be positioned by the attributes of a single level
//div/div[@id='w']/div
(6) An element's sibling elements are the same as its label. At this time, it cannot be located through the hierarchy, because they are all born from a father, multiple children, Xpath provides index filtering, and the index starts from 1, not 0
//select[2]
(7) If all of the above are used in Huizhou and repeated, we can use the ultimate artifact provided by Xpath, logical operation positioning. and or or
//select[@name='city' and @size='4']
//select[@name='city' or @size='4']
Second, the use of CSS Selector in selenium
1. What is CSS Selector?
CSS Selector positioning is actually the label positioning of HTML CSS selectors
2. Tools
Firefox, download plugins FireBug and FirePath
3. How to use CSS Selector
(1) Css selector supports id and class positioning, which is the same as css positioning in html
Locate #i1 by id
Locate .classname by class
Locate multiple classes by class .classname.c2.c3
(2) Through attribute positioning, Css Selector supports arbitrary attribute positioning
[name='name']
(3) Attribute positioning alone is not enough to meet our positioning needs, Css Selector provides tag attribute combination positioning
input[name='name'] The name attribute under the input tag is equal to 'name'
input#i1 The id under the input tag is i1
input.classname The class under the input tag is the classname
div.inner>input The class under the div tag is the inner one with the input tag (note the sharp angle)
There are multiple under Div.inner, but they cannot be located by index, they should be used in combination with the horn + attribute
(4) Css selector multi-attribute combination filtering, no and, just need multiple [] connections
select[name='city'][size='4'][multiple='multiple']
(5) Css selector fuzzy matching
^= matches what element attribute starts with input[value^="register"]
$= matches what attribute ends with input[value$="Record"]
*= What value does the match attribute contain input[value*="Record"]