英文:
How to get classList on a selector in playwright?
问题
这是我开始使用Playwright，并尝试测试我的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 // 或 app.getAttribute('class')
应用程序的div：
<div data-test-id={'app'} className={`app ${appStore.isDarkTheme ? 'dark' : 'light'}`}>
英文:
This is my start with playwright and I try to test my React app with it.
It might be that there is a similar question somewhere here, however I've tried all the possible non-specific answers from StackOverflow and Github issues.
This is my test:
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');
});
});
I've tried installing extended expect types for toHaveClass and checked if app is present. In console it returns locator and elements inside the app. App is a test id on the root div of the application.
However the error is constant:
locator.evaluate: Target closed
=========================== logs ===========================
waiting for getByTestId('app')
============================================================
And it is one this line:
const classList = await app.evaluate // or app.getAttribute('class')
The app div:
<div data-test-id={'app'} className={`app ${appStore.isDarkTheme ? 'dark' : 'light'}`}>
答案1
得分: 2
I don't think the test id is set properly. It should be data-testid based on the following experiment:
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"]);
});
});
If you can't change the element's property, maybe try
const el = await page.$('[data-test-id="app"]');
Perhaps a bit more idiomatic (assuming you've fixed testid):
const app = page.getByTestId("app");
await expect(app).toHaveClass(/\bfoo\b/);
await expect(app).toHaveClass(/\bbar\b/);
await expect(app).toHaveClass(/\bbaz\b/);
This handles extra classes and different ordering of the classes. See also Check if element class contains string using playwright for deeper discussion of this pattern.
英文:
I don't think the test id is set properly. It should be data-testid based on the following experiment:
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"]);
});
});
If you can't change the element's property, maybe try
const el = await page.$('[data-test-id="app"]');
Pehaps a bit more idiomatic (assuming you've fixed testid):
const app = page.getByTestId("app");
await expect(app).toHaveClass(/\bfoo\b/);
await expect(app).toHaveClass(/\bbar\b/);
await expect(app).toHaveClass(/\bbaz\b/);
This handles extra classes and different ordering of the classes. See also Check if element class contains string using playwright for deeper discussion of this pattern.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论