了解Playwright选择器：指南

例如，在Playwright中，您可以使用page.click('#submit')来定位一个具有ID为submit的按钮。如果您有一个唯一的类或属性，您可以以类似的方式选择它们。CSS选择器还允许进行更复杂的查询，例如选择节点的第一个子节点(:first-child)、选择具有特定兄弟关系的元素（+、~）或选择处于特定状态的元素(:hover, :focus)。

XPath选择器

XPath选择器提供了一种不同的方式来导航HTML文档中的元素和属性。当您需要根据HTML文档中的层次位置或特定文本来定位元素时，它们特别强大。

例如，page.click('//button[normalize-space(.)="Sign Up"]')会定位一个显示文本为”Sign Up”的按钮。//表达式告诉XPath在整个HTML文档中搜索。button告诉XPath只查找按钮元素。normalize-space(.)="Sign Up"部分是一个函数，它修剪字符串中的前导和尾随空格，并将连续的空格字符替换为一个空格。在处理不可预测的格式时，这非常有帮助。

文本选择器

文本选择器允许您根据元素的显示文本来定位元素。对于从用户角度进行测试非常有用，因为用户通常根据他们看到的文本与网页进行交互。

例如，使用命令page.click('text="Sign Up"')，Playwright将查找显示文本为”Sign Up”的元素并点击它。这适用于按钮、链接、div、span和其他可能包含可见文本的元素。

属性选择器

属性选择器根据HTML属性来定位元素。当一个元素没有唯一的类或ID，或者它在HTML文档中的位置不固定时，这很有用。

例如，命令page.click('[disabled]')会定位一个具有disabled属性的元素，无论其类型、类还是ID如何。您还可以定位属性的特定值，例如，page.click('[value="Submit"]')会点击一个具有value属性为Submit的元素。

使用复合选择器

在处理复杂的网页时，开发人员经常遇到无法通过单一类型的选择器可靠地定位元素的情况。这就是复合选择器发挥作用的地方。它们允许您将不同类型的选择器链在一起，从而创建一个更精确和稳定的元素选择过程。

Playwright中的复合选择器是使用>>运算符将不同类型的选择器组合在一起的结果。此运算符表示目标元素必须符合序列中所有组合选择器的要求。

让我们解析一下给定的示例：page.click(‘css=.container >> text=Submit’)。在这个命令中：

• css=.container 使用CSS选择器来定位一个具有类别container的元素。由于CSS选择器在Web开发中普遍存在、精确且易读，因此经常使用CSS选择器。
• >> 是组合选择器的运算符。它在选择器之间创建了一个关系，表示text=Submit元素应该是.container元素的子元素（直接或间接）。
• text=Submit 使用文本选择器来定位显示可见文本“Submit”的元素。这是从用户角度定位元素的示例，因为用户通常根据可见文本与元素进行交互。

在实际场景中，假设您在网页上有多个“Submit”按钮，每个按钮都位于不同的.container内。复合选择器提供了一种方法来与特定的“Submit”按钮在目标的.container内进行交互。

虽然功能强大，但复合选择器也需要仔细考虑。它们的精确性取决于网页的结构；对结构的任何更改可能需要更新复合选择器。因此，尽管它们提供了更精确的元素定位，但如果网页结构经常变化，可能会增加维护工作。

Playwright中的自定义选择器

Playwright非常灵活，提供了各种内置选择器以适应最常见的用例。然而，总会有一些独特或复杂的情况需要更加定制化的方法。对于这种情况，Playwright提供了设计自定义选择器的能力，使开发人员可以根据自己的特定需求自定义元素定位策略。

在处理自定义Web组件或非常规DOM结构时，自定义选择器尤其有益。例如，假设您正在与一个使用自定义Web组件的网页进行交互，该组件具有独特的属性。您可以创建一个自定义选择器，根据这些组件特定的属性来定位元素。

下面是一个概念性示例以说明这一点。

假设您有一个带有独特属性data-state的自定义Web组件<my-component>：

<my-component data-state=”active”>…</my-component>

为了定位这个处于活动状态的组件，您可以在Playwright中创建一个理解这个data-state属性的自定义选择器：

 <span class="pre--content">playwright.<span class="hljs-property">selectors</span>.<span class="hljs-title function_">register</span>(<span class="hljs-string">'mySelector'</span>, {  <span class="hljs-comment">// 使用create方法来创建自定义选择器。</span>  <span class="hljs-title function_">create</span>(<span class="hljs-params">root, target</span>) {    <span class="hljs-keyword">return</span> root.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`[data-state=<span class="hljs-subst">${target}</span>]`</span>);  },});</span>

然后，您可以在Playwright命令中使用此自定义选择器：

await page.click(‘mySelector=active’);

当data-state为“active”时，此命令将点击<my-component>。

这种自定义选择器的能力增强了Playwright的多功能性，使其能够满足特定应用程序的怪癖，并为开发人员提供对测试中的元素选择和交互方式的精确控制。

在Playwright中使用选择器的最佳实践

在Playwright中，选择正确的元素是成功自动化的关键。以下是我根据经验总结的一些要点：

1. 优先选择特定性而不是灵活性：目标是选择足够特定以识别目标，但足够灵活以容忍页面的细微变化。过于精确的选择器往往会在小的UI调整时破坏。

2. 使用有意义的属性：id，name或data-testid通常是唯一且一致的选择器选择。这有助于创建弹性测试脚本。

3. 注重可读性：你的代码不仅仅是为你自己而写的；它还是为你的团队和未来的你而写的。保持选择器直观和清晰，并在必要时添加注释。

4. 明智地使用复合和自定义选择器：这些是创建精确、上下文感知的选择器的强大工具。但要明智地使用它们，因为如果过度使用或错误使用，它们可能会成为维护的头痛。

结论

掌握Playwright中的选择器是了解和平衡它们的独特优势的关键。选择特定但灵活的选择器、有意义的属性、可读的代码以及复合和自定义选择器的明智使用对于有效的自动化至关重要。当您继续使用Playwright进行开发时，这些准则将作为指南，帮助您在Web自动化的复杂领域中导航。请记住，持续学习和适应是成功使用Playwright进行Web测试的关键。