javascript 如何在playwright中的选择器上获取classList?

gk7wooem  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(218)

这是我开始与剧作家,我试图测试我的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安装扩展的expect类型,并检查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'}`}>

Git url

cngwdvgl

cngwdvgl1#

我认为测试id设置不正确,根据下面的实验应该是data-testid

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

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

test.describe("App general functionality", () => {
  test("Theme switches normally", async ({page}) => {
    await page.setContent(html); // for easy reproducibility
    const el = await page.getByTestId("app");
    const classList = await el.evaluate(el => [...el.classList]);
    expect(classList).toEqual(["foo", "bar", "baz"]);
  });
});

如果无法更改元素的属性,可以尝试

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

也许更习惯一点(假设您已经修复了testid):

await expect(page.getByTestId("app")).toHaveClass(/\bfoo\b/);
await expect(page.getByTestId("app")).toHaveClass(/\bbar\b/);
await expect(page.getByTestId("app")).toHaveClass(/\bbaz\b/);

这可以处理额外的类和类的不同排序。

相关问题