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

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

视图页面：

<span style="color:#393a34"><span style="color:#393a34">&lt;</span><span style="color:#22863a">ul</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>John<span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Say hello<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;/</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>Mary<span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Say hello<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;/</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>John<span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Say goodbye<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;/</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>Mary<span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">    <span style="color:#393a34">&lt;</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span>Say goodbye<span style="color:#393a34">&lt;/</span><span style="color:#22863a">button</span><span style="color:#393a34">&gt;</span><span style="color:#393a34">&lt;/</span><span style="color:#22863a">div</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34">  <span style="color:#393a34">&lt;/</span><span style="color:#22863a">li</span><span style="color:#393a34">&gt;</span>
</span><span style="color:#393a34"><span style="color:#393a34">&lt;/</span><span style="color:#22863a">ul</span><span style="color:#393a34">&gt;</span></span>

要截取包含“Mary”和“Say goodbye”的行的屏幕截图：

<span style="color:#393a34"><span style="color:#cf222e">const</span> rowLocator <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;listitem&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span>
<span style="color:#393a34"><span style="color:#cf222e">await</span> rowLocator
</span><span style="color:#393a34">  <span style="color:#393a34">.</span><span style="color:#8250df">filter</span><span style="color:#393a34">(</span><span style="color:#393a34">{</span> <span style="color:#005cc5">hasText</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;Mary&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span>
</span><span style="color:#393a34">  <span style="color:#393a34">.</span><span style="color:#8250df">filter</span><span style="color:#393a34">(</span><span style="color:#393a34">{</span> <span style="color:#005cc5">has</span><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;Say goodbye&#39;</span> <span style="color:#393a34">}</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">.</span><span style="color:#8250df">screenshot</span><span style="color:#393a34">(</span><span style="color:#393a34">{</span> <span style="color:#005cc5">path</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">&#39;screenshot.png&#39;</span> <span style="color:#393a34">}</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>

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

获取所有文本内容

<span style="color:#393a34"><span style="color:#cf222e">const</span> rows <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;listitem&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> texts <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> rows<span style="color:#393a34">.</span><span style="color:#8250df">allTextContents</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">const</span> rows <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;listitem&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> count <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> rows<span style="color:#393a34">.</span><span style="color:#8250df">count</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">for</span> <span style="color:#393a34">(</span><span style="color:#cf222e">let</span> i <span style="color:#d73a49">=</span> <span style="color:#005cc5">0</span><span style="color:#393a34">;</span> i <span style="color:#d73a49">&lt;</span> count<span style="color:#393a34">;</span> <span style="color:#d73a49">++</span>i<span style="color:#393a34">)</span>
</span><span style="color:#393a34">  <span style="color:#116329">console</span><span style="color:#393a34">.</span><span style="color:#8250df">log</span><span style="color:#393a34">(</span><span style="color:#cf222e">await</span> rows<span style="color:#393a34">.</span><span style="color:#8250df">nth</span><span style="color:#393a34">(</span>i<span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">textContent</span><span style="color:#393a34">(</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">测试：</span></span>

<span style="color:#393a34"><span style="color:#393a34">得到返回结果：</span></span>

Running 2 tests using 2 workers
[webkit] › chaining_filters.spec.js:3:1 › localhost locator   
 John
 Say hello
    Mary
    Say hello
    John
    Say goodbye
    Mary
    Say goodbye

在页面中评估

<span style="color:#393a34"><span style="color:#cf222e">const</span> rows <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;listitem&#39;</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span>
</span><span style="color:#393a34"><span style="color:#cf222e">const</span> texts <span style="color:#d73a49">=</span> <span style="color:#cf222e">await</span> rows<span style="color:#393a34">.</span><span style="color:#8250df">evaluateAll</span><span style="color:#393a34">(</span>
</span><span style="color:#393a34">    <span style="color:#953800">list</span> <span style="color:#d73a49">=&gt;</span> list<span style="color:#393a34">.</span><span style="color:#8250df">map</span><span style="color:#393a34">(</span><span style="color:#953800">element</span> <span style="color:#d73a49">=&gt;</span> element<span style="color:#393a34">.</span>textContent<span style="color:#393a34">)</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>