使用带有新 Playwright 0.1101 的配置实现自定义夹具

Question

我希望这不是 TL;DR。我真的需要 Playwright 方面的帮助。

简而言之：有人知道如何使用 Playwright v.01101 将夹具设置迁移到配置吗？没有关于如何执行此操作的文档。

v0.1101 之前的 Playwright/Test 版本启用了自定义装置，您可以从 Playwright/Test 模块覆盖或扩展这些装置。我利用它来实现页面对象模型 (POM)。这是我的示例夹具：

// In tests/fixtures.ts
import { folio as baseFolio } from '@playwright/test'; //now missing in v.0.1101
import { IndexPage } from "../PO/IndexPage";

require('dotenv').config();
const baseURL = process.env.BASE_URL;

// Extend built-in fixtures and declare types for new fixtures
const builder = baseFolio.extend<{ indexPage: IndexPage }>();

// In fixtures.ts
builder.indexPage.init(async ({ page }, runTest) => {
    // get built-in page and wrap with POM
    const indexPage = new IndexPage(page, baseURL);

    // pass this to your test
    runTest(indexPage);
});

// Build and export the modified fixtures
const folio = builder.build();
export const it = folio.it;
export const expect = folio.expect;
export const describe = folio.describe;

这是我运行使用此 POM 的测试示例：

// In tests/e2e.spec.ts
import { IndexPage } from '../PO/IndexPage';
import { describe, it, expect } from './fixtures'
        
it('EN/FR', async ({ indexPage }) => {
     await indexPage.navigateHome();
     await indexPage.getCurrentLanguage()
     await assertGreetingLanguage(indexPage);
     await indexPage.toggleLanguage();
     await assertGreetingLanguage(indexPage);
});

async function assertGreetingLanguage(indexPage: IndexPage) {
    const lang = await indexPage.getCurrentLanguage();
    const greeting = lang === 'English' ? 'Welcome!' : 'Bienvenue!';
    // console.log(`LANG: ${lang} Greet: ${greeting}`);
    expect(await indexPage.getGreeting()).toBe(greeting);
    // expect(await indexPage.getGreeting()).not.toBe(greeting);
}

不过，对于 v0.1101，似乎不再支持 fixtures，and instead can be setup with a config file. Of course, Folio is what implements this config setup。

Answer 1

已解决。 :)

剧作家就此 Github issue 回复了我。这是它是如何完成的。官方文档即将推出：

// config.ts

import { PlaywrightEnv, newTestType, setConfig, TestInfo, reporters, setReporters } from "@playwright/test";
import { IndexPage } from "./PO/IndexPage";


require('dotenv').config();
const baseURL = process.env.BASE_URL;

setConfig({
    testDir: __dirname,  // Search for tests in this directory.
    timeout: 30000,  // Each test is given 30 seconds.
    // timeout: 90000,  // Each test is given 90 seconds.
    retries: 0,  // Failing tests will be retried at most two times.
});

setReporters([
    // Report to the terminal with "line" reporter.
    new reporters.line(),
    // Additionally, output a JUnit XML file.
    new reporters.junit({ outputFile: 'junit.xml', stripANSIControlSequences: true }),
    new reporters.list(),
]);

// Extend the default environment to add any test arguments, for example POMs.
class MyEnv extends PlaywrightEnv {
    async beforeEach(testInfo: TestInfo) {
        // Get all default arguments, including Page.
        const result = await super.beforeEach(testInfo);
        // Create your POM.
        const indexPage = new IndexPage(result.page, baseURL);
        // Return default arguments and new POM.
        return { ...result, indexPage };
    }
}

// Declare "indexPage" test argument for types in IDE.
export const test = newTestType<{ indexPage: IndexPage }>();
export { expect } from "@playwright/test";

// Run tests in three browsers.
const options = {
    // Launch options:
    headless: true,
    slowMo: 50,
    // Context options:
    viewport: { width: 800, height: 600 },
    ignoreHTTPSErrors: true,
    // Testing options:
    // video: 'retain-on-failure',
    screenshot: 'only-on-failure'
};

// Run tests in three browsers.
test.runWith(new MyEnv('chromium', options), { tag: 'chromium' });
test.runWith(new MyEnv('firefox', options), { tag: 'firefox' });
test.runWith(new MyEnv('webkit', options), { tag: 'webkit' });

使用带有新 Playwright 0.1101 的配置实现自定义夹具

Implementing Custom Fixtures using config with new Playwright 0.1101

e2e-testing

playwright