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 (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - type string
    
    アノテーションタイプ（例：'issue'）。
  - description string (オプション)
    
    オプションのアノテーション記述（例：イシューのURL）。
追加のテスト詳細。
body function(Fixtures, TestInfo)#

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

test.afterAll

追加バージョン: v1.10

test.test.afterAll

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

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

使用法

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

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

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

引数

title string (optional)追加バージョン: 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 (optional)追加バージョン: v1.38#

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

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

詳細

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

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

test.beforeAll

追加バージョン: v1.10

test.test.beforeAll

すべてのテストの前に、ワーカープロセスごとに1回実行される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 (optional)追加バージョン: 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 (optional)追加バージョン: 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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)
- mode "default" | "parallel" | "serial" (optional)#
  
  実行モード。実行モードについてはこちらをご覧ください。
- retries number (optional)追加バージョン: v1.28#
  
  各テストの再試行回数。
- timeout number (optional)追加バージョン: 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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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.fail(callback, description)呼び出しで、ファイルまたはtest.describe()グループ内のすべてのテストを、条件に基づいて「失敗すべき」とマークできます。

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 (optional)追加バージョン: v1.42#

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

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

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

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

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

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 (optional)#

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

フィクスチャを含むオブジェクトとオプションの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.fixme(callback, description)呼び出しで、ファイルまたはtest.describe()グループ内のすべてのテストを、条件に基づいて「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 (optional)#

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

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

条件がtrueの場合、テストは「fixme」とマークされます。
callback function(Fixtures):boolean (optional)#

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

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

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

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

test.setTimeout

追加バージョン: v1.10

test.test.setTimeout

テストのタイムアウトを変更します。0はタイムアウトなしを意味します。様々なタイムアウトについて詳しくはこちら。

現在実行中のテストのタイムアウトは、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.skip(callback, description)呼び出しで、ファイルまたはtest.describe()グループ内のすべてのテストを、条件に基づいてスキップできます。

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 (optional)#

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

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

条件がtrueの場合、テストは「スキップされた」とマークされます。
callback function(Fixtures):boolean (optional)#

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

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

test.slow

追加バージョン: v1.10

test.test.slow

テストを「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 (optional)#

条件がtrueの場合、テストは「slow」とマークされます。
callback function(Fixtures):boolean (optional)#

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

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

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 (optional)
- box boolean (optional)追加バージョン: v1.39#
  
  レポートでステップをボックス化するかどうか。デフォルトはfalseです。ステップがボックス化されている場合、ステップ内部からスローされたエラーはステップ呼び出しサイトを指します。詳細については以下を参照してください。
- location Location (オプション)追加日: v1.48#
  
  テストレポートとトレースビューアでステップを表示するカスタムロケーションを指定します。デフォルトでは、test.step()呼び出しのロケーションが表示されます。
- timeout number (optional)追加バージョン: 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 |   });

上記のように、テストはステップ内部を指すエラーで失敗する可能性があります。エラーがその内部ではなく「ログイン」ステップを強調表示するようにしたい場合は、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

テストステップを「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 (optional)
- box boolean (optional)#
  
  レポートでステップをボックス化するかどうか。デフォルトはfalseです。ステップがボックス化されている場合、ステップ内部からスローされたエラーはステップ呼び出しサイトを指します。詳細については以下を参照してください。
- location Location (optional)#
  
  テストレポートとトレースビューアでステップを表示するカスタムロケーションを指定します。デフォルトでは、test.step()呼び出しのロケーションが表示されます。
- timeout number (optional)#
  
  ステップが完了するまでの最大時間（ミリ秒単位）。デフォルトは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');
});

タイプ

Object

非推奨

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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)#

グループタイトル。
details Object (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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 (optional)追加バージョン: v1.42#
- tag string | Array<string> (optional)
- annotation Object | Array<Object> (optional)
  - 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