1. 概述
Selenium 提供了多种方法来定位网页上的元素，我们经常需要根据元素的属性来查找。属性是附加的信息，可以提供更多的上下文或功能。它们大致可以分为两类：
- 标准属性：这些属性是预定义并被浏览器识别的，如 id、class、src、href、alt、title 等。标准属性有预定义的含义，在不同的 HTML 元素中广泛使用。
- 自定义属性：自定义属性是非 HTML 规范预定义的，但通常由开发者为特定需求创建。这些属性通常以“data-”开头，后面跟着描述性的名称，如 data-id、data-toggle、data-target 等。自定义属性用于存储与元素相关的额外信息或元数据，常在 Web 开发中用于在 HTML 和 JavaScript 之间传递数据。
在这个教程中，我们将深入探讨如何使用 CSS 来精准定位网页上的元素。我们将探索通过属性名称或描述查找元素的方法，包括全匹配和部分匹配选项。到结束时，我们将轻松掌握在页面上找到任何元素的技巧！
2. 根据属性名称查找元素
一个简单的场景是基于特定属性的存在来查找元素。假设有一个网页上有多个按钮，每个按钮都有一个名为“data-action" 的自定义属性。现在，如果我们想找到页面上所有具有此属性的按钮，我们可以使用 [attribute] 选择器：
driver.findElements(By.cssSelector("[data-action]"));
在上面的代码中，[data-action] 将选择页面上所有具有目标属性的元素，并返回一个 WebElement 列表。
3. 根据属性值查找元素
当我们需要定位具有唯一属性值的具体元素时，可以使用 CSS 选择器 [attribute=value] 的严格匹配变体。 这种方法允许我们找到属性值精确匹配的元素。
继续我们的网页示例，其中按钮具有 “data-action” 属性，每个按钮分配了一个独特的动作值，如 data-action=‘delete’、data-action=‘edit’ 等。如果我们想要定位具有特定动作（如“delete”）的按钮，我们可以使用带有确切匹配的属性选择器：
driver.findElement(By.cssSelector("[data-action='delete']"));
4. 根据属性值的起始部分查找元素
当属性值可能变化但包含特定前缀时，我们可以采用另一种方法。
设想我们的应用程序有许多弹出窗口，每个弹出窗口都包含一个带有自定义属性“data-action" 的“接受”按钮。这些按钮可能会在共享前缀后添加独特的标识符，如 “btn_accept_user_popup”、“btn_accept_document_popup” 等。我们可以在基类中使用 *[attribute^=value]* 选择器编写一个通用的定位器：
driver.findElement(By.cssSelector("[data-action^='btn_accept']"));
这个选择器将找到“data-action”属性值以“btn_accept”开头的元素，因此我们可以为每个弹出窗口编写一个通用的“接受”按钮定位器。
5. 根据属性值的结尾部分查找元素
同样地，**当我们的属性值以特定后缀结束时，我们可以使用 *[attribute$=value]。假设我们有一个页面上的 URL 列表，想要获取所有指向 PDF 文件的引用：
driver.findElements(By.cssSelector("[href$='.pdf']"));
在这个例子中，驱动程序会找到所有 “href” 属性值以“.pdf”结尾的元素。
6. 根据属性值的部分内容查找元素
当我们不确定属性前缀或后缀时，可以使用包含匹配 *[attribute*=value]*。考虑这样一个场景：我们想要获取所有引用特定资源路径的元素：
driver.findElements(By.cssSelector("[href*='archive/documents']"));
在这个示例中，我们将收到所有引用档案文件夹中文档的元素。
7. 根据特定类查找元素
我们可以根据元素的类作为属性来定位它。 这是一种常见的技术，特别是检查元素是否启用、禁用或反映在其类中的其他能力时。假设我们想要找到一个禁用的按钮：
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Accept</a>
这次，我们将使用严格的角色匹配并包含类匹配：
driver.findElement(By.cssSelector("[role='button'][class*='disabled']"));
在这个例子中，使用了 “class” 作为属性选择器 *[attribute*=value]*，并在值 “btn btn-primary btn-lg disabled” 中检测到了包含“disabled”的部分。
8. 总结
在这篇教程中，我们探讨了根据元素属性的不同方式来定位它们。
我们把属性分为两大类：标准属性，被浏览器识别且有预定义含义；自定义属性，由开发者为特定需求创建。利用 CSS 选择器，我们学习了如何根据属性名称、值、前缀、后缀甚至子串高效地查找元素。理解这些方法为我们提供了强大的工具，使我们在自动化任务中更轻松、更高效地定位元素。
如往常一样，所有代码示例可在 GitHub 上找到。