剧作家选择下一个元素的按钮

Question

<div class="mysel">
   <button class="btn"></button>
   <div class="iconName">James</div>
</div>
<div class="mysel">
   <button class="btn"></button>
   <div class="iconName">John</div>
</div>

我想按 James 的条件点击按钮 所以我尝试通过这个使用选择器

 page.locator('button:right-of(:text("james")').click();

但是失败了 我如何在下一个div中通过txt选择按钮？

Answer 1

这里没有太多上下文可供使用，并且

-of

选择器似乎依赖于我没有的 CSS/布局信息，但基于

.mysel

的文本进行选择适用于您的示例：

const playwright = require("playwright"); // ^1.28.1

const html = `
<div class="mysel">
  <button class="btn">GOT IT</button>
  <div class="iconName">James</div>
</div>
<div class="mysel">
  <button class="btn"></button>
  <div class="iconName">John</div>
</div>
`;

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  const sel = '.mysel:has(:text("james")) button';
  console.log(await page.locator(sel).textContent()); // => GOT IT
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

'.mysel:has(.iconName:text("james")) .btn'

如果还有其他元素并且您需要更具体，也可以。

Answer 2

preceding-sibling

是最简单直接的方法。

这是可以直接在 xpath 级别上处理的东西，因此无需在剧作家级别上找到功能来使事情变得简单。

您可以使用直接前同级 xpath，如下所示：

//div[@class="iconName"]/preceding-sibling::button

参考：https://www.roborabbit.com/blog/mastering-xpath-using-the-following-sibling-and-preceding-sibling-axes/#:~:text=In%20XPath%2C%20following% 2Dsibling%3A%3A，元素%20in%20a%20family%20tree.