《刚刚问世》系列初窥篇-Java+Playwright自动化测试-7-元素基础定位方式-下篇（详细教程）

1.简介

上一篇主要是讲解我们日常工作中在使用Playwright进行元素定位的一些比较常用的基础定位方式的理论基础知识以及在什么情况下推荐使用。今天这一篇讲解和分享一下剩下部分的基础定位方式。

２.过滤器定位

例如以下 DOM 结构，我们要在其中单击第二个产品卡的购买按钮。我们有几个选项来过滤定位器以获得正确的定位器。

2.1按文本过滤

定位器可以使用 locator.filter（）方法按文本进行过滤。它将搜索元素内某处的特定字符串，可能在后代元素中，不区分大小写。您还可以传递正则表达式。

1.使用文本

page.getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions().setHasText("Product 2"))

    .getByRole(AriaRole.BUTTON,

               new Page.GetByRoleOptions().setName("Add to cart"))

    .click();

2.使用正则表达式

page.getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions()

        .setHasText(Pattern.compile("Product 2")))

    .getByRole(AriaRole.BUTTON,

               new Page.GetByRoleOptions().setName("Add to cart"))

    .click();

2.2按没有文本进行筛选

通过没有文本进行筛选：

// 5 in-stock items

assertThat(page.getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions().setHasNotText("Out of stock")))

    .hasCount(5);

2.3子项/后代过滤

定位器支持一个选项，即仅选择具有或没有与另一个定位器匹配的后代的元素的元素。因此，您可以按任何其他定位器进行过滤，例如 Locator.getByRole()、Locator.getByTestId()、Locator.getByText() 等。

page.getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions()

        .setHas(page.GetByRole(AriaRole.HEADING, new Page.GetByRoleOptions()

        .setName("Product 2"))))

    .getByRole(AriaRole.BUTTON,

               new Page.GetByRoleOptions().setName("Add to cart"))

    .click()

我们还可以断言产品卡，以确保只有一个：

assertThat(page

    .getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions()

        .setHas(page.GetByRole(AriaRole.HEADING,

                               new Page.GetByRoleOptions().setName("Product 2"))))

    .hasCount(1);

过滤定位器必须相对于原始定位器进行查询，并且从原始定位器匹配项开始进行查询，而不是从文档根开始进行查询。因此，以下操作将不起作用，因为过滤定位器从列表元素开始匹配，该列表元素位于原始定位器匹配的列表项之外：<ul><li>

//  WRONG

assertThat(page

    .getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions()

        .setHas(page.GetByRole(AriaRole.LIST)

                    .GetByRole(AriaRole.HEADING,

                               new Page.GetByRoleOptions().setName("Product 2"))))

    .hasCount(1);

2.4按没有子项/后代过滤

我们也可以通过内部没有匹配的元素来过滤。

assertThat(page

    .getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions().setHasNot(page.getByText("Product 2")))

    .hasCount(1);

敲黑板！！！！请注意，内部定位器是从外部定位符开始匹配的，而不是从文档根目录开始匹配的。

3.定位器操作员

3.1定位器内部匹配

您可以链接创建定位器的方法，例如 Page.getByText（）或 Locator.getByRole（），以将搜索范围缩小到页面的特定部分。

在此示例中，我们首先通过定位其角色listitem来创建一个名为 product 的定位器。然后，我们按文本进行过滤。我们可以再次使用产品定位器来获取按钮的角色并单击它，然后使用断言来确保只有一个文本为“产品 2”的产品。

Locator product = page

    .getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions().setHasText("Product 2"));

product

    .getByRole(AriaRole.BUTTON,

               new Locator.GetByRoleOptions().setName("Add to cart"))

    .click();

您还可以将两个定位器链接在一起，例如，在特定对话框中查找“保存”按钮：

Locator saveButton = page.getByRole(AriaRole.BUTTON,

                                    new Page.GetByRoleOptions().setName("Save"));

// ...

Locator dialog = page.getByTestId("settings-dialog");

dialog.locator(saveButton).click();

3.2同时匹配两个定位器

方法 Locator.and（）通过匹配其他定位器来缩小现有定位器的范围。例如，您可以将 Page.getByRole（）和 Page.getByTitle（）组合在一起，以按角色和标题进行匹配。

Locator button = page.getByRole(AriaRole.BUTTON).and(page.getByTitle("Subscribe"));

3.3匹配两个备选定位器之一

如果您想定位两个或多个元素中的一个，但不知道会是哪一个，请使用 Locator.or（）创建一个与所有备选项匹配的定位器。

例如，考虑这样一种情况：您想单击“新电子邮件”按钮，但有时会出现安全设置对话框。在这种情况下，您可以等待“新电子邮件”按钮或对话框，然后采取相应措施。

敲黑板！！！注意：

如果屏幕上同时出现“新建电子邮件”按钮和安全对话框，则“或”定位器将匹配它们，从而可能引发“严格模式违规”错误。在这种情况下，您可以使用 Locator.first（）仅匹配其中一个。

Locator newEmail = page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("New"));

Locator dialog = page.getByText("Confirm security settings");

assertThat(newEmail.or(dialog).first()).isVisible();

if (dialog.isVisible())

  page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Dismiss")).click();

newEmail.click();

3.4仅匹配可见元素

敲黑板！！！注意：

通常，找到一种更可靠的方法来唯一标识元素，而不是检查可见性。

考虑一个有两个按钮的页面，第一个不可见，第二个可见。

<button style='display: none'>Invisible</button>

<button>Visible</button>

这将找到两个按钮并抛出严格性违规错误：

page.locator("button").click();

这只会找到第二个按钮，因为它是可见的，然后单击它。

page.locator("button").locator("visible=true").click();

4.列表

4.1对列表中的项目进行计数

可以断言定位器以对列表中的项目进行计数。例如：以下DOM结构

使用count断言确保列表包含 3 个项目。

assertThat(page.getByRole(AriaRole.LISTITEM).hasCount(3);

4.2断言列表中所有文本

可以断言定位器以查找列表中的所有文本。例如：以下DOM结构

使用 assertThat（locator）.hasText（）确保列表包含文本“apple”、“banana”和“orange”。

assertThat(page

    .getByRole(AriaRole.LISTITEM))

    .hasText(new String[] { "apple", "banana", "orange" });

4.3定位特定项目

有许多方法可以在列表中定位特定项目。

4.3.1通过文本定位

使用 Page.getByText（）方法通过文本内容在列表中查找元素，然后单击它。例如：以下DOM结构

通过文本内容找到项目并单击它。

page.getByText("orange").click();

4.3.2通过文本过滤定位

使用 locator.filter（）在列表中查找特定项目。例如：以下DOM结构

按“listitem”的角色找到一个项目，然后按“orange”的文本进行筛选，然后单击它。

page.getByRole(AriaRole.LISTITEM)

    .filter(new Locator.FilterOptions().setHasText("orange"))

    .click();

4.3.3通过测试id定位

使用 Page.getByTestId（）方法在列表中查找元素。如果您还没有测试 ID，则可能需要修改 html 并添加测试 ID。

通过测试 ID “orange”找到一个项目，然后单击它。

page.getByTestId("orange").click();

4.3.4通过第n项定位

如果您有一个相同元素的列表，并且区分它们的唯一方法是顺序，则可以使用 Locator.first（）、Locator.last（）或 Locator.nth（）从列表中选择特定元素。

Locator banana = page.getByRole(AriaRole.LISTITEM).nth(1);

但是，请谨慎使用此方法。通常，页面可能会发生变化，定位器将指向与您预期的完全不同的元素。取而代之的是，尝试提出一个独特的定位器，该定位器将通过严格的标准。

4.4链接过滤器

当您有各种相似性的元素时，可以使用 locator.filter（）方法选择正确的元素。您还可以链接多个筛选器以缩小选择范围。

要截取带有“Mary”和“Say goodbye”的行的屏幕截图，请执行以下操作：

Locator rowLocator = page.getByRole(AriaRole.LISTITEM);

rowLocator

    .filter(new Locator.FilterOptions().setHasText("Mary"))

    .filter(new Locator.FilterOptions()

        .setHas(page.getByRole(

            AriaRole.BUTTON,

            new Page.GetByRoleOptions().setName("Say goodbye"))))

    .screenshot(new Page.ScreenshotOptions().setPath("screenshot.png"));

现在，您应该在项目的根目录中有一个“screenshot.png”文件。

4.5罕见例子

4.5.1对列表中每个元素执行某些操作

迭代元素

for (Locator row : page.getByRole(AriaRole.LISTITEM).all())

  System.out.println(row.textContent());

使用常规 for 循环进行迭代：

Locator rows = page.getByRole(AriaRole.LISTITEM);

int count = rows.count();

for (int i = 0; i < count; ++i)

  System.out.println(rows.nth(i).textContent());

4.5.2在页面中评估

locator.evaluate_all（）中的代码在页面中运行，您可以在那里调用任何 DOM API。

Locator rows = page.getByRole(AriaRole.LISTITEM);

Object texts = rows.evaluateAll(

    "list => list.map(element => element.textContent)");

5.小结

定位器是非常严格。这意味着，如果多个元素匹配，则对定位器执行暗示某些目标 DOM 元素的所有操作都将引发异常。例如，如果 DOM 中有多个按钮，则会引发以下调用：

如果有多个button，则引发错误

page.getByRole(AriaRole.BUTTON).click();

另一方面，Playwright 了解何时执行多元素操作，因此当定位器解析为多个元素时，以下调用工作正常。

适用于多个元素

page.getByRole(AriaRole.BUTTON).count();

您可以通过 locator.first、locator.last 和 locator.nth（）告诉 Playwright 在多个元素匹配时使用哪个元素来明确选择退出严格性检查。不建议使用这些方法，因为当您的页面更改时，Playwright 可能会单击您不想要的元素。相反，请按照上述最佳实践创建唯一标识目标元素的定位器。

5.1其他定位器

对于不太常用的定位器，请查看官网的其他定位器指南。由于时间关系，宏哥就不在这里对其进行展开介绍和讲解了。好了时间不早了，关于元素基础定位方式今天就分享到这里！！！仅供大家学习参考，感谢您耐心的阅读。