playwright 的安装 使用（3）编写测试（元素定位1）

参考：https://playwright.dev/docs/writing-tests

生成的测试文件是这样的，先了解一下

// @ts-check
const { test, expect } = require('@playwright/test');
test('homepage has Playwright in title and get started link linking to the intro page', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
  // create a locator
  const getStarted = page.getByRole('link', { name: 'Get started' });
  // Expect an attribute "to be strictly equal" to the value.
  await expect(getStarted).toHaveAttribute('href', '/docs/intro');
  // Click the get started link.
  await getStarted.click();

 

  // Expects the URL to contain intro.
  await expect(page).toHaveURL(/.*intro/);
});

参考：https://playwright.dev/docs/locators

定位器 是 Playwright 自动等待和重试能力的核心部分。 简而言之，定位器代表了一种随时在页面上查找元素的方法。

• page.getByRole(role[, options]) 通过显式和隐式可访问性属性进行定位。
• page.getByText(text[, options]) 按文本内容定位。
• page.getByLabel(text[, options]) 通过关联标签的文本定位表单控件。
• page.getByPlaceholder(text[, options]) 通过占位符定位输入。
• page.getByAltText(text[, options]) 通过替代文本定位一个元素，通常是图像。
• page.getByTitle(text[, options]) 通过标题属性定位元素。
• page.getByTestId(testId) 根据其定位元素

  data-testid

  属性（可以配置其他属性）。

await page.getByLabel('User Name').fill('John');
await page.getByLabel('Password').fill('secret-password');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page.getByText('Welcome, John!')).toBeVisible();

1.根据元素的角色定位元素

button

名称为“登录”。

这样一段内容：

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Sign in<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span></span>

<span style="color:#393a34"><span style="color:#393a34">使用：</span></span>

<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;button&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Sign in&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

每次将定位器用于操作时，都会在页面中找到一个最新的 DOM 元素。 在下面的代码片段中，底层 DOM 元素将被定位两次，一次在每个动作之前。 这意味着如果 DOM 由于重新渲染而在调用之间发生变化，则将使用与定位器对应的新元素。

<span style="color:#393a34"><span style="color:#cf222e">const</span> locator <span style="color:#d73a49">=</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;button&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Sign in&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span>
</span>
<span style="color:#393a34"><span style="color:#cf222e">await</span> locator<span style="color:#393a34">.</span><span style="color:#8250df">hover</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">await</span> locator<span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

请注意，所有创建定位器的方法（例如 page.getByLabel(text[, options]) ） 也可用于 Locator 和 FrameLocator 类，因此您可以将它们链接起来并迭代地缩小定位器的范围。

<span style="color:#393a34"><span style="color:#cf222e">const</span> locator <span style="color:#d73a49">=</span> page
</span><span style="color:#393a34">    <span style="color:#393a34">.</span><span style="color:#8250df">frameLocator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;#my-frame&#39;</span><span style="color:#393a34">)</span>
</span><span style="color:#393a34">    <span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;button&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Sign in&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><span style="color:#cf222e">await</span> locator<span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

<span style="color:#393a34"><span style="color:#393a34">2.根据角色定位</span></span>

page.getByRole (role[, options]) 定位器反映了用户和辅助技术如何感知页面，例如某个元素是按钮还是复选框。 按角色定位时，通常还应传递可访问的名称，以便定位器准确定位元素。

如果有这样的内容

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">h3</span><span style="color:#393a34">&gt;</span>Sign up<span style="color:#393a34">&lt;/</span><span style="color:#22863a">h3</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">label</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;</span><span style="color:#22863a">input</span><span style="color:#22863a"> </span><span style="color:#0550ae">type</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">checkbox</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#393a34">/&gt;</span> Subscribe
</span><span style="color:#393a34"><span style="color:#393a34">&lt;/</span><span style="color:#22863a">label</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">br</span><span style="color:#393a34">/&gt;</span>
</span><span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Submit<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span></span>

您可以通过其隐含角色定位每个元素

<span style="color:#393a34"><span style="color:#cf222e">await</span> <span style="color:#8250df">expect</span><span style="color:#393a34">(</span>page<span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;heading&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Sign up&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">toBeVisible</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span>
</span>
<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;checkbox&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Subscribe&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">check</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByRole</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;button&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">name</span><span style="color:#d73a49">:</span> <span style="color:#36acaa">/</span><span style="color:#36acaa">submit</span><span style="color:#36acaa">/</span><span style="color:#36acaa">i</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

角色定位器包括 按钮、复选框、标题、链接、列表、表格等， 的 W3C 规范 并遵循ARIA 角色 、 ARIA 属性 和 可访问名称

3.标签定位

大多数表单控件通常都有专用标签，可以方便地用于与表单交互。 通过其关联标签定位控件 在这种情况下，您可以使用page.getByLabel(text[, options]) 。

例如：

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">label</span><span style="color:#393a34">&gt;</span>Password <span style="color:#393a34">&lt;</span><span style="color:#22863a">input</span><span style="color:#22863a"> </span><span style="color:#0550ae">type</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">password</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#393a34">/&gt;</span><span style="color:#393a34">&lt;/</span><span style="color:#22863a">label</span><span style="color:#393a34">&gt;</span>
</span>

您可以在通过标签文本定位后填写输入

<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByLabel</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;Password&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">fill</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;secret&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

<span style="color:#393a34"><span style="color:#393a34">4.占位符定位</span></span>

输入可能有一个占位符属性来提示用户应该输入什么值。 找到这样的输入 您可以使用page.getByPlaceholder(text[, options]) 。

例如：

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">input</span><span style="color:#22863a"> </span><span style="color:#0550ae">type</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">email</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#0550ae">placeholder</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">name@example.com</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#393a34">/&gt;</span></span>

您可以在通过占位符文本定位后填充输入：

<span style="color:#393a34"><span style="color:#cf222e">await</span> page
</span><span style="color:#393a34">    <span style="color:#393a34">.</span><span style="color:#8250df">getByPlaceholder</span><span style="color:#393a34">(</span><span style="color:#c6105f">&quot;name@example.com&quot;</span><span style="color:#393a34">)</span>
</span><span style="color:#393a34">    <span style="color:#393a34">.</span><span style="color:#8250df">fill</span><span style="color:#393a34">(</span><span style="color:#c6105f">&quot;playwright@microsoft.com&quot;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

<span style="color:#393a34"><span style="color:#393a34">5.文字定位</span></span>

根据元素包含的文本查找元素。 时，您可以通过子字符串、精确字符串或正则表达式进行 使用page.getByText(text[, options]) 匹配。

例如，考虑以下 DOM 结构。

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">span</span><span style="color:#393a34">&gt;</span>Welcome, John<span style="color:#393a34">&lt;/</span><span style="color:#22863a">span</span><span style="color:#393a34">&gt;</span></span>

您可以通过元素包含的文本来定位该元素：

<span style="color:#393a34"><span style="color:#cf222e">await</span> <span style="color:#8250df">expect</span><span style="color:#393a34">(</span>page<span style="color:#393a34">.</span><span style="color:#8250df">getByText</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;Welcome, John&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">toBeVisible</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

设置精确匹配

<span style="color:#393a34"><span style="color:#cf222e">await</span> <span style="color:#8250df">expect</span><span style="color:#393a34">(</span>page<span style="color:#393a34">.</span><span style="color:#8250df">getByText</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;Welcome, John&#39;</span><span style="color:#393a34">,</span> <span style="color:#393a34">{</span> <span style="color:#005cc5">exact</span><span style="color:#d73a49">:</span> <span style="color:#005cc5">true</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">toBeVisible</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

与正则表达式匹配

<span style="color:#393a34"><span style="color:#cf222e">await</span> <span style="color:#8250df">expect</span><span style="color:#393a34">(</span>page<span style="color:#393a34">.</span><span style="color:#8250df">getByText</span><span style="color:#393a34">(</span><span style="color:#36acaa">/</span><span style="color:#36acaa">welcome, [A-Za-z]+$</span><span style="color:#36acaa">/</span><span style="color:#36acaa">i</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">toBeVisible</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

建议使用文本定位器来查找非交互式元素，例如

div

,

span

,

p

等。对于交互式元素，如

button

,

a

,

input

等使用 角色定位器 。