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 (オプション)
    
    オプションの注釈の説明。例：issue の 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() グループ内で呼び出された場合、グループ内のすべてのテストの前に実行されます。

test.afterAll() を使用して、beforeAll で設定されたリソースを破棄できます。

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 オブジェクトにもアクセスできます。たとえば、テストを開始する前にページをナビゲートできます。

test.afterEach() を使用して、beforeEach で設定されたリソースを破棄できます。

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 }) => {});

テストを順番に実行し、最初から再試行します。

注意
順番に実行することはお勧めしません。通常、テストを独立させて、独立して実行できるようにする方が適切です。
```
// 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.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 (オプション)バージョン 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.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 (オプション)#

テストタイトル。
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.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 (オプション)#

テストタイトル。
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

現在失敗していて、近い将来の修正が計画されているステップなど、テストステップを「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