はじめに
「複数テストファイルで使用する共通操作を1箇所にまとめたい」を実現するために、Fixturesを齧ったので備忘録です。
新しいことを試したら随時更新します。
beforeEachで行っていた画面遷移をFixtureでpageを拡張して行う
Fixture使用前
テストファイル
sample.spec.ts
import { expect, test } from '@playwright/test';
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ page }) => {
await page.goto(baseUrl("/Login"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/Login"));
});
...（省略）
});
Fixture使用後
Fixtureファイル
pageを拡張し、テスト実行前にtest.beforeEachで行っていた画面遷移を追加する。
sample.fixture.ts
import { test as base } from '@playwright/test';
type SampleFixtures = {};
// '@playwright/test'のtestを`test.extend`で拡張する。
export const test = base.extend<SampleFixtures>({
page: async ({ page }, use) => {
// セットアップ時（テスト実行前）の処理を記載する
// テストファイルのtest.beforeEachで行っていた画面遷移をここで行う
await page.goto(baseUrl("/Login"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/Login"));
await use(page); // useを基点にテスト実行前、実行後の処理が分かれる
// ティアダウン時（テスト実行後）の処理を記載する
},
});
テストファイル
Fixtureで拡張したtestを使用する。
sample.spec.ts
import { expect, test } from "fixtures/sample.fixture";
test.describe(TEST_DESCRIPTION, () => {
// test.beforeEachでの遷移は不要になる
...（省略）
});
ルート文字列に合わせて、遷移するページを切り替える
Fixture使用前
Aテストファイル
page-a.spec.ts
import { expect, test } from '@playwright/test';
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ page }) => {
await page.goto(baseUrl("/PageA"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/PageA"));
});
...（省略）
});
Bテストファイル
page-b.spec.ts
import { expect, test } from '@playwright/test';
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ page }) => {
await page.goto(baseUrl("/PageB"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/PageB"));
});
...（省略）
});
Fixture使用後
Fixtureファイル
routeに合わせて遷移する画面を切り替える処理を追加する。
sample.fixture.ts
import { test as base } from '@playwright/test';
type PageRoute = 'a' | 'b';
type SampleFixtures = {
/** routeに合わせて遷移ページを切り替える */
openPage: (route: PageRoute) => Promise<void>;
};
// '@playwright/test'のtestを`test.extend`で拡張する。
export const test = base.extend<SampleFixtures>({
openPage: async ({ page }, use) => {
const openPage = async (route: PageRoute, itemIdx: number) => {
switch (route) {
case 'a':
await page.goto(baseUrl("/PageA"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/PageA"));
break;
case 'b':
await page.goto(baseUrl("/PageB"), { waitUntil: 'domcontentloaded' });
await page.waitForURL(baseUrl("/PageB"));
break;
default:
throw new Error(`Unknown route: ${page}`);
}
};
await use(openPage);
},
});
テストファイル
Fixtureに追加したopenPageを呼び出して、画面遷移を行う。
Aテストファイル
page-a.spec.ts
import { expect, test } from "fixtures/sample.fixture";
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ openPage }) => {
await openPage("a");
});
...（省略）
});
Bテストファイル
page-b.spec.ts
import { expect, test } from "fixtures/sample.fixture";
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ page }) => {
await openPage("b");
});
...（省略）
});
共通使用する文字列を返す
sample.fixture.ts
type SampleFixtures = {
className: string;
};
export const test = base.extend<SampleFixtures>({
className: async ({ }, use) => {
await use(".sample"); // .sampleを返す
},
});
sample.spec.ts
import { expect, test } from "fixtures/sample.fixture";
test.describe(TEST_DESCRIPTION, () => {
test.beforeEach(async ({ className }) => {
console.log(className); // .sample
});
});