如何在剧作家的选择器上获取classList？答案

【问题标题】：How to get classList on a selector in playwright?如何在剧作家的选择器上获取classList？
【发布时间】：2023-02-09 08:43:45
【问题描述】：

这是我从剧作家开始的，我尝试用它来测试我的 React 应用程序。

可能这里某处有类似的问题，但是我已经尝试了 StackOverflow 和 Github 问题中所有可能的非特定答案。

这是我的测试：

import {expect, test} from "@playwright/test";

test.describe('App general functionality', () => {
    test('Theme switches normally', async ({page}) => {
        const app = await page.getByTestId('app');
        const themeSwitch = await page.getByTestId('themeSwitch');

        const classList = await app.evaluate(node => {
            console.log(node);
        });
        // const classList = await app.getAttribute('class');
    });
});

我尝试为 toHaveClass 安装扩展期望类型，并检查是否存在 app。在控制台中，它返回 app 内的定位器和元素。 App 是应用程序根 div 上的测试 ID。

但是错误是恒定的：

    locator.evaluate: Target closed
    =========================== logs ===========================
    waiting for getByTestId('app')
    ============================================================

这是这一行：

const classList = await app.evaluate // or app.getAttribute('class')

应用程序分区：

<div data-test-id={'app'} className={`app ${appStore.isDarkTheme ? 'dark' : 'light'}`}>

先感谢您

【问题讨论】：

标签： reactjs playwright

【解决方案1】：

我认为测试 ID 设置不正确。根据以下测试，它应该是data-testid：

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

const html = `<!DOCTYPE html>
<html><body><p data-testid="foo" class="foo bar baz">hi</p></body></html>`;

let browser;
(async () => {
  browser = await playwright.chromium.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  const el = await page.getByTestId("foo");
  const classList = await el.evaluate(el => [...el.classList]);
  console.log(classList); // => [ 'foo', 'bar', 'baz' ]
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

如果你不能改变元素的属性，也许试试

const el = await page.$('[data-test-id="foo"]');

【讨论】：