Selenium-八大元素定位
定位策略
定位器是在页面上标识元素的一种方法。它是传送给 查找元素 方法的参数。
查看 鼓励测试练习 寻找 定位器的小技巧， 包含在查找方法中，不同时间，不同原因下，单独声明的定位器的使用方法。
元素选择策略
在 WebDriver 中有 8 种不同的内置元素定位策略：
| 定位器 Locator | 描述 |
|---|---|
| class name | 定位class属性与搜索值匹配的元素（不允许使用复合类名） |
| css selector | 定位 CSS 选择器匹配的元素 |
| id | 定位 id 属性与搜索值匹配的元素 |
| name | 定位 name 属性与搜索值匹配的元素 |
| link text | 定位link text可视文本与搜索值完全匹配的锚元素 |
| partial link text | 定位link text可视文本部分与搜索值部分匹配的锚点元素。如果匹配多个元素，则只选择第一个元素。 |
| tag name | 定位标签名称与搜索值匹配的元素 |
| xpath | 定位与 XPath 表达式匹配的元素 |
创建定位器
要使用 Selenium 处理 Web 元素，我们需要首先在网页上找到它。 Selenium 为我们提供了上述方法，使用这些方法可以在 页。为了理解和创建定位器，我们将使用以下 HTML 代码段。
1 <html> 2 <body> 3 <style> 4 .information { 5 background-color: white; 6 color: black; 7 padding: 10px; 8 } 9 </style> 10 <h2>Contact Selenium</h2> 11 12 <form action="/action_page.php"> 13 <input type="radio" name="gender" value="m" />Male 14 <input type="radio" name="gender" value="f" />Female <br> 15 <br> 16 <label for="fname">First name:</label><br> 17 <input class="information" type="text" id="fname" name="fname" value="Jane"><br><br> 18 <label for="lname">Last name:</label><br> 19 <input class="information" type="text" id="lname" name="lname" value="Doe"><br><br> 20 <label for="newsletter">Newsletter:</label> 21 <input type="checkbox" name="newsletter" value="1" /><br><br> 22 <input type="submit" value="Submit"> 23 </form> 24 25 <p>To know more about Selenium, visit the official page 26 <a href ="www.selenium.dev">Selenium Official Page</a> 27 </p> 28 29 </body> 30 </html>
class name
HTML 页面 Web 元素可以具有属性类。我们可以在 上面显示了 HTML 代码段。我们可以使用类名定位器来识别这些元素 在 Selenium 中可用。
1 driver = webdriver.Chrome() 2 driver.find_element(By.CLASS_NAME, "information") 3
css选择器
CSS 是用于设置 HTML 页面样式的语言。我们可以使用css选择器定位器策略 以标识页面上的元素。如果元素具有 id，则创建定位器 因为 css = #id。否则，我们遵循的格式是 css =[attribute=value] 。 让我们看上面 HTML 片段中的一个示例。我们将为名字创建定位器 text框，使用 css。
1 driver = webdriver.Chrome() 2 driver.find_element(By.CSS_SELECTOR, "#fname")
id
我们可以使用网页中 element 提供的 ID 属性来定位它。 通常，对于网页上的元素，ID 属性应该是唯一的。 我们将使用它来识别姓氏字段。
1 driver = webdriver.Chrome() 2 driver.find_element(By.ID, "lname")
name
我们可以使用网页中 element 提供的 NAME 属性来定位它。 通常，NAME 属性对于网页上的元素应该是唯一的。 我们将使用它来识别时事通讯复选框。
1 driver = webdriver.Chrome() 2 driver.find_element(By.NAME, "newsletter")
link text(链接文本)
如果我们要定位的元素是链接，则可以使用链接文本定位器 在网页上识别它。链接文本是链接显示的文本。 在共享的 HTML 代码段中，我们有一个可用的链接，让我们看看如何找到它。
1 driver = webdriver.Chrome() 2 driver.find_element(By.LINK_TEXT, "Selenium Official Page")
partial link text(部分链接文本)
如果我们要定位的元素是链接，则可以使用部分链接文本定位器 在网页上识别它。链接文本是链接显示的文本。 我们可以将部分文本作为值传递。 在共享的 HTML 代码段中，我们有一个可用的链接，让我们看看如何找到它。
1 driver = webdriver.Chrome() 2 driver.find_element(By.PARTIAL_LINK_TEXT, "Official Page")
tag name(标签名)
我们可以使用 HTML TAG 本身作为定位器来识别页面上的 Web 元素。 从上面分享的 HTML 片段中，让我们使用其 html 标签“a”来识别链接。
1 driver = webdriver.Chrome() 2 driver.find_element(By.TAG_NAME, "a")
xpath
一个 HTML 文档可以看作是一个 XML 文档，然后我们就可以使用 xpath 了 这将是到达感兴趣元素以定位元素所经过的路径。 XPath 可以是绝对 xpath，它是从文档的根目录创建的。 示例 - /html/form/input[1]。这将返回男性单选按钮。 或者 xpath 可能是相对的。示例- //input[@name='fname']。这将返回 名字文本框。让我们使用 xpath 为女性单选按钮创建定位器。
1 driver = webdriver.Chrome() 2 driver.find_element(By.XPATH, "//input[@value='f']")
相对定位器
Selenium 4 引入了相对定位器（以前 称为友好定位器）。当不容易构建定位器时，这些定位器很有帮助 所需的元素，但很容易在空间上描述该元素相对于具有 一个易于构建的定位器。
运作方式
Selenium 使用 JavaScript 函数 getBoundingClientRect（） 来确定页面上元素的大小和位置，并可以使用此信息来定位相邻元素。
查找相对元素。
相对定位器方法可以将先前定位的元素引用作为原点的参数， 或其他定位器。在这些示例中，我们将仅使用定位器，但您可以在最终方法中将定位器换成 一个元素对象，它将以相同的方式工作。
让我们考虑以下示例来理解相对定位器。
可用的相对定位器
Above
如果电子邮件文本字段元素由于某种原因不容易识别，但密码文本字段元素是， 我们可以使用文本字段元素是密码元素“上方”的“输入”元素这一事实来定位它。
1 email_locator = locate_with(By.TAG_NAME, "input").above({By.ID: "password"})
Below
如果密码文本字段元素由于某种原因不容易识别，但电子邮件文本字段元素是， 我们可以使用文本字段元素是电子邮件元素“下方”的“输入”元素这一事实来定位它。
1 password_locator = locate_with(By.TAG_NAME, "input").below({By.ID: "email"})
Left of
如果取消按钮由于某种原因不容易识别，但提交按钮元素是， 我们可以使用它是提交元素“左侧”的“按钮”元素这一事实来定位取消按钮元素。
1 cancel_locator = locate_with(By.TAG_NAME, "button").to_left_of({By.ID: "submit"})
Right of
如果由于某种原因不容易识别提交按钮，但取消按钮元素是， 我们可以使用它是 cancel 元素“右侧”的“button”元素这一事实来定位 submit 按钮元素。
1 submit_locator = locate_with(By.TAG_NAME, "button").to_right_of({By.ID: "cancel"})
Near
如果相对定位不明显，或者因窗口大小而异，可以使用near方法 识别最多远离所提供定位器的元素。 一个很好的用例是使用没有易于构造的定位器的表单元素， 但其关联的输入标签元素确实如此。50px
1 email_locator = locate_with(By.TAG_NAME, "input").near({By.ID: "lbl-email"})
Chaining relative locators
如果需要，您还可以链接定位器。有时，元素最容易被识别为在一个元素的上方/下方和另一个元素的右侧/左侧。
1 submit_locator = locate_with(By.TAG_NAME, "button").below({By.ID: "email"}).to_right_of({By.ID: "cancel"})
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）