如何使用 Playwright 为 DOM 中的元素定义最有效的定位器

Question

我正在为具有多个语言环境的网站添加剧作家测试。页面内容主要通过 CMS 内容呈现（我使用的是 Contentful）。

将

locators

与硬编码文本一起使用，例如

await page.getByLabel('Blog Article Foo').click();

似乎非常很脆弱，尤其是在使用多个语言环境时。

我是否应该避免使用 any 基于文本的定位器而只使用

await page.getByRole('heading').click();

？

这似乎不是“剧作家”的测试方式，因为我没有测试用户看到/与之交互的内容，但是我能看到的唯一替代方案是为每个语言环境编写很多非常不稳定的测试，并且不断更新它们。

我错过了什么吗？

Answer 1

如果您有权访问源代码并可以更改它，最佳实践是为元素分配唯一的定位器并在 e2e 中使用它。

例如

[data-testid=heading]

或

page.getByDataTestId('heading')

```
[data-hook=heading]
```
```
[data-aid=heading]
```

如果您无法自己分配属性并看到这些属性 - 最好使用它们，它们肯定用于自动化，并且它们很可能不会改变。

那么您应该依赖元素
```
id
```
，但在这种情况下您应该考虑，该 id 是唯一的（最佳实践应该如此，但有些资源忽略此模式）而不是自动生成的。
依赖代表其类型或使用目的的元素属性，
```
input[type=search]
```
，
```
[role=heading]
```
依赖看似唯一的属性类或属性和类之间的组合
```
.headingContainer
```
，
```
div.headingContainer
```
依赖自定义标签，如
```
name
```
、
```
title
```
等。但请注意，它们可以在不同的本地化环境中进行更改。（有时不是，有时是）
依赖独特的标签（例如，youtube 有很多独特的标签），如
```
ytb-video-container
```
、
```
ytb-video-player
```
等
依赖href或src部分
```
img[src*=imgur]
```
，
```
[href*=imgur]
```
。这不是最佳实践，但如果不更改 src 部分，可以使用。
并且只有当您没有任何其他选项时，您才可以在定位器的构造中使用文本。文本是非常敏感的区域，可以很容易地通过产品逻辑进行更改，而且它在站点本地化方面也有所不同。例如，如果您目前只有英语，但将来您希望该网站会被翻译成葡萄牙语并且您应该对其进行测试，那么您应该避免使用任何基于文本的定位器。

在构建定位器时，尝试使其尽可能简单，如果可能，请使用一级，如果不可能，则依赖组件容器并从中获取子元素。

示例：

const posts = await page.locator('#blogPostContainer').all();
for(const post of posts) {
  await post.getByRole('heading').click();
  // do something
}

如何使用 Playwright 为 DOM 中的元素定义最有效的定位器

问题描述投票：0回答：1

1个回答

最新问题

如何使用 Playwright 为 DOM 中的元素定义最有效的定位器

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1