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

1.图片使用文字进行替代

当您的元素支持替代文本时使用此定位器，例如

img

和

area

元素。

所有图片都应该有一个

alt

描述图像的属性。根据替代文本定位图像您可以使用page.getByAltText(text[, options]) 。

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">img</span><span style="color:#22863a"> </span><span style="color:#0550ae">alt</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">playwright logo</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#0550ae">src</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">/img/playwright-logo.svg</span><span style="color:#393a34">&quot;</span><span style="color:#22863a"> </span><span style="color:#0550ae">width</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">100</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 style="color:#393a34">.</span><span style="color:#8250df">getByAltText</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;playwright logo&#39;</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>

2.标题定位

定位具有匹配 title 属性的元素使用page.getByTitle(text[, options]) 。

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">span</span><span style="color:#22863a"> </span><span style="color:#0550ae">title</span><span style="color:#393a34">=</span><span style="color:#393a34">&#39;</span><span style="color:#c6105f">Issues count</span><span style="color:#393a34">&#39;</span><span style="color:#393a34">&gt;</span>25 issues<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">getByTitle</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;Issues count&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">toHaveText</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;25 issues&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

<span style="color:#393a34"><span style="color:#393a34">3，测试id进行定位</span></span>

通过测试 ID 进行测试是最具弹性的测试方式，因为即使您的文本或属性角色发生变化，测试仍会通过。 QA 和开发人员应该定义明确的测试 ID 并使用 page.getByTestId(testId) 查询它们。但是，通过测试 ID 进行的测试不是面向用户的。如果角色或文本值对您很重要，那么请考虑使用面向用户的定位器，例如角色定位器和文本定位器。

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#22863a"> </span><span style="color:#0550ae">data-testid</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">directions</span><span style="color:#393a34">&quot;</span><span style="color:#393a34">&gt;</span>Itin&eacute;raire<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span></span>

您可以通过它的测试 ID 找到该元素：

<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">getByTestId</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;directions&#39;</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>

当您选择使用测试 ID 方法或无法通过角色或文本定位时，您也可以使用测试 ID

(2)设置自定义的测试ID

默认情况下， page.getByTestId(testId) 将根据

data-testid

属性，但您可以在测试配置中或通过调用 selectors.setTestIdAttribute(attributeName) 来配置它。

设置测试 ID 以使用自定义数据属性进行测试。

js代码：

// playwright.config.js<br />
// @ts-check

/** @type {import(&#39;@playwright/test&#39;).PlaywrightTestConfig} */
const config = {
&nbsp; use: {
&nbsp;&nbsp;&nbsp; testIdAttribute: &#39;data-pw&#39;
&nbsp; },
};
module.exports = config;

在您的 html 中，您现在可以使用

data-pw

作为您的测试 ID 而不是默认 ID

data-testid

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#22863a"> </span><span style="color:#0550ae">data-pw</span><span style="color:#393a34">=</span><span style="color:#393a34">&quot;</span><span style="color:#c6105f">directions</span><span style="color:#393a34">&quot;</span><span style="color:#393a34">&gt;</span>Itin&eacute;raire<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> page<span style="color:#393a34">.</span><span style="color:#8250df">getByTestId</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;directions&#39;</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>

4.通过css xpath定位

如果您绝对必须使用 CSS 或 XPath 定位器，则可以使用 page.locator(selector[, options]) 创建一个定位器，该定位器采用的选择器描述如何在页面中查找元素。 Playwright 支持 CSS 和 XPath 选择器，并在您省略时自动检测它们

css=

或者

xpath=

字首。

<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;css=button&#39;</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><span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;xpath=//button&#39;</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>
<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</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:#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:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</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:#8250df">click</span><span style="color:#393a34">(</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

XPath 和 CSS 选择器可以绑定到 DOM 结构或实现。当 DOM 结构发生变化时，这些选择器可能会中断。的示例： 的不良做法 下面的长 CSS 或 XPath 链是导致测试不稳定

<span style="color:#393a34"><span style="color:#cf222e">await</span> page<span style="color:#393a34">.</span><span style="color:#8250df">locator</span><span style="color:#393a34">(</span>
</span><span style="color:#393a34">    <span style="color:#c6105f">&#39;#tsf &gt; div:nth-child(2) &gt; div.A8SBwf &gt; div.RNNXgb &gt; div &gt; div.a4bIc &gt; input&#39;</span>
</span><span style="color:#393a34"><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>
<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">locator</span><span style="color:#393a34">(</span><span style="color:#c6105f">&#39;//*[@id=&quot;tsf&quot;]/div[2]/div[1]/div[1]/div/div[2]/input&#39;</span><span style="color:#393a34">)</span>
</span><span style="color:#393a34">    <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>

不推荐使用 CSS 和 XPath，因为 DOM 经常会发生变化，从而导致非弹性测试。相反，尝试提出一个接近用户如何感知页面的定位器，例如角色定位器，或者定义一个明确的测试合同。使用测试 ID