使用 playwright 检查元素 class 是否包含字符串

Question

我正在尝试获取第 18 天的元素，并检查它的 class.

是否 disabled

<div class="react-datepicker__day react-datepicker__day--tue" aria-label="day-16" role="option">16</div>
<div class="react-datepicker__day react-datepicker__day--wed react-datepicker__day--today" aria-label="day-17" role="option">17</div>
<div class="react-datepicker__day react-datepicker__day--thu react-datepicker__day--disabled" aria-label="day-18" role="option">18</div>

这是我的代码，假设

this.xpath = 'xpath=.//*[contains(@class, "react-datepicker__day") and not (contains(@class, "outside-month")) and ./text()="18"]'

  async isDateAvailable () {
    const dayElt = await this.page.$(this.xpath)
    console.log(dayElt.classList.contains('disabled'))) \this should return true

我似乎无法让它工作。错误提示 TypeError：无法读取未定义的属性 'contains'。你能帮忙指出我这里做错了什么吗？

Answer 1

您必须在浏览器中对其进行评估。 $ 将 return 一个 ElementHandle，它是浏览器 DOM 元素的包装器，因此您必须使用例如evaluate 然后就可以了。或者简单地 $eval 将查找元素，将其传递到回调中，该回调在浏览器 JavaScript 引擎中执行。这意味着类似的东西会起作用：

// @ts-check
const playwright = require("playwright");

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.setContent(`
      <div id="a1" class="foo"></div>
    `)
  console.log(
    await page.$eval("#a1", el => el.classList.contains("foo1"))
  )
  await browser.close();
})();

Answer 2

看起来你可以写

await expect(page.locator('.selector-name')).toHaveClass(/target-class/)

/target-class/ - 斜杠是必需的，因为它是 RegExp

使用 playwright 检查元素 class 是否包含字符串

Check if element class contains string using playwright

javascript

dom

playwright