Playwright选择器用于组合谓词。

huangapple
go评论105阅读模式
英文:

Playwright selector for combining predicates

问题

  1. li:has(div:text("6:00pm"):has(+div:text("Alpha"))) button
英文:

I need to find the button within the li that contains in its children both the text 6:00pm and the text Alpha.

<!-- language: html -->

  1. &lt;li&gt;
  2.   &lt;div&gt;6:00pm&lt;/div&gt;
  3.   &lt;div&gt;Alpha&lt;/div&gt;
  4.   &lt;button&gt;Do it!&lt;/button&gt;
  5. &lt;/li&gt;
  6. &lt;li&gt;
  7.   &lt;div&gt;6:00pm&lt;/div&gt;
  8.   &lt;div&gt;Beta&lt;/div&gt;
  9.   &lt;button&gt;Do it!&lt;/button&gt;
  10. &lt;/li&gt;
  11. ...

I have

<!-- language: javascript -->

  1. li:has(div:text(&quot;6:00pm&quot;)) button

which gives me both buttons for "6:00pm", but how to limit the selector to also match Alpha so I only get one button?

I basically need to add a conjunction to the predicate.

答案1

得分: 3

以下是代码的翻译部分：

You can combine filter calls to create a logical "and" of your conditions:

  1. const playwright = require("playwright"); // ^1.30.0
  3. const html = `<!DOCTYPE html>
  4. <li>
  5.   <div>6:00pm</div>
  6.   <div>Alpha</div>
  7.   <button>Do it!</button>
  8. </li>
  9. <li>
  10.   <div>6:00pm</div>
  11.   <div>Beta</div>
  12.   <button>Do it!</button>
  13. </li>`;
  15. let browser;
  16. (async () => {
  17.   browser = await playwright.chromium.launch();
  18.   const page = await browser.newPage();
  19.   await page.setContent(html);
  20.   const btn = page
  21.     .getByRole("listitem")
  22.     .filter({hasText: "Alpha"})
  23.     .filter({hasText: "6:00pm"})
  24.     .locator("button");
  25.   console.log(await btn.textContent()); // => Do it!
  26. })()
  27.   .catch(err => console.error(err))
  28.   .finally(() => browser?.close());
英文:

You can combine filter calls to create a logical "and" of your conditions:

  1. const playwright = require(&quot;playwright&quot;); // ^1.30.0
  3. const html = `&lt;!DOCTYPE html&gt;
  4. &lt;li&gt;
  5.   &lt;div&gt;6:00pm&lt;/div&gt;
  6.   &lt;div&gt;Alpha&lt;/div&gt;
  7.   &lt;button&gt;Do it!&lt;/button&gt;
  8. &lt;/li&gt;
  9. &lt;li&gt;
  10.   &lt;div&gt;6:00pm&lt;/div&gt;
  11.   &lt;div&gt;Beta&lt;/div&gt;
  12.   &lt;button&gt;Do it!&lt;/button&gt;
  13. &lt;/li&gt;`;
  15. let browser;
  16. (async () =&gt; {
  17.   browser = await playwright.chromium.launch();
  18.   const page = await browser.newPage();
  19.   await page.setContent(html);
  20.   const btn = page
  21.     .getByRole(&quot;listitem&quot;)
  22.     .filter({hasText: &quot;Alpha&quot;})
  23.     .filter({hasText: &quot;6:00pm&quot;})
  24.     .locator(&quot;button&quot;);
  25.   console.log(await btn.textContent()); // =&gt; Do it!
  26. })()
  27.   .catch(err =&gt; console.error(err))
  28.   .finally(() =&gt; browser?.close());

huangapple
  • 本文由 发表于 2023年2月23日 20:05:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/75544604.html
  • css-selectors
  • playwright
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定