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

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'如果还有其他元素并且您需要更具体，也是可能的。