Playwright Test

Playwright Testは、テストを宣言するためのtest関数と、アサーションを記述するためのexpect関数を提供します。

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

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  const name = await page.innerText('.navbar__title');
  expect(name).toBe('Playwright');
});

メソッド

test

追加バージョン: v1.10

test.test

テストを宣言します。

test(title, body)
test(title, details, body)

使用方法

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

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  // ...
});

タグ

追加のテスト詳細を提供することで、テストにタグを付けることができます。または、テストタイトルにタグを含めることもできます。各タグは@記号で始まる必要があることに注意してください。

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

test('basic test', {
  tag: '@smoke',
}, async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  // ...
});

test('another test @smoke', async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  // ...
});

テストタグはテストレポートに表示され、TestCase.tagsプロパティを通じてカスタムレポーターで利用できます。

テスト実行中にタグでテストをフィルターすることもできます。

コマンドラインで;
設定ファイルでtestConfig.grepおよびtestProject.grepを使用して;

タグ付けについて詳しく学ぶ。

アノテーション

追加のテスト詳細を提供することで、テストにアノテーションを付けることができます。

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

test('basic test', {
  annotation: {
    type: 'issue',
    description: 'https://github.com/microsoft/playwright/issues/23180',
  },
}, async ({ page }) => {
  await page.goto('https://playwright.dokyumento.jp/');
  // ...
});

テストアノテーションはテストレポートに表示され、TestCase.annotationsプロパティを通じてカスタムレポーターで利用できます。

実行時にtestInfo.annotationsを操作することでアノテーションを追加することもできます。

テストアノテーションについて詳しく学ぶ。

引数

title string #

テストタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
    
    アノテーションタイプ、例えばissue。
  - description string (オプション)
    
    オプションのアノテーションの説明、例えば問題のURL。
追加のテスト詳細。
body function(Fixtures, TestInfo)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。

test.afterAll

追加バージョン: v1.10

test.test.afterAll

すべてのテストの後にワーカーごとに一度実行されるafterAllフックを宣言します。

テストファイルのスコープで呼び出された場合、ファイル内のすべてのテストの後に実行されます。test.describe()グループ内で呼び出された場合、グループ内のすべてのテストの後に実行されます。

使用方法

test.afterAll(async () => {
  console.log('Done with tests');
  // ...
});

あるいは、**タイトル付き**のフックを宣言することもできます。

test.afterAll('Teardown', async () => {
  console.log('Done with tests');
  // ...
});

引数

title string (オプション)追加バージョン: v1.38#

フックタイトル。
hookFunction function(Fixtures, TestInfo)#

ワーカーフィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るフック関数。

詳細

複数のafterAllフックが追加された場合、それらは登録された順序で実行されます。

テストが失敗した場合、ワーカープロセスが再起動され、afterAllフックは新しいワーカーで再度実行されることに注意してください。ワーカーと失敗について詳しく学ぶ。

Playwrightは、一部のフックが失敗した場合でも、適用可能なすべてのフックの実行を継続します。

test.afterAll(hookFunction)
test.afterAll(title, hookFunction)

test.afterEach

追加バージョン: v1.10

test.test.afterEach

各テストの後に実行されるafterEachフックを宣言します。

テストファイルのスコープで呼び出された場合、ファイル内の各テストの後に実行されます。test.describe()グループ内で呼び出された場合、グループ内の各テストの後に実行されます。

テスト本体と同じすべてのFixturesにアクセスでき、また多くの有用な情報を提供するTestInfoオブジェクトにもアクセスできます。例えば、テストが成功したか失敗したかを確認できます。

test.afterEach(hookFunction)
test.afterEach(title, hookFunction)

使用方法

example.spec.ts
import { test, expect } from '@playwright/test';

test.afterEach(async ({ page }) => {
  console.log(`Finished ${test.info().title} with status ${test.info().status}`);

  if (test.info().status !== test.info().expectedStatus)
    console.log(`Did not run as expected, ended up at ${page.url()}`);
});

test('my test', async ({ page }) => {
  // ...
});

あるいは、**タイトル付き**のフックを宣言することもできます。

example.spec.ts
test.afterEach('Status check', async ({ page }) => {
  if (test.info().status !== test.info().expectedStatus)
    console.log(`Did not run as expected, ended up at ${page.url()}`);
});

引数

title string (オプション)追加バージョン: v1.38#

フックタイトル。
hookFunction function(Fixtures, TestInfo)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るフック関数。

詳細

複数のafterEachフックが追加された場合、それらは登録された順序で実行されます。

Playwrightは、一部のフックが失敗した場合でも、適用可能なすべてのフックの実行を継続します。

test.beforeAll

追加バージョン: v1.10

test.test.beforeAll

すべてのテストの前にワーカープロセスごとに一度実行されるbeforeAllフックを宣言します。

テストファイルのスコープで呼び出された場合、ファイル内のすべてのテストの前に実行されます。test.describe()グループ内で呼び出された場合、グループ内のすべてのテストの前に実行されます。

beforeAllでセットアップされたリソースを破棄するには、test.afterAll()を使用できます。

test.beforeAll(hookFunction)
test.beforeAll(title, hookFunction)

使用方法

example.spec.ts
import { test, expect } from '@playwright/test';

test.beforeAll(async () => {
  console.log('Before tests');
});

test.afterAll(async () => {
  console.log('After tests');
});

test('my test', async ({ page }) => {
  // ...
});

あるいは、**タイトル付き**のフックを宣言することもできます。

example.spec.ts
test.beforeAll('Setup', async () => {
  console.log('Before tests');
});

引数

title string (オプション)追加バージョン: v1.38#

フックタイトル。
hookFunction function(Fixtures, TestInfo)#

ワーカーフィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るフック関数。

詳細

複数のbeforeAllフックが追加された場合、それらは登録された順序で実行されます。

テストが失敗した場合、ワーカープロセスが再起動され、beforeAllフックは新しいワーカーで再度実行されることに注意してください。ワーカーと失敗について詳しく学ぶ。

Playwrightは、一部のフックが失敗した場合でも、適用可能なすべてのフックの実行を継続します。

test.beforeEach

追加バージョン: v1.10

test.test.beforeEach

各テストの前に実行されるbeforeEachフックを宣言します。

テストファイルのスコープで呼び出された場合、ファイル内の各テストの前に実行されます。test.describe()グループ内で呼び出された場合、グループ内の各テストの前に実行されます。

テスト本体と同じすべてのFixturesにアクセスでき、また多くの有用な情報を提供するTestInfoオブジェクトにもアクセスできます。例えば、テストを開始する前にページをナビゲートすることができます。

beforeEachでセットアップされたリソースを破棄するには、test.afterEach()を使用できます。

test.beforeEach(hookFunction)
test.beforeEach(title, hookFunction)

使用方法

example.spec.ts
import { test, expect } from '@playwright/test';

test.beforeEach(async ({ page }) => {
  console.log(`Running ${test.info().title}`);
  await page.goto('https://my.start.url/');
});

test('my test', async ({ page }) => {
  expect(page.url()).toBe('https://my.start.url/');
});

あるいは、**タイトル付き**のフックを宣言することもできます。

example.spec.ts
test.beforeEach('Open start URL', async ({ page }) => {
  console.log(`Running ${test.info().title}`);
  await page.goto('https://my.start.url/');
});

引数

title string (オプション)追加バージョン: v1.38#

フックタイトル。
hookFunction function(Fixtures, TestInfo)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るフック関数。

詳細

複数のbeforeEachフックが追加された場合、それらは登録された順序で実行されます。

Playwrightは、一部のフックが失敗した場合でも、適用可能なすべてのフックの実行を継続します。

test.describe

追加バージョン: v1.10

test.test.describe

テストのグループを宣言します。

test.describe(title, callback)
test.describe(callback)
test.describe(title, details, callback)

使用方法

タイトル付きのテストグループを宣言できます。そのタイトルは、各テストのタイトルの一部としてテストレポートに表示されます。

test.describe('two tests', () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

匿名グループ

タイトルなしでテストグループを宣言することもできます。これは、test.use()を使用してテストグループに共通のオプションを与えるのに便利です。

test.describe(() => {
  test.use({ colorScheme: 'dark' });

  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

タグ

追加の詳細を提供することで、グループ内のすべてのテストにタグを付けることができます。各タグは@記号で始まる必要があることに注意してください。

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

test.describe('two tagged tests', {
  tag: '@smoke',
}, () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

タグ付けについて詳しく学ぶ。

アノテーション

追加の詳細を提供することで、グループ内のすべてのテストにアノテーションを付けることができます。

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

test.describe('two annotated tests', {
  annotation: {
    type: 'issue',
    description: 'https://github.com/microsoft/playwright/issues/23180',
  },
}, () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

テストアノテーションについて詳しく学ぶ。

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
グループ内のすべてのテストに関する追加の詳細。
callback function #

test.describe()を呼び出すとすぐに実行されるコールバックです。このコールバックで宣言されたテストはすべてこのグループに属します。

test.describe.configure

追加バージョン: v1.10

test.test.describe.configure

囲んでいるスコープを設定します。トップレベルまたは`describe`内で実行できます。設定は、テスト宣言の前か後かに関わらず、スコープ全体に適用されます。

実行モードについてはこちらで詳しく学ぶ。

使用方法

テストを並行して実行。

// Run all the tests in the file concurrently using parallel workers.
test.describe.configure({ mode: 'parallel' });
test('runs in parallel 1', async ({ page }) => {});
test('runs in parallel 2', async ({ page }) => {});

テストを順番に実行し、失敗した各テストを個別に再試行します。

これはデフォルトモードです。`fullyParallel`を使用するプロジェクト設定を上書きするために、これを明示的に設定すると便利です。
```
// Tests in this file run in order. Retries, if any, run independently.
test.describe.configure({ mode: 'default' });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});
```
テストを直列に実行し、最初から再試行します。直列テストのいずれかが失敗した場合、後続のすべてのテストはスキップされます。

注
直列実行は推奨されません。通常、テストを独立して実行できるように、隔離された状態にすることがより良い方法です。
```
// Annotate tests as inter-dependent.
test.describe.configure({ mode: 'serial' });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});
```

各テストの再試行回数とタイムアウトを設定します。

// Each test in the file will be retried twice and have a timeout of 20 seconds.
test.describe.configure({ retries: 2, timeout: 20_000 });
test('runs first', async ({ page }) => {});
test('runs second', async ({ page }) => {});

複数の`describe`を並行して実行しますが、各`describe`内のテストは順番に実行します。

test.describe.configure({ mode: 'parallel' });

test.describe('A, runs in parallel with B', () => {
  test.describe.configure({ mode: 'default' });
  test('in order A1', async ({ page }) => {});
  test('in order A2', async ({ page }) => {});
});

test.describe('B, runs in parallel with A', () => {
  test.describe.configure({ mode: 'default' });
  test('in order B1', async ({ page }) => {});
  test('in order B2', async ({ page }) => {});
});

引数

options Object (オプション)
- mode "default" | "parallel" | "serial" (オプション)#
  
  実行モード。こちらで実行モードについて詳しく学ぶ。
- retries number (オプション)追加バージョン: v1.28#
  
  各テストの再試行回数。
- timeout number (オプション)追加バージョン: v1.28#
  
  各テストのタイムアウト時間（ミリ秒単位）。testProject.timeoutおよびtestConfig.timeoutを上書きします。

test.describe.fixme

追加バージョン: v1.25

test.test.describe.fixme

test.describe()と同様にテストグループを宣言します。このグループのテストは「fixme」としてマークされ、実行されません。

test.describe.fixme(title, callback)
test.describe.fixme(callback)
test.describe.fixme(title, details, callback)

使用方法

test.describe.fixme('broken tests that should be fixed', () => {
  test('example', async ({ page }) => {
    // This test will not run
  });
});

タイトルを省略することもできます。

test.describe.fixme(() => {
  // ...
});

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.fixme()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属し、実行されません。

test.describe.only

追加バージョン: v1.10

test.test.describe.only

フォーカスされたテストグループを宣言します。フォーカスされたテストまたはスイートがある場合、それらすべてが実行され、他は実行されません。

test.describe.only(title, callback)
test.describe.only(callback)
test.describe.only(title, details, callback)

使用方法

test.describe.only('focused group', () => {
  test('in the focused group', async ({ page }) => {
    // This test will run
  });
});
test('not in the focused group', async ({ page }) => {
  // This test will not run
});

タイトルを省略することもできます。

test.describe.only(() => {
  // ...
});

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.only()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属します。

test.describe.skip

追加バージョン: v1.10

test.test.describe.skip

test.describe()と同様に、スキップされたテストグループを宣言します。スキップされたグループのテストは決して実行されません。

test.describe.skip(title, callback)
test.describe.skip(title)
test.describe.skip(title, details, callback)

使用方法

test.describe.skip('skipped group', () => {
  test('example', async ({ page }) => {
    // This test will not run
  });
});

タイトルを省略することもできます。

test.describe.skip(() => {
  // ...
});

引数

title string #

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.skip()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属し、実行されません。

test.extend

追加バージョン: v1.10

test.test.extend

テストで使用できるフィクスチャやオプションを定義することで、testオブジェクトを拡張します。

使用方法

まず、フィクスチャやオプションを定義します。

TypeScript
JavaScript

import { test as base } from '@playwright/test';
import { TodoPage } from './todo-page';

export type Options = { defaultItem: string };

// Extend basic test by providing a "defaultItem" option and a "todoPage" fixture.
export const test = base.extend<Options & { todoPage: TodoPage }>({
  // Define an option and provide a default value.
  // We can later override it in the config.
  defaultItem: ['Do stuff', { option: true }],

  // Define a fixture. Note that it can use built-in fixture "page"
  // and a new option "defaultItem".
  todoPage: async ({ page, defaultItem }, use) => {
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo(defaultItem);
    await use(todoPage);
    await todoPage.removeAll();
  },
});

my-test.js
const base = require('@playwright/test');
const { TodoPage } = require('./todo-page');

// Extend basic test by providing a "defaultItem" option and a "todoPage" fixture.
exports.test = base.test.extend({
  // Define an option and provide a default value.
  // We can later override it in the config.
  defaultItem: ['Do stuff', { option: true }],

  // Define a fixture. Note that it can use built-in fixture "page"
  // and a new option "defaultItem".
  todoPage: async ({ page, defaultItem }, use) => {
    const todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo(defaultItem);
    await use(todoPage);
    await todoPage.removeAll();
  },
});

次に、テストでフィクスチャを使用します。

example.spec.ts
import { test } from './my-test';

test('test 1', async ({ todoPage }) => {
  await todoPage.addToDo('my todo');
  // ...
});

設定ファイルでオプションを設定します。

TypeScript
JavaScript

playwright.config.ts
import { defineConfig } from '@playwright/test';
import type { Options } from './my-test';

export default defineConfig<Options>({
  projects: [
    {
      name: 'shopping',
      use: { defaultItem: 'Buy milk' },
    },
    {
      name: 'wellbeing',
      use: { defaultItem: 'Exercise!' },
    },
  ]
});

playwright.config.ts
// @ts-check

module.exports = defineConfig({
  projects: [
    {
      name: 'shopping',
      use: { defaultItem: 'Buy milk' },
    },
    {
      name: 'wellbeing',
      use: { defaultItem: 'Exercise!' },
    },
  ]
});

フィクスチャおよびテストのパラメーター化について詳しく学ぶ。

引数

fixtures Object #

フィクスチャやオプションを含むオブジェクトです。フィクスチャの形式について詳しく学ぶ。

戻り値

Test #

test.fail

追加バージョン: v1.10

test.test.fail

テストを「失敗すべき」としてマークします。Playwrightはこのテストを実行し、実際に失敗することを確認します。これは、一部の機能が修正されるまで壊れていることを認識するためのドキュメント目的で有用です。

「失敗する」テストを宣言するには

test.fail(title, body)
test.fail(title, details, body)

実行時にテストを「失敗する」としてアノテーションを付けるには

test.fail(condition, description)
test.fail(callback, description)
test.fail()

使用方法

テストを失敗すると宣言することで、Playwrightが実際に失敗することを確認できます。

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

test.fail('not yet ready', async ({ page }) => {
  // ...
});

テストが一部の構成では失敗するが、すべてではない場合、テスト本体内で何らかの条件に基づいてテストを失敗としてマークすることができます。この場合、description引数を渡すことをお勧めします。

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

test('fail in WebKit', async ({ page, browserName }) => {
  test.fail(browserName === 'webkit', 'This feature is not implemented for Mac yet');
  // ...
});

ファイルまたはtest.describe()グループ内のすべてのテストを、単一のtest.fail(callback, description)呼び出しで、何らかの条件に基づいて「失敗すべき」とマークすることができます。

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

test.fail(({ browserName }) => browserName === 'webkit', 'not implemented yet');

test('fail in WebKit 1', async ({ page }) => {
  // ...
});
test('fail in WebKit 2', async ({ page }) => {
  // ...
});

テスト本体内で引数なしでtest.fail()を呼び出すことで、常にテストを失敗としてマークすることもできます。代わりにtest.fail(title, body)で失敗するテストを宣言することをお勧めします。

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

test('less readable', async ({ page }) => {
  test.fail();
  // ...
});

引数

title string (オプション)追加バージョン: v1.42#

テストタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
テスト詳細の説明については、test()を参照してください。
body function(Fixtures, TestInfo) (オプション)追加バージョン: v1.42#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。
condition boolean (オプション)#

条件がtrueの場合、テストは「失敗すべき」としてマークされます。
callback function(Fixtures):boolean (オプション)#

テストフィクスチャに基づいて「失敗すべき」としてマークするかどうかを返す関数です。戻り値がtrueの場合、テストは「失敗すべき」としてマークされます。
description string (オプション)#

テストレポートに反映されるオプションの説明。

test.fail.only

追加バージョン: v1.49

test.test.fail.only

test.fail.onlyを使用すると、失敗が予想される特定のテストに焦点を当てることができます。これは、失敗したテストをデバッグしたり、特定の課題に取り組んだりする際に特に役立ちます。

フォーカスされた「失敗する」テストを宣言するには

test.fail.only(title, body)
test.fail.only(title, details, body)

使用方法

フォーカスされた失敗テストを宣言することで、Playwrightがこのテストのみを実行し、実際に失敗することを確認できます。

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

test.fail.only('focused failing test', async ({ page }) => {
  // This test is expected to fail
});
test('not in the focused group', async ({ page }) => {
  // This test will not run
});

引数

title string (オプション)#

テストタイトル。
details Object (オプション)#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
テスト詳細の説明についてはtest.describe()を参照してください。
body function(Fixtures, TestInfo) (オプション)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。

test.fixme

追加バージョン: v1.10

test.test.fixme

テストを「fixme」としてマークします。これは後で修正する意図があることを示します。Playwrightはtest.fixme()呼び出し以降、テストを実行しません。

「fixme」テストを宣言するには

test.fixme(title, body)
test.fixme(title, details, body)

実行時にテストを「fixme」としてアノテーションを付けるには

test.fixme(condition, description)
test.fixme(callback, description)
test.fixme()

使用方法

テストを修正予定として宣言でき、Playwrightはそれを実行しません。

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

test.fixme('to be fixed', async ({ page }) => {
  // ...
});

テストが一部の構成で修正されるべきだが、すべてではない場合、テスト本体内で何らかの条件に基づいてテストを「fixme」としてマークすることができます。この場合、description引数を渡すことをお勧めします。Playwrightはテストを実行しますが、test.fixme呼び出しの直後にそれを中断します。

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

test('to be fixed in Safari', async ({ page, browserName }) => {
  test.fixme(browserName === 'webkit', 'This feature breaks in Safari for some reason');
  // ...
});

ファイルまたはtest.describe()グループ内のすべてのテストを、単一のtest.fixme(callback, description)呼び出しで、何らかの条件に基づいて「fixme」とマークすることができます。

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

test.fixme(({ browserName }) => browserName === 'webkit', 'Should figure out the issue');

test('to be fixed in Safari 1', async ({ page }) => {
  // ...
});
test('to be fixed in Safari 2', async ({ page }) => {
  // ...
});

テスト本体内で引数なしでtest.fixme()を呼び出すことで、常にテストを失敗としてマークすることもできます。代わりにtest.fixme(title, body)を使用することをお勧めします。

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

test('less readable', async ({ page }) => {
  test.fixme();
  // ...
});

引数

title string (オプション)#

テストタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
テスト詳細の説明については、test()を参照してください。
body function(Fixtures, TestInfo) (オプション)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。
condition boolean (オプション)#

条件がtrueの場合、テストは「失敗すべき」としてマークされます。
callback function(Fixtures):boolean (オプション)#

テストフィクスチャに基づいて「失敗すべき」としてマークするかどうかを返す関数です。戻り値がtrueの場合、テストは「失敗すべき」としてマークされます。
description string (オプション)#

テストレポートに反映されるオプションの説明。

test.info

追加バージョン: v1.10

test.test.info

現在実行中のテストに関する情報を返します。このメソッドはテスト実行中にのみ呼び出すことができ、それ以外の場合はエラーをスローします。

使用方法

test('example test', async ({ page }) => {
  // ...
  await test.info().attach('screenshot', {
    body: await page.screenshot(),
    contentType: 'image/png',
  });
});

戻り値

TestInfo #

test.only

追加バージョン: v1.10

test.test.only

フォーカスされたテストを宣言します。フォーカスされたテストまたはスイートがある場合、それらすべてが実行され、他は実行されません。

test.only(title, body)
test.only(title, details, body)

使用方法

test.only('focus this test', async ({ page }) => {
  // Run only focused tests in the entire project.
});

引数

title string #

テストタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
テスト詳細の説明については、test()を参照してください。
body function(Fixtures, TestInfo)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。

test.setTimeout

追加バージョン: v1.10

test.test.setTimeout

テストのタイムアウトを変更します。ゼロはタイムアウトなしを意味します。様々なタイムアウトについて詳しく学ぶ。

現在実行中のテストのタイムアウトは、testInfo.timeoutを通じて利用できます。

使用方法

テストのタイムアウトを変更します。

test('very slow test', async ({ page }) => {
  test.setTimeout(120000);
  // ...
});

実行が遅い`beforeEach`フックからタイムアウトを変更します。これは`beforeEach`フックと共有されるテストのタイムアウトに影響することに注意してください。
```
test.beforeEach(async ({ page }, testInfo) => {
  // Extend timeout for all tests running this hook by 30 seconds.
  test.setTimeout(testInfo.timeout + 30000);
});
```
`beforeAll`または`afterAll`フックのタイムアウトを変更します。これはテストのタイムアウトではなく、フックのタイムアウトに影響することに注意してください。
```
test.beforeAll(async () => {
  // Set timeout for this hook.
  test.setTimeout(60000);
});
```

test.describe()グループ内のすべてのテストのタイムアウトを変更します。

test.describe('group', () => {
  // Applies to all tests in this group.
  test.describe.configure({ timeout: 60000 });

  test('test one', async () => { /* ... */ });
  test('test two', async () => { /* ... */ });
  test('test three', async () => { /* ... */ });
});

引数

timeout number #

タイムアウト（ミリ秒単位）。

test.skip

追加バージョン: v1.10

test.test.skip

テストをスキップします。Playwrightはtest.skip()呼び出し以降、テストを実行しません。

スキップされたテストは、決して実行されるべきではありません。テストを修正する意図がある場合は、代わりにtest.fixme()を使用してください。

スキップされたテストを宣言するには

test.skip(title, body)
test.skip(title, details, body)

実行時にテストをスキップするには

test.skip(condition, description)
test.skip(callback, description)
test.skip()

使用方法

スキップされたテストを宣言でき、Playwrightはそれを実行しません。

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

test.skip('never run', async ({ page }) => {
  // ...
});

テストが一部の構成でスキップされるべきだが、すべてではない場合、テスト本体内で何らかの条件に基づいてテストをスキップすることができます。この場合、description引数を渡すことをお勧めします。Playwrightはテストを実行しますが、test.skip呼び出しの直後にそれを中断します。

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

test('Safari-only test', async ({ page, browserName }) => {
  test.skip(browserName !== 'webkit', 'This feature is Safari-only');
  // ...
});

ファイルまたはtest.describe()グループ内のすべてのテストを、単一のtest.skip(callback, description)呼び出しで、何らかの条件に基づいてスキップすることができます。

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

test.skip(({ browserName }) => browserName !== 'webkit', 'Safari-only');

test('Safari-only test 1', async ({ page }) => {
  // ...
});
test('Safari-only test 2', async ({ page }) => {
  // ...
});

テスト本体内で引数なしでtest.skip()を呼び出すことで、常にテストを失敗としてマークすることもできます。代わりにtest.skip(title, body)を使用することをお勧めします。

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

test('less readable', async ({ page }) => {
  test.skip();
  // ...
});

引数

title string (オプション)#

テストタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
テスト詳細の説明については、test()を参照してください。
body function(Fixtures, TestInfo) (オプション)#

フィクスチャを持つオブジェクトとオプションのTestInfoの1つまたは2つの引数を取るテスト本体。
condition boolean (オプション)#

条件がtrueの場合、テストは「失敗すべき」としてマークされます。
callback function(Fixtures):boolean (オプション)#

テストフィクスチャに基づいて「失敗すべき」としてマークするかどうかを返す関数です。戻り値がtrueの場合、テストは「失敗すべき」としてマークされます。
description string (オプション)#

テストレポートに反映されるオプションの説明。

test.slow

追加バージョン: v1.10

test.test.slow

テストを「遅い」としてマークします。遅いテストにはデフォルトの3倍のタイムアウトが与えられます。

test.slow()は`beforeAll`または`afterAll`フックでは使用できないことに注意してください。代わりにtest.setTimeout()を使用してください。

test.slow()
test.slow(condition, description)
test.slow(callback, description)

使用方法

テスト本体内でtest.slow()を呼び出すことで、テストを遅いとしてマークできます。

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

test('slow test', async ({ page }) => {
  test.slow();
  // ...
});

テストが一部の構成で遅いが、すべてではない場合、条件に基づいて遅いとマークすることができます。この場合、description引数を渡すことをお勧めします。

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

test('slow in Safari', async ({ page, browserName }) => {
  test.slow(browserName === 'webkit', 'This feature is slow in Safari');
  // ...
});

ファイルまたはtest.describe()グループ内のすべてのテストを、コールバックを渡すことで、何らかの条件に基づいて「遅い」とマークすることができます。

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

test.slow(({ browserName }) => browserName === 'webkit', 'all tests are slow in Safari');

test('slow in Safari 1', async ({ page }) => {
  // ...
});
test('fail in Safari 2', async ({ page }) => {
  // ...
});

引数

condition boolean (オプション)#

条件がtrueの場合、テストは「遅い」としてマークされます。
callback function(Fixtures):boolean (オプション)#

テストフィクスチャに基づいて「遅い」としてマークするかどうかを返す関数です。戻り値がtrueの場合、テストは「遅い」としてマークされます。
description string (オプション)#

テストレポートに反映されるオプションの説明。

test.step

追加バージョン: v1.10

test.test.step

レポートに表示されるテストステップを宣言します。

使用方法

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

test('test', async ({ page }) => {
  await test.step('Log in', async () => {
    // ...
  });

  await test.step('Outer step', async () => {
    // ...
    // You can nest steps inside each other.
    await test.step('Inner step', async () => {
      // ...
    });
  });
});

引数

title string #

ステップ名。
body function(TestStepInfo):Promise<Object>#

ステップ本体。
options Object (オプション)
- box boolean (オプション)追加バージョン: v1.39#
  
  レポートでステップをボックス化するかどうか。デフォルトはfalseです。ステップがボックス化されている場合、ステップの内部からスローされたエラーは、ステップの呼び出し箇所を指します。詳細については以下を参照してください。
- location Location (オプション)追加バージョン: v1.48#
  
  テストレポートやトレースビューアでステップが表示されるカスタムロケーションを指定します。デフォルトでは、test.step()呼び出しのロケーションが表示されます。
- timeout number (オプション)追加バージョン: v1.50#
  
  ステップが完了するまでに許容される最大時間（ミリ秒単位）。指定されたタイムアウト時間内にステップが完了しない場合、test.step()メソッドはTimeoutErrorをスローします。デフォルトは0（タイムアウトなし）です。

戻り値

Promise<Object>#

詳細

このメソッドは、ステップコールバックによって返された値を返します。

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

test('test', async ({ page }) => {
  const user = await test.step('Log in', async () => {
    // ...
    return 'john';
  });
  expect(user).toBe('john');
});

デコレーター

TypeScriptのメソッドデコレーターを使用して、メソッドをステップに変換できます。デコレートされたメソッドの各呼び出しは、レポートでステップとして表示されます。

function step(target: Function, context: ClassMethodDecoratorContext) {
  return function replacementMethod(...args: any) {
    const name = this.constructor.name + '.' + (context.name as string);
    return test.step(name, async () => {
      return await target.call(this, ...args);
    });
  };
}

class LoginPage {
  constructor(readonly page: Page) {}

  @step
  async login() {
    const account = { username: 'Alice', password: 's3cr3t' };
    await this.page.getByLabel('Username or email address').fill(account.username);
    await this.page.getByLabel('Password').fill(account.password);
    await this.page.getByRole('button', { name: 'Sign in' }).click();
    await expect(this.page.getByRole('button', { name: 'View profile and more' })).toBeVisible();
  }
}

test('example', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login();
});

ボックス化

ステップ内で何かが失敗した場合、通常、失敗した正確なアクションを指すエラーが表示されます。例えば、次のログインステップを考えてみましょう。

async function login(page) {
  await test.step('login', async () => {
    const account = { username: 'Alice', password: 's3cr3t' };
    await page.getByLabel('Username or email address').fill(account.username);
    await page.getByLabel('Password').fill(account.password);
    await page.getByRole('button', { name: 'Sign in' }).click();
    await expect(page.getByRole('button', { name: 'View profile and more' })).toBeVisible();
  });
}

test('example', async ({ page }) => {
  await page.goto('https://github.com/login');
  await login(page);
});

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
  ... error details omitted ...

   8 |     await page.getByRole('button', { name: 'Sign in' }).click();
>  9 |     await expect(page.getByRole('button', { name: 'View profile and more' })).toBeVisible();
     |                                                                               ^
  10 |   });

上記のように、テストはステップ内部を指すエラーで失敗する可能性があります。エラーがその内部ではなく「login」ステップを強調表示するようにしたい場合は、boxオプションを使用してください。ボックス化されたステップ内部のエラーは、ステップの呼び出し箇所を指します。

async function login(page) {
  await test.step('login', async () => {
    // ...
  }, { box: true });  // Note the "box" option here.
}

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
  ... error details omitted ...

  14 |   await page.goto('https://github.com/login');
> 15 |   await login(page);
     |         ^
  16 | });

上記のような通常のステップデコレーターと同様に、ボックス化されたステップ用のTypeScriptデコレーターを作成することもできます。

function boxedStep(target: Function, context: ClassMethodDecoratorContext) {
  return function replacementMethod(...args: any) {
    const name = this.constructor.name + '.' + (context.name as string);
    return test.step(name, async () => {
      return await target.call(this, ...args);
    }, { box: true });  // Note the "box" option here.
  };
}

class LoginPage {
  constructor(readonly page: Page) {}

  @boxedStep
  async login() {
    // ....
  }
}

test('example', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.login();  // <-- Error will be reported on this line.
});

test.step.skip

追加バージョン: v1.50

test.test.step.skip

テストステップを「スキップ」としてマークして、その実行を一時的に無効にします。これは現在失敗しており、近いうちに修正が予定されているステップに便利です。Playwrightはそのステップを実行しません。testStepInfo.skip()も参照してください。

代わりにtestStepInfo.skip()を使用することをお勧めします。

使用方法

スキップされたステップを宣言でき、Playwrightはそれを実行しません。

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

test('my test', async ({ page }) => {
  // ...
  await test.step.skip('not yet ready', async () => {
    // ...
  });
});

引数

title string #

ステップ名。
body function():Promise<Object>#

ステップ本体。
options Object (オプション)
- box boolean (オプション)#
  
  レポートでステップをボックス化するかどうか。デフォルトはfalseです。ステップがボックス化されている場合、ステップの内部からスローされたエラーは、ステップの呼び出し箇所を指します。詳細については以下を参照してください。
- location Location (オプション)#
  
  テストレポートやトレースビューアでステップが表示されるカスタムロケーションを指定します。デフォルトでは、test.step()呼び出しのロケーションが表示されます。
- timeout number (オプション)#
  
  ステップが完了するまでの最大時間（ミリ秒単位）。デフォルトは0（タイムアウトなし）です。

戻り値

Promise<void>#

test.use

追加バージョン: v1.10

test.test.use

単一のテストファイルまたはtest.describe()グループで使用するオプションまたはフィクスチャを指定します。オプションを設定するのに最も便利で、例えば`locale`を設定して`context`フィクスチャを構成します。

使用方法

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

test.use({ locale: 'en-US' });

test('test with locale', async ({ page }) => {
  // Default context and page have locale as specified
});

引数

options TestOptions #

ローカルオプションを持つオブジェクト。

詳細

test.useはグローバルスコープまたは`test.describe`内で呼び出すことができます。`beforeEach`または`beforeAll`内で呼び出すとエラーになります。

関数を提供することで、フィクスチャをオーバーライドすることも可能です。

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

test.use({
  locale: async ({}, use) => {
    // Read locale from some configuration file.
    const locale = await fs.promises.readFile('test-locale', 'utf-8');
    await use(locale);
  },
});

test('test with locale', async ({ page }) => {
  // Default context and page have locale as specified
});

プロパティ

test.expect

追加バージョン: v1.10

test.test.expect

expect関数はテストアサーションを作成するために使用できます。テストアサーションについて詳しく読む。

使用方法

test('example', async ({ page }) => {
  await test.expect(page).toHaveTitle('Title');
});

型

オブジェクト

非推奨

test.describe.parallel

追加バージョン: v1.10

test.test.describe.parallel

非推奨

実行モードの推奨される設定方法については、test.describe.configure()を参照してください。

並行して実行できるテストグループを宣言します。デフォルトでは、単一のテストファイル内のテストは順次実行されますが、test.describe.parallel()を使用すると並行して実行できます。

test.describe.parallel(title, callback)
test.describe.parallel(callback)
test.describe.parallel(title, details, callback)

使用方法

test.describe.parallel('group', () => {
  test('runs in parallel 1', async ({ page }) => {});
  test('runs in parallel 2', async ({ page }) => {});
});

並行テストは別のプロセスで実行されるため、状態やグローバル変数を共有できないことに注意してください。各並行テストは、関連するすべてのフックを実行します。

タイトルを省略することもできます。

test.describe.parallel(() => {
  // ...
});

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.parallel()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属します。

test.describe.parallel.only

追加バージョン: v1.10

test.test.describe.parallel.only

非推奨

実行モードの推奨される設定方法については、test.describe.configure()を参照してください。

並行して実行できるフォーカスされたテストグループを宣言します。test.describe.parallel()に似ていますが、グループに焦点を当てます。フォーカスされたテストまたはスイートがある場合、それらすべてが実行され、他は実行されません。

test.describe.parallel.only(title, callback)
test.describe.parallel.only(callback)
test.describe.parallel.only(title, details, callback)

使用方法

test.describe.parallel.only('group', () => {
  test('runs in parallel 1', async ({ page }) => {});
  test('runs in parallel 2', async ({ page }) => {});
});

タイトルを省略することもできます。

test.describe.parallel.only(() => {
  // ...
});

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.parallel.only()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属します。

test.describe.serial

追加バージョン: v1.10

test.test.describe.serial

非推奨

実行モードの推奨される設定方法については、test.describe.configure()を参照してください。

常に直列で実行されるべきテストのグループを宣言します。テストのいずれかが失敗した場合、後続のすべてのテストはスキップされます。グループ内のすべてのテストはまとめて再試行されます。

注

直列実行は推奨されません。通常、テストを独立して実行できるように、隔離された状態にすることがより良い方法です。

test.describe.serial(title, callback)
test.describe.serial(title)
test.describe.serial(title, details, callback)

使用方法

test.describe.serial('group', () => {
  test('runs first', async ({ page }) => {});
  test('runs second', async ({ page }) => {});
});

タイトルを省略することもできます。

test.describe.serial(() => {
  // ...
});

引数

title string (オプション)#

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.serial()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属します。

test.describe.serial.only

追加バージョン: v1.10

test.test.describe.serial.only

非推奨

実行モードの推奨される設定方法については、test.describe.configure()を参照してください。

常に直列で実行されるべきフォーカスされたテストグループを宣言します。テストのいずれかが失敗した場合、後続のすべてのテストはスキップされます。グループ内のすべてのテストはまとめて再試行されます。フォーカスされたテストまたはスイートがある場合、それらすべてが実行され、他は実行されません。

注

直列実行は推奨されません。通常、テストを独立して実行できるように、隔離された状態にすることがより良い方法です。

test.describe.serial.only(title, callback)
test.describe.serial.only(title)
test.describe.serial.only(title, details, callback)

使用方法

test.describe.serial.only('group', () => {
  test('runs first', async ({ page }) => {
  });
  test('runs second', async ({ page }) => {
  });
});

タイトルを省略することもできます。

test.describe.serial.only(() => {
  // ...
});

引数

title string #

グループタイトル。
details Object (オプション)追加バージョン: v1.42#
- tag string | Array<string> (オプション)
- annotation Object | Array<Object> (オプション)
  - type string
  - description string (オプション)
詳細についてはtest.describe()を参照してください。
callback function #

test.describe.serial.only()を呼び出すとすぐに実行されるコールバックです。このコールバックに追加されたテストはすべてこのグループに属します。

メソッド​

test​

test.afterAll​

test.afterEach​

test.beforeAll​

test.beforeEach​

test.describe​

test.describe.configure​

test.describe.fixme​

test.describe.only​

test.describe.skip​

test.extend​

test.fail​

test.fail.only​

test.fixme​

test.info​

test.only​

test.setTimeout​

test.skip​

test.slow​

test.step​

test.step.skip​

test.use​

プロパティ​

test.expect​

非推奨​

test.describe.parallel​

test.describe.parallel.only​

test.describe.serial​

test.describe.serial.only​

メソッド

test

test.afterAll

test.afterEach

test.beforeAll

test.beforeEach

test.describe

test.describe.configure

test.describe.fixme

test.describe.only

test.describe.skip

test.extend

test.fail

test.fail.only

test.fixme

test.info

test.only

test.setTimeout

test.skip

test.slow

test.step

test.step.skip

test.use

プロパティ

test.expect

非推奨

test.describe.parallel

test.describe.parallel.only

test.describe.serial

test.describe.serial.only