javascript - 使用剧作家检查元素类是否包含字符串

Question

我正在尝试获取第 18 天的元素，并检查它是否在其类上禁用。

<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:无法读取未定义的属性“包含”。你能指出我在这里做错了什么吗？

Answer 1

看起来你可以写

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

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

为了通过一个调用检查几个类，我使用了这个助手(这是因为 api 方式对我不起作用 https://playwright.dev/docs/test-assertions#locator-assertions-to-have-class ):

async function expectHaveClasses(locator: Locator, className: string) {
    // get current classes of element
    const attrClass = await locator.getAttribute('class')
    const elementClasses: string[] = attrClass ? attrClass.split(' ') : []
    const targetClasses: string[] = className.split(' ')
    // Every class should be present in the current class list
    const isValid = targetClasses.every(classItem => elementClasses.includes(classItem))

    expect(isValid).toBeTruthy()
}

在 className 中你可以写几个用空格分隔的类:

const result = await expectHaveClasses(page.locator('.item'), 'class-a class-b')