CSS Locator定位元素方式

一、什么是CSS Selector

CSS是一种用于渲染HTML或者XML文档的语言，CSS利用其选择器可以将样式属性绑定到文档中的制定元素中，即前端开发人员可以利用CSS设定页面上每一个元素的样式。所以理论上说，无论一个元素定位有多复杂，既然一个开发人员能够定位到并设置样式，那么测试人员同样应该也能定位继而操作该元素。

二、定位方式

• ID选择器 通过#来定义

        Driver.find_element(By.CSS_SELECTOR, '#kw')，定位id=kw的元素

• CLASS选择器（类选择器） 使用.（点)来定义格式

        Driver.find_element(By.CSS_SELECTOR, '.RedChamber')，定位class=RedChamber的元素

        注：如果class属性值有空格，则可以使用如下方法来定位：

        可以使用 点 替换掉所有的空格，如Dream.of.the.Red.Chamber

        可以截取一部分值，然后在截取的部分值之前加上 点

• 标签选择器 通过 标签的标签名来定位元素

        Driver.find_element(By.CSS_SELECTOR, 'span')，定位标签名为 span的元素

• 属性选择器 根据标签中的属性来定位元素，格式：[属性名="属性值"]

        Driver.find_element(By.CSS_SELECTOR, '[id="kw"]')，定位id属性为kw的元素

        Driver.find_element(By.CSS_SELECTOR, '[id]')，没有指定属性值，则返回所有具有某个属性的元素。

        Driver.find_element(By.CSS_SELECTOR, '[class ^=bg]')，匹配所有class属性值bg开头的元素

• ID选择器和class选择器的组合使用 使用方式 #kw.RedChamber

        ID选择器和class选择器组合使用，那么两个条件是且的关系

        Driver.find_element(By.CSS_SELECTOR, '#kw.RedChamber')

• ID选择器和标签选择器的组合使用 标签选择器只能放在ID选择器的前面

        Driver.find_element(By.CSS_SELECTOR, 'a#kw')

• 标签选择器和class选择器组合使用

        Driver.find_element(By.CSS_SELECTOR, 'option.poem')

• 使用多个属性定位元素

        Driver.find_element(By.CSS_SELECTOR, '[id="kw"][name="first"]

• 后代选择器

        使用空格来定义 父元素 加上 空格 后代元素，这种方法只能选择到直系后代，不论是儿子还是孙子都可以。

        Driver.find_element(By.CSS_SELECTOR, '#form span')

• 子元素选择器，只能选自己的儿子，不能隔代，使用>来定位

        Driver.find_element(By.CSS_SELECTOR, '[id="form"] > span')