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

アノテーション

はじめに​

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が_記号で始まるものを除くすべての​​アノテーションを表示します。

例えば、テストに課題の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(),
  });

  // ...
});