foreword
When most people use selenium to locate elements, they use the xpath element positioning method, because the xpath element positioning method can basically solve the positioning needs. The xpath element positioning method is more intuitive and better understood.
The css element positioning method is often ignored. In fact, the css element positioning method also has its value; compared with the xpath element positioning method, the css element positioning method is faster and the syntax is more concise.
If you still don't understand the content of the text below, you can read this detailed tutorial on web automation testing
1. Positioning of css elements: positioning through the label of the element or the id and class attributes of the element
1. The positioning method of css elements can be directly located through the three general attributes of the element's id, class, and label.
2. For example: the following is the html code of the Baidu input box:
<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>①Css element positioning uses # to indicate the id attribute, such as: #kw
②The css element positioning method uses . to represent the class attribute, such as .s_ipt
③The css element positioning method can also directly use the tag name without any identifier, such as: input
Two, css element positioning: positioning through other attributes of the element
1. CSS element positioning can not only be positioned by the three conventional attributes of label, class, and id, but also by other attributes of the element. For example:
Three, css element positioning: locate elements through the combination of tags and attributes
Fourth, css element positioning: positioning through the hierarchical relationship of elements
1. CSS element positioning can achieve similar xpath element positioning through the hierarchical relationship of elements to locate, for example:
xpath element positioning: //form[@id='form']/span/input and //form[@class='fm']/span/input can also be implemented with css
Five, css element positioning: positioning through the parallel index of the element
1. Take the following figure as an example: similar to four.
2. CSS element positioning can also locate child elements through the index option: nth-child (1). This is very different from the xpath writing method. In fact, it is easy to understand. The direct translation is the first child
Six, css element positioning: positioning through logical operations on element attributes
1. CSS can also implement logical operations and match two attributes at the same time. This is different from xpath, and there is no need to write the and keyword.
7. Deal with the fuzzy matching problem of css_selector positioning elements in selenium
① To match the id attribute of an element, first specify an html tag, then add the "#" symbol, and then add the id attribute value.
driver.find_element_by_css_selector('div#ID').click()
② Match the class attribute of the element, first specify an html tag, then add the "." symbol, and add the attribute value of the class.
driver.find_element_by_css_selector('div.CLASS').click()
③Other attributes of the matching element. [Here is no longer the '.' or '#' symbol, but uses the method of "tag name [attribute name = attribute value]" to locate the element]
driver.find_element_by_css_selector('div[name=NAME]').click()
④ Combination matching [Support positioning element objects through two or more sets of attributes]
driver.find_element_by_css_selector('div[name=NAME][type=TYPE]').click()
⑤ match header
driver.find_element_by_css_selector('div[style^="sp.gif"]').click()
⑥ Match tail
driver.find_element_by_css_selector('div[style$="sp.gif"]').click()
⑦match middle
driver.find_element_by_css_selector('div[style*="sp.gif"]').click()
Finally, I would like to thank everyone who has read my article carefully. Reciprocity is always necessary. Although it is not a very valuable thing, you can take it away if you need it:
Software testing interview applet
The software test question bank maxed out by millions of people! ! ! Who is who knows! ! ! The most comprehensive quiz mini program on the whole network, you can use your mobile phone to do the quizzes, on the subway or on the bus, roll it up!
The following interview question sections are covered:
1. Basic theory of software testing, 2. web, app, interface function testing, 3. network, 4. database, 5. linux
6. web, app, interface automation, 7. performance testing, 8. programming basics, 9. hr interview questions, 10. open test questions, 11. security testing, 12. computer basics
These materials should be the most comprehensive and complete preparation warehouse for [software testing] friends. This warehouse has also accompanied tens of thousands of test engineers through the most difficult journey. I hope it can help you too!