メインコンテンツにスキップ

アノテーション

はじめに​

Playwrightは、テストレポートに表示されるタグとアノテーションをサポートしています。

独自のタグとアノテーションはいつでも追加できますが、Playwrightにはいくつかの組み込みのアノテーションがあります。

  • test.skip() はテストを無関係としてマークします。Playwrightはこのようなテストを実行しません。このアノテーションは、特定の構成でテストが適用できない場合に使用します。
  • test.fail() はテストを失敗としてマークします。Playwrightはこのテストを実行し、実際に失敗することを確認します。テストが失敗しない場合、Playwrightは不満を呈します。
  • test.fixme() はテストを失敗としてマークします。fail アノテーションとは対照的に、Playwrightはこのテストを実行しません。テストの実行が遅い場合やクラッシュする場合に fixme を使用します。
  • test.slow() はテストを遅いとしてマークし、テストのタイムアウトを3倍にします。

アノテーションは、単一のテストまたはテストのグループに追加できます。

組み込みのアノテーションは条件付きにすることができます。その場合、条件が真の場合に適用され、テストフィクスチャに依存する場合があります。同じテストに複数のアノテーションを付けることができ、異なる構成で適用される可能性もあります。

テストにフォーカスする​

一部のテストにフォーカスすることができます。フォーカスされたテストがある場合、それらのテストのみが実行されます。

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

テストをスキップする​

テストをスキップ済みとしてマークします。

test.skip('skip this test', async ({ page }) => {
  // This test is not run
});

条件付きでテストをスキップする​

条件に基づいて特定のテストをスキップできます。

test('skip this test', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'Still working on it');
});

テストをグループ化する​

テストをグループ化して、論理的な名前を付けたり、before/afterフックをそのグループにスコープしたりできます。

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

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

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

テストにタグを付ける​

テストを @fast または @slow のようにタグ付けし、テストレポートでタグによってフィルタリングしたい場合があります。または、特定のタグを持つテストのみを実行したい場合もあります。

テストにタグを付けるには、テストを宣言するときに追加の詳細オブジェクトを提供するか、テストタイトルに @-トークンを追加します。タグは @ 記号で始まる必要があることに注意してください。

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

test('test login page', {
  tag: '@fast',
}, async ({ page }) => {
  // ...
});

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

グループ内のすべてのテストにタグを付けたり、複数のタグを提供したりすることもできます。

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

test.describe('group', {
  tag: '@report',
}, () => {
  test('test report header', async ({ page }) => {
    // ...
  });

  test('test full report', {
    tag: ['@slow', '@vrt'],
  }, async ({ page }) => {
    // ...
  });
});

特定のタグを持つテストを、--grep コマンドラインオプションで実行できるようになりました。

npx playwright test --grep @fast

または、反対に、特定のタグを持つテストをスキップしたい場合は、

npx playwright test --grep-invert @fast

いずれかのタグを含むテスト（論理 OR 演算子）を実行するには

npx playwright test --grep "@fast|@slow"

または、正規表現の先読みを使用して、両方のタグを含むテスト（論理 AND 演算子）を実行するには

npx playwright test --grep "(?=.*@fast)(?=.*@slow)"

testConfig.grep および testProject.grep を介して、設定ファイルでテストをフィルタリングすることもできます。

テストにアノテーションを付ける​

タグよりも実体のあるものでテストにアノテーションを付けたい場合は、テストを宣言するときにそれを行うことができます。アノテーションには、より多くのコンテキストとレポーターAPIで利用できる type と description があります。Playwrightの組み込みHTMLレポーターは、type が _ 記号で始まるものを除くすべてのアノテーションを表示します。

たとえば、イシューのURLでテストにアノテーションを付けるには

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

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

グループ内のすべてのテストにアノテーションを付けたり、複数のアノテーションを提供したりすることもできます。

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

test.describe('report tests', {
  annotation: { type: 'category', description: 'report' },
}, () => {
  test('test report header', async ({ page }) => {
    // ...
  });

  test('test full report', {
    annotation: [
      { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
      { type: 'performance', description: 'very slow test!' },
    ],
  }, async ({ page }) => {
    // ...
  });
});

テストのグループを条件付きでスキップする​

たとえば、コールバックを渡すことで、Chromiumでのみテストのグループを実行できます。

example.spec.ts

test.describe('chromium only', () => {
  test.skip(({ browserName }) => browserName !== 'chromium', 'Chromium only!');

  test.beforeAll(async () => {
    // This hook is only run in Chromium.
  });

  test('test 1', async ({ page }) => {
    // This test is only run in Chromium.
  });

  test('test 2', async ({ page }) => {
    // This test is only run in Chromium.
  });
});

beforeEach フックでfixmeを使用する​

beforeEach フックの実行を回避するには、アノテーションをフック自体に配置できます。

example.spec.ts

test.beforeEach(async ({ page, isMobile }) => {
  test.fixme(isMobile, 'Settings page does not work in mobile yet');

  await page.goto('https://:3000/settings');
});

test('user profile', async ({ page }) => {
  await page.getByText('My Profile').click();
  // ...
});

ランタイムアノテーション​

テストがすでに実行されている間に、test.info().annotations にアノテーションを追加できます。

example.spec.ts

test('example test', async ({ page, browser }) => {
  test.info().annotations.push({
    type: 'browser version',
    description: browser.version(),
  });

  // ...
});