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

アノテーション

はじめに​

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 を使用してテストをフィルタリングすることもできます。

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

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

たとえば、issue 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('http://localhost: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(),
  });

  // ...
});