playwright 的安装 使用（4）编写测试（元素定位3） testID
参考：https://playwright.dev/docs/api/class-page#page-get-by-test-id
使用test_id
<span style="color:#393a34"><span style="color:#393a34"><</span><span style="color:#22863a">ul</span><span style="color:#393a34">></span>
</span><span style="color:#393a34"> <span style="color:#393a34"><</span><span style="color:#22863a">li</span><span style="color:#22863a"> </span><span style="color:#0550ae">data-testid</span><span style="color:#393a34">=</span><span style="color:#393a34">'</span><span style="color:#c6105f">apple</span><span style="color:#393a34">'</span><span style="color:#393a34">></span>apple<span style="color:#393a34"></</span><span style="color:#22863a">li</span><span style="color:#393a34">></span>
</span><span style="color:#393a34"> <span style="color:#393a34"><</span><span style="color:#22863a">li</span><span style="color:#22863a"> </span><span style="color:#0550ae">data-testid</span><span style="color:#393a34">=</span><span style="color:#393a34">'</span><span style="color:#c6105f">banana</span><span style="color:#393a34">'</span><span style="color:#393a34">></span>banana<span style="color:#393a34"></</span><span style="color:#22863a">li</span><span style="color:#393a34">></span>
</span><span style="color:#393a34"> <span style="color:#393a34"><</span><span style="color:#22863a">li</span><span style="color:#22863a"> </span><span style="color:#0550ae">data-testid</span><span style="color:#393a34">=</span><span style="color:#393a34">'</span><span style="color:#c6105f">orange</span><span style="color:#393a34">'</span><span style="color:#393a34">></span>orange<span style="color:#393a34"></</span><span style="color:#22863a">li</span><span style="color:#393a34">></span>
</span><span style="color:#393a34"><span style="color:#393a34"></</span><span style="color:#22863a">ul</span><span style="color:#393a34">></span></span>（1）通过“橙色”的测试 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">'orange'</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:#393a34">使用的时候，需要把config的关于test_id的内容注释了，如果存在关于test_id的内容的话，没有就不必了。 参考：<a href="https://playwright.dev/docs/api/class-page#page-get-by-test-id">https://playwright.dev/docs/api/class-page#page-get-by-test-id</a></span></span>
<span style="color:#393a34"><em>// Set custom test id attribute from @playwright/test config:</em>
</span><span style="color:#393a34"><span style="color:#005cc5">use</span><span style="color:#d73a49">:</span> <span style="color:#393a34">{</span>
</span><span style="color:#393a34"> <span style="color:#005cc5">testIdAttribute</span><span style="color:#d73a49">:</span> <span style="color:#c6105f">'data-pw'</span>
</span><span style="color:#393a34"><span style="color:#393a34">}</span></span>
（2）根据第n项进行测试：
<span style="color:#393a34"><span style="color:#cf222e">const</span> banana <span style="color:#d73a49">=</span> <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">'listitem'</span><span style="color:#393a34">)</span><span style="color:#393a34">.</span><span style="color:#8250df">nth</span><span style="color:#393a34">(</span><span style="color:#005cc5">1</span><span style="color:#393a34">)</span><span style="color:#393a34">;</span></span>但是，请谨慎使用此方法。 很多时候，页面可能会发生变化，定位器将指向与您预期的元素完全不同的元素。 相反，尝试提出一个将通过 严格标准 的唯一定位器。