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

PageAssertions

PageAssertions クラスは、テストにおける Page の状態についてアサーションを行うために使用できるアサーションメソッドを提供します。

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

test('navigates to login', async ({ page }) => {
  // ...
  await page.getByText('Sign in').click();
  await expect(page).toHaveURL(/.*\/login/);
});

メソッド​

toHaveScreenshot(name)​

追加日: v1.23 pageAssertions.toHaveScreenshot(name)

この関数は、2つの連続したページのスクリーンショットが同じ結果になるまで待機し、最後のスクリーンショットと期待値を比較します。

使用法

await expect(page).toHaveScreenshot('image.png');

スクリーンショットのアサーションは、Playwright テストランナーでのみ機能することに注意してください。

引数

  • name string | Array<string>#

    スナップショット名。

  • options Object (optional)

    • animations "disabled" | "allow" (optional)#

      "disabled"に設定すると、CSSアニメーション、CSSトランジション、Webアニメーションが停止します。アニメーションは期間によって異なる扱いを受けます。

      • 有限のアニメーションは完了まで早送りされ、transitionendイベントが発生します。
      • 無限のアニメーションは初期状態にキャンセルされ、スクリーンショットの後に再生されます。

      デフォルトはアニメーションを無効にする "disabled" です。

    • caret "hide" | "initial" (optional)#

      "hide"に設定すると、スクリーンショットはテキストキャレットを非表示にします。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。

    • clip Object (optional)#

      • x number

        クリップ領域の左上隅のx座標

      • y number

        クリップ領域の左上隅のy座標

      • width number

        クリッピング領域の幅

      • height number

        クリッピング領域の高さ

      結果の画像のクリッピングを指定するオブジェクト。

    • fullPage boolean (optional)#

      trueの場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを撮ります。デフォルトは false です。

    • mask Array<Locator> (optional)#

      スクリーンショットを撮る際にマスクすべきロケーターを指定します。マスクされた要素は、その境界ボックスを完全に覆うピンク色のボックス #FF00FF（maskColor でカスタマイズ可能）で重ねて表示されます。マスクは非表示の要素にも適用されます。それを無効にするには、可視要素のみのマッチングを参照してください。

    • maskColor string (オプション)追加されたバージョン: v1.35#

      CSSカラー形式で、マスクされた要素のオーバーレイボックスの色を指定します。デフォルトの色はピンク#FF00FFです。

    • maxDiffPixelRatio number (optional)#

      異なるピクセルが総ピクセル数に対して許容される比率で、0 から 1 の間です。デフォルトは TestConfig.expect で設定可能です。デフォルトでは未設定です。

    • maxDiffPixels number (optional)#

      異なる可能性がある許容されるピクセル数です。デフォルトは TestConfig.expect で設定可能です。デフォルトでは未設定です。

    • omitBackground boolean (optional)#

      デフォルトの白い背景を非表示にし、透過性のあるスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalseです。

    • scale "css" | "device" (optional)#

      "css"に設定すると、スクリーンショットはページ上の各CSSピクセルにつき1ピクセルになります。高DPIデバイスの場合、これによりスクリーンショットが小さく保たれます。"device"オプションを使用すると、各デバイスピクセルにつき1ピクセルが生成されるため、高DPIデバイスのスクリーンショットは2倍以上大きくなります。

      デフォルトは "css" です。

    • stylePath string | Array<string> (オプション)追加日: v1.41#

      スクリーンショットを撮る際に適用するスタイルシートを含むファイル名です。ここで動的な要素を隠したり、要素を非表示にしたり、プロパティを変更したりして、再現性のあるスクリーンショットを作成するのに役立ちます。このスタイルシートは Shadow DOM を貫通し、内部フレームに適用されます。

    • threshold number (optional)#

      比較される画像内の同じピクセル間の、YIQ 色空間における許容される知覚的な色差で、ゼロ（厳密）から1（緩やか）の間です。デフォルトは TestConfig.expect で設定可能です。デフォルトは 0.2 です。

    • timeout number (optional)#

      アサーションを再試行するミリ秒単位の時間です。デフォルトは TestConfig.expect の timeout です。

戻り値

toHaveScreenshot(options)​

追加日: v1.23 pageAssertions.toHaveScreenshot(options)

この関数は、2つの連続したページのスクリーンショットが同じ結果になるまで待機し、最後のスクリーンショットと期待値を比較します。

使用法

await expect(page).toHaveScreenshot();

スクリーンショットのアサーションは、Playwright テストランナーでのみ機能することに注意してください。

引数

  • options Object (optional)

    • animations "disabled" | "allow" (optional)#

      "disabled"に設定すると、CSSアニメーション、CSSトランジション、Webアニメーションが停止します。アニメーションは期間によって異なる扱いを受けます。

      • 有限のアニメーションは完了まで早送りされ、transitionendイベントが発生します。
      • 無限のアニメーションは初期状態にキャンセルされ、スクリーンショットの後に再生されます。

      デフォルトはアニメーションを無効にする "disabled" です。

    • caret "hide" | "initial" (optional)#

      "hide"に設定すると、スクリーンショットはテキストキャレットを非表示にします。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。

    • clip Object (optional)#

      • x number

        クリップ領域の左上隅のx座標

      • y number

        クリップ領域の左上隅のy座標

      • width number

        クリッピング領域の幅

      • height number

        クリッピング領域の高さ

      結果の画像のクリッピングを指定するオブジェクト。

    • fullPage boolean (optional)#

      trueの場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを撮ります。デフォルトは false です。

    • mask Array<Locator> (optional)#

      スクリーンショットを撮る際にマスクすべきロケーターを指定します。マスクされた要素は、その境界ボックスを完全に覆うピンク色のボックス #FF00FF（maskColor でカスタマイズ可能）で重ねて表示されます。マスクは非表示の要素にも適用されます。それを無効にするには、可視要素のみのマッチングを参照してください。

    • maskColor string (オプション)追加されたバージョン: v1.35#

      CSSカラー形式で、マスクされた要素のオーバーレイボックスの色を指定します。デフォルトの色はピンク#FF00FFです。

    • maxDiffPixelRatio number (optional)#

      異なるピクセルが総ピクセル数に対して許容される比率で、0 から 1 の間です。デフォルトは TestConfig.expect で設定可能です。デフォルトでは未設定です。

    • maxDiffPixels number (optional)#

      異なる可能性がある許容されるピクセル数です。デフォルトは TestConfig.expect で設定可能です。デフォルトでは未設定です。

    • omitBackground boolean (optional)#

      デフォルトの白い背景を非表示にし、透過性のあるスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalseです。

    • scale "css" | "device" (optional)#

      "css"に設定すると、スクリーンショットはページ上の各CSSピクセルにつき1ピクセルになります。高DPIデバイスの場合、これによりスクリーンショットが小さく保たれます。"device"オプションを使用すると、各デバイスピクセルにつき1ピクセルが生成されるため、高DPIデバイスのスクリーンショットは2倍以上大きくなります。

      デフォルトは "css" です。

    • stylePath string | Array<string> (オプション)追加日: v1.41#

      スクリーンショットを撮る際に適用するスタイルシートを含むファイル名です。ここで動的な要素を隠したり、要素を非表示にしたり、プロパティを変更したりして、再現性のあるスクリーンショットを作成するのに役立ちます。このスタイルシートは Shadow DOM を貫通し、内部フレームに適用されます。

    • threshold number (optional)#

      比較される画像内の同じピクセル間の、YIQ 色空間における許容される知覚的な色差で、ゼロ（厳密）から1（緩やか）の間です。デフォルトは TestConfig.expect で設定可能です。デフォルトは 0.2 です。

    • timeout number (optional)#

      アサーションを再試行するミリ秒単位の時間です。デフォルトは TestConfig.expect の timeout です。

戻り値

toHaveTitle​

追加バージョン: v1.20 pageAssertions.toHaveTitle

ページに指定されたタイトルがあることを保証します。

使用法

await expect(page).toHaveTitle(/.*checkout/);

引数

  • titleOrRegExp string | RegExp追加: v1.18#

    期待されるタイトルまたは正規表現。

  • options Object (optional)

    • timeout number (optional)追加: v1.18#

      アサーションを再試行するミリ秒単位の時間です。デフォルトは TestConfig.expect の timeout です。

戻り値

toHaveURL​

追加バージョン: v1.20 pageAssertions.toHaveURL

ページが指定されたURLに移動したことを保証します。

使用法

// Check for the page URL to be 'https://playwright.dokyumento.jp/docs/intro' (including query string)
await expect(page).toHaveURL('https://playwright.dokyumento.jp/docs/intro');

// Check for the page URL to contain 'doc', followed by an optional 's', followed by '/'
await expect(page).toHaveURL(/docs?\//);

// Check for the predicate to be satisfied
// For example: verify query strings
await expect(page).toHaveURL(url => {
  const params = url.searchParams;
  return params.has('search') && params.has('options') && params.get('id') === '5';
});

引数

  • url string | RegExp | function(URL):boolean追加: v1.18#

    URL オブジェクトを受け取る予期される URL 文字列、正規表現、または述語。これらはマッチさせるべき URL です。コンテキストオプション経由で baseURL が提供され、url 引数が文字列の場合、2つの値は new URL() コンストラクタを介して結合され、現在のブラウザ URL との比較に使用されます。

  • options Object (optional)

    • ignoreCase boolean (optional)追加バージョン: v1.44#

      大文字と小文字を区別しないマッチングを実行するかどうか。指定されている場合、ignoreCase オプションは対応する正規表現パラメータよりも優先されます。提供された述語はこのフラグを無視します。

    • timeout number (optional)追加: v1.18#

      アサーションを再試行するミリ秒単位の時間です。デフォルトは TestConfig.expect の timeout です。

戻り値

プロパティ​

not​

追加バージョン: v1.20 pageAssertions.not

アサーションが反対の条件をチェックするようにします。例えば、このコードはページURLに"error"が含まれていないことをテストします。

await expect(page).not.toHaveURL('error');

使用法

expect(page).not

タイプ