foreword
When most people use selenium to locate elements, they use xpath positioning, because xpath can basically solve the positioning needs. CSS positioning is often ignored. In fact, CSS positioning also has its value. CSS positioning is faster and the syntax is more concise.
The positioning method of this css is mainly compared with the xpath of the previous article. Basically, xpath can do it, and css can also do it. It is easier to understand by comparing the two articles.
First, css: attribute positioning
1. CSS can be directly located through the three general attributes of the element's id, class, and tag.
2. 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"/>
3.css uses # to represent the id attribute, such as: #kw
4.css uses . to represent the class attribute, such as: .s_ipt
5. CSS uses the label name directly without any identifier, such as: input
Second, css: other properties
1. In addition to the three conventional attributes of tag, class and id, css can also be located through other attributes.
2. The following is the format for locating other attributes
Three, css: tag
1. CSS pages can locate elements through a combination of tags and attributes
Fourth, css: hierarchical relationship
1. In the previous xpath, we talked about hierarchical relationship positioning, and css can also achieve the same effect here.
2. Such as xpath://form[@id='form']/span/input and
//form[@class='fm']/span/input can also be implemented with css
Five, css: index
1. Take the following picture as an example, the same as the previous one
2. CSS can also locate child elements by indexing option: nth-child(1), which is very different from the xpath writing method. In fact, it is easy to understand. The direct translation is the first child.
1. css can also implement logical operations and match two attributes at the same time, which is different from xpath here, no need to write and keyword
Seven, css: fuzzy matching
1. The fuzzy matching of css contains('xxx'), although various materials are used on the Internet to show that it can be used, but the editor personally tested it and kept reporting errors.
2. Found the answer after various Baidu: you can't do this with CSS selectors, because there is no such thing as:contains() in CSS. It was a proposal that was abandoned years ago.
Regrettably, this syntax has been abandoned, so I will not continue to study it here.
The CSS syntax is far more than the ones mentioned above, and there are more and more powerful positioning strategies. Those who are interested can continue to study them in depth. Officially, css positioning is faster and the syntax is more concise, but xpath is more intuitive and easier to understand.