如何基于含指定文本的P元素定位下方A元素并获取href（Playwright）

目标HTML结构 #

<div class=" arrange-unit__09f24__rqHTg arrange-unit-fill__09f24__CUubG  border-color--default__09f24__NPAKY">
<p class=" css-na3oda">Business website</p>
<p class=" css-1p9ibgf" data-font-weight="semibold">
<a href="/biz_redir?url=http%3A%2F%2FSouthalabamaconstruction.com&amp;amp;cachebuster=1677298534&amp;amp;website_link_type=website&amp;amp;src_bizid=S8nQqc5JRUn9q-HFI0x8kA&amp;amp;s=76c44f0c24c6e853246a79bc1ceb3260cde63054f3a223e5dd725bd2146bc5f5" class="css-1um3nx" target="_blank" rel="noopener" role="link">http://Southalabamaconstructio…</a>
</p></div>

需求与无效尝试 #

需要通过定位包含「Business website」的<p>元素，获取其下方相邻<p>中的<a>标签的href属性值，但以下尝试均报错、超时或获取错误链接：

await page.locator('a[rel="noopener"]').nth(1).innerHTML()
await page.locator('div > p > a').nth(1).innerHTML()
await page
  .locator('div:has-text("Business website") > a')
  .nth(1)
  .innerHTML()
await page.getByRole('link', { name: /^(http|https):/i })
await page.getByText(/^(http|https):/i).innerHTML()

解决方案 #

之前的方法失败核心原因是定位逻辑错误：比如div:has-text("Business website") > a中，<a>并非<div>的直接子元素；依赖索引nth()定位容易受页面其他元素干扰。以下是几种可靠的定位方式：

方法1：相邻兄弟选择器定位 #

利用CSS相邻兄弟选择器+，精准找到目标<p>后的下一个<p>，再获取其中的<a>：

// 定位目标a标签
const linkLocator = page.locator('p:has-text("Business website") + p a');
// 等待元素加载完成（避免超时）
await linkLocator.waitFor();
// 获取href属性值
const href = await linkLocator.getAttribute('href');

方法2：过滤父容器再定位 #

先找到包含目标<p>的<div>，再在容器内查找<a>，避免页面其他相似元素干扰：

// 过滤出包含目标p的div
const targetDiv = page.locator('div').filter({ 
  has: page.locator('p:has-text("Business website")') 
});
// 在div内定位a标签并获取href
const href = await targetDiv.locator('p a').getAttribute('href');

方法3：XPath直接定位 #

使用XPath的following-sibling轴，直接定位目标<p>的兄弟<p>中的<a>：

const href = await page.locator('//p[text()="Business website"]/following-sibling::p/a')
  .getAttribute('href');

注意事项 #

• 若页面加载较慢，需在获取属性前调用waitFor()确保元素已渲染完成；
• 尽量避免使用索引nth()定位，页面元素顺序变更会导致定位失效。

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