Selenium4Web自动化2-页面元素定位

一 前端页面的组成分析详解

1 常见标签

标签语言，常见的标签有：
a： 超链接
img： 图片
input：输入框、文件上传
button：按钮
select：下拉框
iframe：窗体
p：文字
。。。。。

2 标签语法

页面元素 == 标签
标签的基本格式：

<tagName attribute1="xxxx" attribute2="www">text</tagName>

标签还有另一种简单的写法

<tagName1 attribute1="xxxx" attribute2 />

3 需要注意的的点

• 页面元素是在视觉上有欺骗效果
  css提供元素样式，但元素定位时，我们关键是看标签的名字。
• 属性和text的区别
  尖括号外面的是text，尖括号里面的是属性
• 元素定位，就等于定位页面标签

二 页面元素定位详解

1. ID元素定位

基于元素属性中的id的值来进行定位，id是一个标签的唯一属性值，可以通过id属性来唯一定位一个元素，是首选的元素定位方式，动态ID不做考虑。

driver.find_element_by_id('id')
driver.find_element(By.ID, 'id')

2. name元素定位

基于元素属性中的name的值来进行定位，但name并不是唯一的，很可能会出现重名。

driver.find_element_by_name('name')
driver.find_element(By.NAME,'name')

3. class_name元素定位

基于元素class样式来定位，非常容易遇到重复的，这个方法的参数只能是一个class值，列如：class属性有空格隔开两个class的值时，只能选取其中一个进行定位。

driver.find_element_by_class_name('class_name')
driver.find_element(By.CLASS_NAME,'class_name')

4. tag_name元素定位

通过元素的标签名来定位元素，如：input标签、span标签；标签名来进行定位元素，重复度最高，只有在需要定位后进行二次筛选的情况下使用。
···
driver.find_element_by_tag_name('tag_name')
driver.find_element(By.TAG_NAME, 'tag_name')
···

5. css_selector元素定位

css可以通过元素的id、class、属性、子元素、后代元素、index、兄弟元素等多种方式进行元素定位.

5.1通过ID定位，如：input id="kw"

driver.find_element_by_css_selector('div#kw')
driver.find_element(By.CSS_SELECTOR, 'div#kw')

5.2 通过class定位，如：input class="is_put"

driver.find_element_by_css_selector('input.is_put')
driver.find_element(By.CSS_SELECTOR, 'input.is_put')

5.3 通过属性定位，如：input name="kw"

driver.find_element_by_css_selector('input[name=kw]')
driver.find_element(By.CSS_SELECTOR, 'input[name=kw]')

5.4 通过子元素定位

与xpath不同，css中用">"右箭头代表子元素，而xpath中用的"/"单斜杠表示

driver.find_element_by_css_selector('div#kw>a')
driver.find_element(By.CSS_SELECTOR, 'div#kw>a')

5.5 通过后代元素定位

driver.find_element_by_css_selector('div#kw a')
driver.find_element(By.CSS_SELECTOR, 'div#kw a')

5.6 通过元素的index值定位元素

driver.find_element_by_css_selector('div#kw>a:nth-child(1)')
driver.find_element(By.CSS_SELECTOR, 'div#kw>a:nth-child(1)')

5.7 通过元素兄弟元素定位元素

css的定位到的是兄弟元素下面的兄弟元素，而且只是下面的第1个元素（如：span元素id为"kw"有很多input兄弟元素，它只定位到它下面的第1个兄弟元素）；而xpath不同的是可以定位到所有兄弟元素；

driver.find_element_by_css_selector('span#kw+input)')
driver.find_element(By.CSS_SELECTOR, 'span#kw+input')

5.8 CSS常见语法一览表

6. link_text元素定位

主要用于超链接进行定位，全部匹配文本值，使用在链接位置处，例如：a标签

driver.find_element_by_link_text('link_text')
driver.find_element(By.LINK_TEXT, 'link_text')

7. partial_link_text元素定位

基于链接的部分文字来定位，link text模糊匹配，模糊查询匹配到多个符合调节的元素，选取第一个，同样也只使用在链接位置处，例如：a标签

driver.find_element_by_partial_link_text('partial_link_text')
driver.find_element(By.PARTIAL_LINK_TEXT, 'partial_link_text')

8. xpath元素定位

xpath是一门在xml文档中查找信息的语言。xpath可用来在xml文档中对元素和属性进行遍历。由于html的层次结构与xml的层次结构天然一致，所以使用xpath也能够进行html元素的定位。xpath的功能非常强大，通过xpath的各种方式组合，能够解决selenium自动化测试中界面元素定位的绝大部分问题。

8.1 xpath通过绝对路径定位元素

将 Xpath 表达式从 html 的最外层节点，逐层填写，最后定位到操作元素，这种方法，一旦路径有变化会导致定位失败，所以不推荐使用该方式。

driver.find_element_by_xpath('/html/body/div[4]/div[1]/a')
driver.find_element(By.XPATH, '/html/body/div[4]/div[1]/a')

8.2 xpath通过相对路径定位元素

绝对路径与相对路径的差别与文件系统中的绝对和相对路径类似，相对路径是只给出元素路径的部分信息，在html的任意层次中寻找符合条件的元素，语句以//开始。

driver.find_element_by_xpath('//form/span')
driver.find_element(By.XPATH, '//form/span')

8.3 xpath通过元素属性定位元素

单属性定位：//input[@name='pwd']表示name属性为pwd的input

driver.find_element_by_xpath("//input[@name='pwd']")
driver.find_element(By.XPATH, "//input[@name='pwd']")

多属性定位：//a[@title="tutorial" and @rel="follow"]

driver.find_element_by_xpath('//a[@title="tutorial" and @rel="follow"]')
driver.find_element(By.XPATH, '//a[@title="tutorial" and @rel="follow"]')

8.4 xpath通过属性值模糊匹配定位元素

xpath模糊匹配的函数有两种：starts-with和contains
starts-with：//label[starts-with(@class,'btn')]，class属性值以btn开头的label元素

driver.find_element_by_xpath("//label[starts-with(@class,'btn')]")
driver.find_element(By.XPATH, "//label[starts-with(@class,'btn')]")

contains：//label[contains(@class,'btn')]，通过属性值包含btn的label元素

driver.find_element_by_xpath("//label[contains(@class,'btn')]")
driver.find_element(By.XPATH, "//label[contains(@class,'btn')]")

8.5 xpath通过文本定位元素

文本内容的定位是利用html的text字段进行定位的方法，//span[text()='下一步']，由于 “下一步” 这几个字是浏览器界面就可以看到的， “所见即所得”，这种特征改的可能性非常小，优先推荐使用。与属性值类似，文本内容也支持starts-with和contains模糊匹配。

driver.find_element_by_xpath("//span[text()='下一步']")
driver.find_element(By.XPATH, "//span[text()='下一步']")
driver.find_element(By.XPATH, "//span[starts-with(text(),'下一步')]")
driver.find_element(By.XPATH, "//span[contains(text(),'下一步')]")

8.6 xpath常见语法一览表

9. XPATH 和 CSS 基本语法对比

10. Selenium4.0 Relative Locators （网格定位/相对定位）

Selenium 4引入了Relative Locators（相对定位器方法），以前称为Friendly Locators。当不容易构造所需元素的定位器，但容易在空间上描述元素与具有容易构造定位器的元素的关系时，这些定位器是有帮助的。Relative Locators（相对定位器方法）可以将先前定位的元素引用或另一个定位器作为原点的参数。
我们以下面的登陆为案例来理解相对定位

10.1 Above（上方）

如果由于某种原因，电子邮件文本字段元素不容易识别，而密码文本字段元素容易识别，那么我们可以使用“输入”元素位于密码元素“上方”的事实来定位文本字段元素。

email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})

10.2 Below （下方）

如果由于某种原因，密码文本字段元素不容易识别，而电子邮件文本字段元素容易识别，那么我们可以使用它是电子邮件元素“下方”的“输入”元素这一事实来定位文本字段元素。

password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})

10.3 Left of （左边）

如果由于某种原因取消按钮不容易识别，而提交按钮元素容易识别，那么我们可以利用它是提交元素“左侧”的一个“按钮”元素来定位取消按钮元素。

cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})

10.4 Right of （右边）

如果提交按钮由于某种原因不容易识别，而取消按钮元素容易识别，那么我们可以使用“取消”元素右侧的“按钮”元素来定位提交按钮元素。

submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})

10.5 Near（附近）

如果相对定位不明显，或者它根据窗口大小而变化，则可以使用near方法来标识距离所提供的定位器最多50px的元素。使用这种方法的一个很好的例子是，一个表单元素没有一个容易构造的定位器，但它的相关输入标签元素有。

email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})

10.5 Chaining relative locators （链接定位）

如果需要，您也可以链接定位器。有时，元素最容易被识别为一个元素的上方/下方和另一个元素的左右。

submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})

11 元素定位不同定位方式

除了常规元素匹配，还有一些特殊的元素定位方式
我们以下面的HTML代码为案例来进行讲解

<ol id="vegetables">
 <li class="potatoes">…
 <li class="onions">…
 <li class="tomatoes"><span>Tomato is a Vegetable</span>…
</ol>
<ul id="fruits">
  <li class="bananas">…
  <li class="apples">…
  <li class="tomatoes"><span>Tomato is a Fruit</span>…
</ul>

11.1 All matching elements （匹配所有元素/组元素）

有几个用例需要获取与定位器匹配的所有元素的引用，而不仅仅是第一个。复数find elements方法返回元素引用的集合。如果没有匹配，则返回一个空列表。在这种情况下，对所有水果和蔬菜列表项的引用将在一个集合中返回。

plants = driver.find_elements(By.TAG_NAME, "li")

通常，您获得了一个元素集合，但希望使用特定的元素，这意味着您需要遍历该集合并标识您想要的元素。

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Firefox()

    # Navigate to Url
driver.get("https://www.example.com")

    # Get all the elements available with tag name 'p'
elements = driver.find_elements(By.TAG_NAME, 'p')

for e in elements:
    print(e.text)

11.2 Find Elements From Element （元素内定位/元素链接定位）

它用于在父元素的上下文中查找匹配子元素的列表。为了实现这一点，父元素被链接到' findElements '来访问子元素

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.example.com")

# Get element with tag name 'div'
element = driver.find_element(By.TAG_NAME, 'div')

# Get all the elements available with tag name 'p'
elements = element.find_elements(By.TAG_NAME, 'p')
for e in elements:
    print(e.text)

11.3 Get Active Element （活动元素定位）

它用于跟踪(或)找到当前浏览上下文中焦点所在的DOM元素。

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
driver.find_element(By.XPATH, '//input[@id="kw"]').send_keys("展昭老师")

# 获取当前活动元素的属性

attr = driver.switch_to.active_element.get_attribute("name")
print(attr)

12 关于网络元素的信息(结果检查需要用)

可以查询有关特定元素的许多详细信息

12.1 是否显示

此方法用于检查连接的元素是否正确 显示在网页上. 返回一个 Boolean 值, 如果连接的元素显示在当前的浏览器上下文中, 则为True 否则返回false.

# Navigate to the url

driver.get("https://www.google.com")

# Get boolean value for is element display

is_button_visible = driver.find_element(By.CSS_SELECTOR, "[name='login']").is_displayed()

12.2 元素是否被选定

此方法确定是否 已选择 引用的元素. 此方法广泛用于复选框, 单选按钮, 输入元素和选项元素.
返回一个布尔值, 如果在当前浏览上下文中 已选择 引用的元素, 则返回 True, 否则返回 False.

# Navigate to url

driver.get("https://the-internet.herokuapp.com/checkboxes")

# Returns true if element is checked else returns false

value = driver.find_element(By.CSS_SELECTOR, "input[type='checkbox']:first-of-type").is_selected()

12.3 获取元素标签名

此方法用于获取在当前浏览上下文中 具有焦点的被引用元素的 TagName .

# Navigate to url

driver.get("https://www.example.com")

# Returns TagName of the element

attr = driver.find_element(By.CSS_SELECTOR, "h1").tag_name

12.4 获取元素矩形

用于获取参考元素的尺寸和坐标.
提取的数据主体包含以下详细信息:
元素左上角的X轴位置
元素左上角的y轴位置
元素的高度
元素宽度

# Navigate to url

driver.get("https://www.example.com")

# Returns height, width, x and y coordinates referenced element

res = driver.find_element(By.CSS_SELECTOR, "h1").rect

12.5 获取元素CSS值

获取当前浏览上下文中元素的特定计算样式属性的值.

# Navigate to Url

driver.get('https://www.example.com')

# Retrieves the computed style property 'color' of linktext

cssValue = driver.findElement(By.LINK_TEXT, "More information...").value_of_css_property('color')

12.6 获取元素文本

获取特定元素渲染后的文本.

# Navigate to url

driver.get("https://www.example.com")

# Retrieves the text of the element

text = driver.find_element(By.CSS_SELECTOR, "h1").text