Playwright：如何结合nth-match与href中的ID值选择指定链接

页面上的链接示例如下：

<a href="/animation?ID=11111&amp;model_id=AAAAA">Preview Results</a>
<a href="/animation?ID=11111&amp;model_id=BBBBB">Preview Results</a>
<a href="/animation?ID=22222&amp;model_id=CCCCC">Preview Results</a>
<a href="/animation?ID=22222&amp;model_id=DDDDD">Preview Results</a>
<a href="/animation?ID=33333&amp;model_id=EEEEE">Preview Results</a>
<a href="/animation?ID=33333&amp;model_id=FFFFF">Preview Results</a>

我需要选中href中包含ID=22222的第一个链接，目前已经能选中第一个文本为“Preview Results”的链接，代码如下：

await page.locator(':nth-match(a:has-text("Preview Results"), 1)').click();

解决方案 #

可以通过属性匹配+索引定位的方式精准选中目标链接，以下是几种可行的写法：

写法1：结合CSS属性选择器与:nth-match

直接匹配href包含指定ID的a标签，再取第一个：

await page.locator(':nth-match(a[href*="ID=22222"], 1)').click();

如果需要同时确保文本是“Preview Results”，可以加上:has-text过滤：

await page.locator(':nth-match(a[href*="ID=22222"]:has-text("Preview Results"), 1)').click();

写法2：使用XPath定位

XPath的语法也能直接定位到第一个符合条件的链接：

await page.locator('xpath=//a[contains(@href, "ID=22222")][1]').click();

说明 #

• a[href*="ID=22222"]是CSS选择器，*=表示属性值包含指定字符串；
• :nth-match(selector, index)是Playwright的伪类，用于匹配第N个符合选择器的元素；
• XPath中的contains(@href, "ID=22222")表示href属性包含指定文本，[1]取第一个匹配项。

内容的提问来源于stack exchange，提问作者dogowar