[TOC] ## **4.1.8 CSS 定位** CSS 是一种语言，用来描述 HTML 和 XML 文档的表现。CSS 使用选择器为页面元素绑定属性。 CSS 选择器可以较为灵活地选择控件的任意属性，一般情况下，CSS 定位速度比 XPath定位速度快，但对于初学者来说，学习起来稍微有点难度，下面介绍 CSS 选择器的语法与使用。 CSS 选择器的常见语法如表 4-1 所示  下面同样以百度输入框和百度搜索按钮为例，介绍 CSS 定位的用法。 ``` <span class="bg s_ipt_wr"> <input id="kw" class="s_ipt" autocomplete="off" maxlength="100" name="wd"> </span> <span class="bg s_btn_wr"> <input id="su" class="s_btn" type="submit" value="百度一下"> </span> ``` <br /> 1. **通过 class 定位** ``` find_element_by_css_selector(".s_ipt") find_element_by_css_selector(".s_btn") ``` find_element_by_css_selector()方法用于在 CSS 中定位元素，点号（.）表示通过 class来定位元素。 2. **通过 id 定位** ``` find_element_by_css_selector("#kw") find_element_by_css_selector("#su") ``` 井号（#）表示通过 id 来定位元素。 3. **通过标签名定位** ``` find_element_by_css_selector("input") ``` 在 CSS 中，用标签名定位元素时不需要任何符号标识，直接使用标签名即可。 4. **通过标签层级关系定位** ``` find_element_by_css_selector("span > input") ``` 这种写法表示有父元素，父元素的标签名为 span。查找 span 中所有标签名为 input 的子元素。 5. **通过属性定位** ``` find_element_by_css_selector("[autocomplete=off]") find_element_by_css_selector("[name='kw']") find_element_by_css_selector('[type="submit"]') ``` 在 CSS 中可以使用元素的任意属性定位，只要这些属性可以唯一标识这个元素。对属性值来说，可以加引号，也可以不加，注意和整个字符串的引号进行区分。 6. **组合定位** 我们可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。 ``` find_element_by_css_selector("form.fm > span > input.s_ipt") find_element_by_css_selector("form#form > span > input#kw") ``` 我们要定位的这个元素标签名为 input，这个元素的 class 属性为 s_ipt；并且它有一个父元素，标签名为 span。它的父元素还有父元素，标签名为 form，class 属性为 fm。我们要找的就是必须满足这些条件的一个元素。 7. 更多定位用法 ``` find_element_by_css_selector("[class*=s_ipt_wr]") ``` 查找 class 属性包含“s_ipt_wr”字符串的元素。 ``` find_element_by_css_selector("[class^=bg]") ``` 查找 class 属性以“bg”字符串开头的元素。 ``` find_element_by_css_selector("[class$=wrap]") ``` 查找 class 属性以“wrap”字符串结尾的元素。 ``` find_element_by_css_selector("form > input:nth-child(2)") ``` 查找 form 标签下面第 2 个 input 标签的元素。 <br /> CSS 选择器的更多用法可以查看 W3CSchool 网站中的 CSS 选择器参考手册 （http://www.w3school.com.cn/cssref/css_selectors.asp）。 通过前面的学习我们了解到，XPath 和 CSS 都提供了非常强大而灵活的定位方法。相比较而言，CSS 语法更加简洁，但理解和使用的难度要大一点。根据经验，这两种定位方式我们只需掌握一种即可解决大部分定位问题。 <br /> ## **4.1.9 用 By 定位元素** 针对前面介绍的 8 种定位方法，WebDriver 还提供了另外一套写法，即统一调用 find_element()方法，通过 By 来声明定位，并且传入对应定位方法的定位参数，具体如下。 ``` find_element(By.ID,"kw") find_element(By.NAME,"wd") find_element(By.CLASS_NAME,"s_ipt") find_element(By.TAG_NAME,"input") find_element(By.LINK_TEXT,"新闻") find_element(By.PARTIAL_LINK_TEXT,"新") find_element(By.XPATH,"//*[@class='bg s_btn']") find_element(By.CSS_SELECTOR,"span.bg s_btn_wr>input#su") ``` find_element()方法只用于定位元素，它需要两个参数。第一个参数是定位的类型，由By 提供；第二个参数是定位的值，在使用 By 之前需要先导入。 ``` from selenium.webdriver.common.by import By ``` 通过查看 WebDriver 的底层实现代码可以发现，它们其实是一回事儿。例如，id 定位方法的实现。 ``` def find_element_by_id(self, id_): """Finds an element by id. :Args: - id_ - The id of the element to be found. :Returns: - WebElement - the element if it was found :Raises: - NoSuchElementException - if the element wasn't found :Usage: element = driver.find_element_by_id('foo') """ return self.find_element(by=By.ID, value=id_) ``` 对于 Web 自动化来说，学会元素的定位相当于自动化已经学会了一半，剩下的就是学会使用 WebDriver 中提供的各种方法，接下来我们将通过实例介绍这些方法的具体使用。