Selenium basics—CSS selector positioning encyclopedia

1. CSS attribute positioning

css selector strategy	Example	illustrate
#id	#telA	Select all elements with id="telA".
.class	.telA	Select all elements with class="telA".
[attribute name = attribute value]	[name=telA]	In addition to the id and class attributes, the positioning format of other attributes
[attribute]	[target]	Selects all elements with target attribute.
*	*	Select all elements.

2. Fuzzy matching positioning of css attribute values

css selector strategy	Example	illustrate
[attribute^=value]	a[src^="https"]	Selects each <a> element whose src attribute value begins with "https".
[attribute$=value]	a[src$=".pdf"]	Selects all <a> elements whose src attribute ends with ".pdf".
[attribute*=value]	a[src*="abc"]	Selects each <a> element that contains the "abc" substring in its src attribute.
[attribute~=value]	a[title~=flower]	Locate nodes with independent flower vocabulary in the label attribute title value
[attribute	=value]	a[lang	=en]	Used to select elements with attribute values starting with the specified value.

Note: [ attribute |= value ]
The value must be a whole word, such as lang="en", or followed by a hyphen, such as lang="en-us". Article address https://www.yii666.com/blog/409796.html

3. css tag positioning

css selector strategy	Example	illustrate
element	p	Target all <p> elements.
Tag name [attribute name = attribute value]	input#telA	Locate all <input> elements whose id attribute value is telA

4. CSS hierarchical relationship positioning

css selector strategy	Example	illustrate
element,element	div,p	Selects all <div> elements and all <p> elements.
element element	div p	Selects all <p> elements inside <div> elements. including future generations.
element>element	div>p	Selects all <p> elements whose parent element is a <div> element. Includes only descendants.
element+element	div+p	Selects all <p> elements immediately following the <div> element. Peer elements.

Example:

css selector strategy	Example	illustrate
You need to use > or spaces to indicate hierarchical relationships		grammar
Parent tag name [parent tag attribute name = attribute value] > child tag name	p#p1>input	Locate the <input> element whose id attribute value is p1
Parent tag name [parent tag attribute name = attribute value] child tag name	p#p1 input	Same as above

5. css index positioning

css selector strategy	Example	illustrate
:only-child	p:only-child	Selects each <p> element that is the only child element of its parent element.
:nth-child(n)	p:nth-child(2)	Selects each <p> element that is the second child of its parent element.
:nth-last-child(n)	p:nth-last-child(2)	Same as above, counting from the last child element.
:nth-of-type(n)	p:nth-of-type(2)	Selects each <p> element that is the second <p> element from its parent.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Same as above, but counting from the last child element.

6. css logical operation positioning

css selector strategy	Logical positioning
Example	Tag name [attribute name 1 = attribute value 1] [attribute name 2 = attribute value 2]
Example	input[type='telA'][placeholder='telA']
illustrate	Match multiple attributes at the same time

7. CSS element status positioning

Selector	example	Example description
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:target	#news:target	选择当前活动的 #news 元素。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:disabled	input:disabled	选择每个禁用的 <input> 元素
:checked	input:checked	选择每个被选中的 <input> 元素。
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。

七、总结

如果元素有明确id，name，class属性时，使用对应的基本定位方法。
如果没有id，name，class属性时，或id，name，class属性是动态/不唯一的时候，使用XPath和css_selector定位。
定位页面超链接使用link_text和partial_link_text定位
可使用XPath和css_selector定位的时候，优先使用css_selector。
css_selector定位的速度和效率比Xpath高。
没有最好的，只有最精简的，怎么简单怎么来。

扩展：为什么css_selector定位的速度和效率比Xpath高?
因为你无论用那种方式定位，最终都会转换到css_selector进行元素定位。
我们可以在PyCharm中，安装ctrl点击对应的方法，进行查看源码，最终都会定位到如下代码：

  def find_element(self, by=By.ID, value=None):
        """
        Find an element given a By strategy and locator. Prefer the find_element_by_* methods when
        possible.

        :Usage:
            element = driver.find_element(By.ID, 'foo')

        :rtype: WebElement
        """
        if self.w3c:
            if by == By.ID:
                by = By.CSS_SELECTOR
                value = '[id="%s"]' % value
            elif by == By.TAG_NAME:
                by = By.CSS_SELECTOR
            elif by == By.CLASS_NAME:
                by = By.CSS_SELECTOR
                value = ".%s" % value
            elif by == By.NAME:
                by = By.CSS_SELECTOR
                value = '[name="%s"]' % value
        return self.execute(Command.FIND_ELEMENT, {
            'using': by,
            'value': value})['value']