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

本文最初由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 代码段作为每个部分中的示例：

<code class="language-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></code>

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

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

示例：

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

<code class="language-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></code>

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

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

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

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

您可以这样选择它：

<code class="language-html"><div id="main-menu" name="menu"></div></code>

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

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

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

推荐：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 元素：

<code class="language-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></code>

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

总结：XPath

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

推荐：ID 和类

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

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

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

示例：

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

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

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

<code class="language-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></code>

总结：ID 和类

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

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

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

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

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

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

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

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

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

示例：

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

<code class="language-python">driver.find_elements(By.LINK_TEXT, "Home")
driver.find_elements(By.PARTIAL_LINK_TEXT, "Sprock")</code>

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

<code class="language-html"><div id="main-menu" name="menu"></div></code>

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

<code class="language-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></code>

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

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

<code class="language-python">driver.find_elements(By.TAG_NAME, "div")</code>

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

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

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

结论

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

以下是并排比较的选项：

✓ – 是 / – 部分 ✗ – 否

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

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

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

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

如何使用 CSS 选择器自定义属性？

要使用 CSS 选择器自定义属性，您需要在 CSS 选择器中使用方括号[]。在括号内，您指定要选择的属性和值。例如，要选择所有具有“active”数据属性的元素，您将使用选择器[data-active]。然后，您可以将任何所需的样式应用于这些元素。

可以将 CSS 选择器自定义属性与任何属性一起使用吗？

是的，您可以将 CSS 选择器自定义属性与任何属性一起使用。这包括标准的 HTML 属性（如“class”和“id”），以及您可能已添加到元素的任何自定义数据属性。

CSS 属性选择器的不同类型有哪些？

有几种类型的 CSS 属性选择器。最基本的类型是精确匹配选择器，它根据其属性值的精确匹配来选择元素。还有一些选择器用于匹配属性值的开头、结尾或任何部分。此外，还有一些选择器用于匹配具有特定属性的元素，而不管其值如何。

可以将 CSS 选择器自定义属性用于所有浏览器吗？

所有现代浏览器（包括 Chrome、Firefox、Safari 和 Edge）都支持 CSS 选择器自定义属性。但是，它们可能不受这些浏览器的旧版本或其他不太常见的浏览器的支持。最好在多个浏览器中测试您的 CSS 以确保兼容性。

如何使用 CSS 选择器自定义属性来提高网站的性能？

CSS 选择器自定义属性可以通过减少您需要编写的 CSS 量来帮助提高网站的性能。通过根据其属性选择元素，您可以一次性将样式应用于多个元素，而无需为每个元素编写单独的 CSS。这可以使您的 CSS 更有效率且更易于维护。

可以将 CSS 选择器自定义属性与其他选择器组合使用吗？

是的，您可以将 CSS 选择器自定义属性与其他选择器组合使用。例如，您可以将自定义属性选择器与类选择器组合使用，以仅选择具有特定类和特定属性的元素。

CSS 选择器自定义属性的一些常见用例是什么？

CSS 选择器自定义属性通常用于根据元素的状态或功能来设置元素的样式。例如，您可以使用自定义属性选择器来设置所有被禁用的按钮或所有必需的表单字段的样式。它们也可以用于主题设置，方法是根据 data-theme 属性应用不同的样式。

CSS 选择器自定义属性与其他 CSS 选择器相比如何？

CSS 选择器自定义属性比许多其他 CSS 选择器提供了更大的灵活性。虽然其他选择器仅限于根据其标签名称、类或 ID 选择元素，但自定义属性选择器可以根据任何属性选择元素。这使得它们成为设置复杂网页的强大工具。

使用 CSS 选择器自定义属性有什么缺点吗？

使用 CSS 选择器自定义属性的一个潜在缺点是它们会使您的 CSS 更加复杂。如果您使用大量自定义属性选择器，则可能难以理解和维护您的 CSS。但是，通过仔细的计划和组织，可以减轻这种情况。

以上是使用CSS选择器和自定义属性升级您的项目的详细内容。更多信息请关注PHP中文网其他相关文章！