html 定位_Selenium快速入门知识3-API元素定位

在介绍API之前，展示一段HTML代码。

1

2 进入百度

3

4

5

6

7

8

9

10

(1)通过id定位元素

语法：

driver.find_element_by_id(id_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_id("user")

注意，在许多网站中id值是动态变化的。另外需要指出如果符合条件的元素有多个，定位到第一个符合条件的元素，下面也一样。

(2)通过name定位元素

语法：

driver.find_element_by_name(name_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_name("username")

(3)通过class_name定位元素

语法：

driver.find_element_by_class_name (class_name_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_class_name("input_name")

(4)通过tag_name定位元素

语法：

driver.find_element_by_tag_name (tag_name_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_tag_name("input")

(5)通过link文字精确定位元素

语法：

driver.find_element_by_link_text (link_text)

在上面的HTML代码中可以通过如下代码来定位到第2行的超链元素。

driver.find_element_by_link_text("进入百度")

(6)通过link文字模糊定位元素

语法：

driver.find_element_by_ partial_link_text (partial_link_text)

在上面的HTML代码中可以通过如下代码来定位到第2行的超链元素。

driver.find_element_by_partial_link_text("百度")

(7)通过CSS定位元素

CSS(Cascading Style Sheets)是一种语言，它用来描述HTML和XML文档的表现。CSS可以较为灵活的选择控件的任意属性，一般情况下会比XPath快。且语法也比较简洁。

#号表示通过id属性来定位元素

语法：

driver.find_element_by_css_selector (#id_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_css_selector("#user")

.号表示通过class属性来定位元素

语法：

driver.find_element_by_css_selector (.class_name_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_css_selector(".input_name")

没有任何符号表示通过标签名属性来定位元素

语法：

driver.find_element_by_css_selector (tag_name_vaule)

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_css_selector("input")

[]表示通过属性来定位元素

语法：

driver.find_element_by_css_selector (("[atrr='value']"))

在上面的HTML代码中可以通过如下两行代码都可以定位到第1行的input元素。

driver.find_element_by_css_selector("[name='username']")

driver.find_element_by_css_selector("[maxlength='255']")

~表示通过属性来部分定位元素

语法：

driver.find_element_by_css_selector (("[atrr~='value']"))

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_css_selector("[name=~'user']")

>表示通过父亲元素找到儿子元素

语法：driver.find_element_by_css_selector (("father>son"))。

在上面的HTML代码中可以通过如下代码来定位到第1行的input元素。

driver.find_element_by_css_selector("span>form>input")

页面元素的CSS属性在浏览器中可以在开发者模式下，选中需要定位元素的HTML代码，然后右击鼠标，在弹出菜单中选择相应的选项，就可以获得。下图1是在Firefox中选择CSS属性，下图2是在Chrome中选择CSS属性。

(8)通过xpath定位元素

在介绍通过xpath定位元素前先来了解以下DOM树的概念。对于一段HTML代码。

文档标题

我的链接

我的标题

可以化成一颗树，如下图所示

这棵树就为这段代码的DOM树,对于任何一段HTML代码都可以转换为一颗DOM树，这棵树的根节点都为标签。DOM树表示了HTML各个元素之间的层次关系。

通过绝对路径定位

语法：

driver.find_element_by_xpath("/html/name1/name2/…/nameN")

在DOM树的HTML代码中可以通过如下代码来定位到超链标签a。

driver.find_element_by_xpath("/html/body/a")

通过相对路径定位

语法：

driver.find_element_by_xpath("//tag_name_vaule1[@atrr~='value']/ tag_name_vaule2[@atrr~='value']")/…

在本节最开始的HTML代码可以通过如下五行代码都可以定位到第1行的input元素。

driver.find_element_by_xpath("//input[@id='user']")

driver.find_element_by_xpath("//input[@name='username']")

driver.find_element_by_xpath("//input[@class='input_name']")

driver.find_element_by_xpath("//input[@maxlength='255']")

driver.find_element_by_xpath("//*input[@class='input']") *表示模糊匹配

再观察本节最开始的HTML代码

driver.find_element_by_xpath(//span[@class='bg s_bbp']/input")

classname为'bg s_bbp' span标签下的input标签，定位到第8行元素。

driver.find_element_by_xpath("//span[@class='form']/span/input")

classname为'form' span标签下的span标签下input标签，仍旧定位到第8行元素。

driver.find_element_by_xpath("//span[@class='form']/span[2]/input")

classname为'form' span标签下的第二个span标签下input标签，定位到第10行元素。

driver.find_element_by_xpath("//input[@class='username' and @name='name'"]))

classnam为' username' 且name为'name'，定位到第8行元素。

页面元素的xpath属性也可以在浏览器中开发者模式下，选中需要定位元素的HTML代码，然后右击鼠标，在弹出菜单中选择相应的选项，就可以获得。下图1是在Firefox中选择xpath属性，下图2是在Chrome中选择xpath属性。

(9)通过By类定位元素API

Selenium也可以使用By类来定位元素，下表显示了它与上述方法的对应关系：

(10)通过find_elements_by_XXX来定位一组元素。

正如前面所述，如果满足定位API条件的元素有多个，使用find_element_by_XXX方法将获得满足条件的第一个元素。如果使用find_elements_by_XXX这类方法就可以获得所有的元素，返回类型是一个列表，列表中每个元素即符合条件的元素：[element1,element2,…,elementN]。

案例说明：选择所有的复选按钮。

inputs = driver.find_elements_by_id("id")

for i in inputs:

if (i.get_attribute("type")=="checkbox")

i.click()

time.sleep(1)