使用CSS选择器和自定义属性升级您的项目-css教程-PHP中文网

首页

web前端

css教程

使用CSS选择器和自定义属性升级您的项目

尊渡假赌尊渡假赌尊渡假赌

Feb 16, 2025 am 09:20 AM

Upgrade Your Project with CSS Selector and Custom Attributes

本文最初由TestProject发布。感谢您支持使SitePoint成为可能的合作伙伴。

Selenium WebDriver 的元素选择器是自动化框架的核心组件之一，也是与任何 Web 应用程序交互的关键。在本篇关于自动化元素选择器的综述中，我们将讨论各种策略，探讨其功能，权衡其优缺点，并最终推荐最佳选择器策略——结合 CSS 选择器的自定义属性。

关键要点

Selenium WebDriver 的元素选择器对于与任何 Web 应用程序交互至关重要。最佳选择器策略是结合 CSS 选择器的自定义属性，因为它兼顾易用性、多功能性、在线支持、文档和性能。
自定义属性和 CSS 选择器允许自动化工程师定位特定元素，而无需创建复杂的元素选择器。但是，这需要 QA 和开发团队之间的协作，以添加可在应用程序中使用的自定义属性。
XPath 是一种用途广泛且功能强大的元素选择器策略，它可以选择页面中的任何元素，无论您是否有类和 ID 可用。但是，XPath 在 Internet Explorer 中的性能较差。
ID 和类元素选择器受应用程序结构变化的影响最小。但是，如果开发人员直接更改了自动化中使用的 ID 或类，则会影响您的测试。
使用标签名称、链接文本、部分链接文本和名称作为元素选择器策略的使用有限，不建议在整个自动化框架中广泛采用。它们仅应在没有其他选择器选项可用（例如自定义标签或 ID）的情况下使用。

Selenium 元素选择器

选择最佳的元素选择器策略对于自动化工作的成功和易于维护至关重要。因此，在选择选择器时，应考虑易用性、多功能性、在线支持、文档和性能等方面。认真考虑合适的选择器策略将在未来通过易于维护的自动化带来回报。

正如应考虑元素选择器的技术方面一样，也应考虑组织的文化。开发人员和 QA 之间的成熟协作文化将在自动化中实施元素选择器时实现更高层次的成功。这不仅通过为软件开发生命周期其他领域的协作奠定基础而使组织受益，而且还超越了自动化工作本身。

所有代码示例都将使用 Python 和 Selenium WebDriver 命令，但通常适用于任何编程语言和框架。

HTML 示例：

我将使用以下导航菜单的 HTML 代码段作为每个部分中的示例：

<div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu"><a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div>

不推荐：标签名称、链接文本、部分链接文本和名称

我不会在这上面花费太多时间，因为它们的使用都非常有限。它们通常不是在整个自动化框架中广泛采用的好选择。它们解决了可以使用其他元素选择器策略轻松解决的特定需求。仅当您有特定需求需要处理特殊情况时才使用这些。即使那样，大多数特殊情况也不够特殊到可以使用这些。您会在没有其他选择器选项可用（例如自定义标签或 ID）的情况下使用这些。

示例：

使用标签名称，您可以选择所有与您提供的标签名称匹配的大量元素。这用途有限，因为它仅在您需要选择大量相同类型元素的情况下才有效。以下示例将返回示例 HTML 中的所有 4 个 div 元素。

<div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu"><a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div>

您可以使用以下示例选择链接。如您所见，它们只能定位锚点标签以及这些锚点标签的文本：

driver.find_elements(By.TAG_NAME, "div")

最后，您可以按名称属性选择元素，但如您在示例 HTML 中看到的，没有带有名称属性的标签。这在几乎任何应用程序中都是一个常见问题，因为在每个 HTML 属性中添加名称属性并非常见做法。如果主菜单元素具有这样的名称属性：

driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")

您可以这样选择它：

<div id="main-menu" name="menu"></div>

如您所见，这些元素选择器策略的使用有限。以下方法都是更好的方法，因为它们更加通用和强大。

总结：标签名称、链接文本、部分链接文本和名称

优点缺点易于使用用途不广泛极其有限的使用在某些情况下可能根本不适用

推荐：XPath

XPath 是一种用途广泛且功能强大的元素选择器策略。这也是我个人的偏好和最喜欢的。XPath 可以选择页面中的任何元素，无论您是否有类和 ID 可用（尽管没有类或 ID，它就难以维护，有时也很脆弱）。此选项特别通用，因为您可以选择父元素。XPath 还具有许多内置函数，允许您自定义元素选择。

但是，通用性带来了复杂性。鉴于 XPath 可以做很多事情，与其他元素选择器策略相比，它的学习曲线也更陡峭。这可以通过轻松找到的优秀在线文档来弥补。一个很好的资源是在 W3Schools.com 上找到的 XPath 教程。

还应注意，使用 XPath 时存在权衡。虽然您可以选择父元素并使用非常通用的内置函数，但 XPath 在 Internet Explorer 中的性能较差。在选择元素选择器策略时，应考虑这种权衡。如果您需要能够选择父元素，则需要考虑它对 Internet Explorer 中的跨浏览器测试的影响。从本质上讲，在 Internet Explorer 中运行自动化测试将花费更长时间。如果您的应用程序的用户群没有很高的 Internet Explorer 使用率，那么这是一个不错的选择，因为您可能会考虑比其他浏览器更少地运行 Internet Explorer 中的测试。如果您的用户群有大量的 Internet Explorer 使用率，则应仅在其他更好的方法不适合您的组织时才考虑 XPath。

示例：

如果您有选择父元素的要求，则必须选择 XPath。以下是如何操作：使用我们的示例，假设您想根据某个锚元素定位父 main-menu 元素：

<div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu"><a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div>

此元素选择器将定位 id 等于“menu”的锚点标签的第一个实例，然后使用“/../”定位父元素。结果是您将定位 main-menu 元素。

总结：XPath

优点缺点可以选择父元素在 IE 中性能较差高度通用学习曲线略陡峭大量在线支持

推荐：ID 和类

ID 和类元素选择器是自动化中的两个不同选项，并在应用程序中执行不同的功能。但是，对于考虑在自动化中使用哪个元素选择器策略，它们的差异非常小，因此我们不需要分别考虑它们。在应用程序中，元素的“id”和“class”属性（如果已定义）允许 UI 开发人员操作和设置应用程序的样式。对于自动化，我们使用它来定位特定元素以在自动化中进行交互。

使用 ID 和类元素选择器的一大好处是它们受应用程序结构变化的影响最小。假设您要创建一个依赖于少数元素和一些子元素链的 XPath 或 CSS 选择器，当功能请求通过添加新元素中断该链时会发生什么？使用 ID 和类元素选择器时，您可以定位特定元素，而不是依赖于页面结构。您保留了自动化的稳健性，而不会对更改过于宽松。应通过创建侧重于特定元素位置的测试用例来通过自动化检测更改。更改不应破坏您的整个自动化套件。但是，如果开发人员直接更改了自动化中使用的 ID 或类，则会影响您的测试。

如果被测应用程序未将 ID 和类作为开发最佳实践的一部分来实现，则此元素选择器策略将不可用。如果 HTML 标签没有您可以在自动化中使用的 ID 和类，则此方法难以使用。

示例：

在我们的示例中，如果我们要选择顶级菜单元素，则如下所示：

driver.find_elements(By.TAG_NAME, "div")

如果我们要选择第一个菜单项，则如下所示：

<div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu"><a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div>

总结：ID 和类

优点缺点易于维护开发人员可能会更改它们，从而破坏自动化易于学习受页面结构更改的影响最小

最佳：结合 CSS 选择器的自定义属性

如果您的 QA 组织与开发团队建立了良好的协作关系，则您很可能能够在自动化中使用这种最佳实践方法。使用自定义属性和 CSS 选择器来定位元素对 QA 团队和组织都有多重好处。对于 QA 团队，这允许自动化工程师定位他们需要的特定元素，而无需创建复杂的元素选择器。但是，这需要能够添加自动化团队可以在应用程序中使用的自定义属性。为了利用这种最佳实践方法，您的开发和 QA 团队应合作实施此策略。

我想花一点时间指出 CSS 选择器方法不依赖于自定义属性。CSS 选择器可以像 XPath 一样定位 HTML 文档中的任何标签和属性。

现在让我们看看这种方法包含什么。为了最好地执行此操作，您的自动化团队应该了解他们在自动化中想要定位的内容。与开发人员（最可能是前端工程师）合作，他们将制定一个自定义属性模式，将其放置到自动化团队需要连接的每个目标中。对于此示例，我们将“tid”属性附加到目标元素。

这里要强调的一个技术要点是 CSS 选择器的一个限制。它们故意不允许像 XPath 一样选择父元素。这样做是为了避免 Web 页面上 CSS 样式的无限循环。虽然这对网页设计来说是一件好事，但这对于将其用作自动化元素选择器策略来说是一个限制。幸运的是，可以通过开发人员实现的自定义属性来避免此限制。QA 应该请求适当的自定义属性，以便无需选择父元素。

如果您想在不使用自定义属性的情况下选择此策略，您仍然走在正确的轨道上。例如，您可以使用以下方法定位 Shop 子菜单中的链接：

driver.find_elements(By.TAG_NAME, "div")

此策略将使自动化工程师能够创建易于维护且不会因 UI 中的不相关更改而中断的可靠自动化。选择此策略是最佳方法。它不仅将成为易于维护的自动化解决方案，而且还将鼓励开发团队和 QA 团队之间的协作。

示例：

在我们的示例 HTML 中实现自定义属性将产生如下结果：

driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")

请注意某些元素中的新属性。我们创建了一个不与任何标准 HTML 属性冲突的新属性，称为“tid”。使用此自定义属性，我们可以使用 CSS 选择器来定位它：

<div id="main-menu" name="menu"></div>

假设您想选择菜单中的所有链接，无论它是顶级菜单项还是子菜单。使用 CSS 选择器，您可以创建高度通用的元素选择器：

<div id="main-menu">
  <div class="menu"><a href="https://www.php.cn/link/7878b14e9d762184301b06f3f609ead7">Home</a></div>
  <div class="menu"><a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe">Shop</a>
    <div class="submenu">
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/gizmo">Gizmo</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/widget">Widget</a>
      <a href="https://www.php.cn/link/f775ec264c01adf8189da19ec86676fe/sprocket">Sprocket</a>
    </div>
  </div>
</div>

“*=”的作用是在任何元素的 tid 字段中对值“-link”进行通配符搜索。将其放在 #main-menu ID 说明符之后，它将元素的搜索范围集中在主菜单内。

如果想在不使用自定义属性的情况下选择此策略，您仍然走在正确的轨道上。例如，您可以使用以下方法定位 Shop 子菜单中的链接：

driver.find_elements(By.TAG_NAME, "div")

此策略将使自动化工程师能够创建可靠的自动化，易于维护且不会因 UI 中的不相关更改而中断。选择此策略是最佳方法。它不仅将成为易于维护的自动化解决方案，而且还将鼓励开发团队和 QA 团队之间的协作。

总结：结合 CSS 选择器的自定义属性

优点缺点易于学习在与开发团队建立协作关系方面需要付出初步努力大量在线支持通用在所有浏览器中性能优异

结论

在自动化框架中实施企业标准元素选择器策略有一些不错的选择。应避免使用标签名称或链接文本等选项，除非它是您的唯一选项。XPath、ID 和类选择器是一条不错的途径。到目前为止，最佳方法是实现自定义属性并使用 CSS 选择器定位它们。这也鼓励开发团队和 QA 团队之间的协作。

以下是并排比较的选项：

✓ – 是 / – 部分 ✗ – 否

	标签名称、链接文本（等）	XPath	ID 和类	结合 CSS 选择器的自定义属性
易于使用	✓	✓	✓	✓
在线支持	✓	✓	✓	✓
通用性	✗	✓	✗	✓
性能	✓	✗	✓	✓
易于维护	✗	✓	✓	✓
鼓励协作	✗	✗	✓	✓

关于 CSS 选择器自定义属性的常见问题

什么是 CSS 选择器自定义属性？

CSS 选择器自定义属性是 CSS 中的一项强大功能，它允许开发人员根据元素的属性值来选择和设置元素的样式。当您想对共享公共属性但可能不共享相同标签名称或类的元素应用特定样式时，这尤其有用。例如，您可以使用自定义属性选择器来设置所有具有“active”数据属性的元素的样式，而不管它们的标签名称或类如何。