Playwright で React の E2E テストをしたい
taichi fukumotoPlaywright の調査
React (Next.js) の E2E テストとして Playwright を導入予定のため、調査のメモを残す
▼ Playwright 公式ドキュメント
▼ Playwright GitHub リポジトリ
taichi fukumoto導入や初歩的な内容に関して参考になった記事
@playwright/test のインストールと初期設定コマンド、最低限覚えていた方がいい Playwright の関数についての説明がある。簡単なテスト例もあり参考になる。
こちらも初歩的な Playwright を用いた React のテスト例がわかる。step を用いてテストをステップ分けする方法などが参考になる。
サードパーティ製のレポート出力ライブラリについての紹介もある。
Playwirght の API について網羅的に紹介がある。重要なものはほとんど紹介があると思う。
taichi fukumotoAssertions について
@playwright/test で使用可能なアサーションについては以下のドキュメントにまとめてある。
以下ドキュメントの和訳を行っていく。
Playwright Test は、テストアサーションに expect ライブラリを使用します。このライブラリは、
toEqual,toContain,toMatch,toMatchSnapshotなどの多くのマッチャーを提供します。expect(success).toBeTruthy();
JEST の expect が使用されているようだ。
Playwright はまた、予想される条件が満たされるまで待機する便利な非同期マッチャーを使用して拡張します。次の例を検討してください。
await expect(page.locator('.status')).toHaveText('Submitted');
Playwright Test は、フェッチされたノードに
"Submitted"テキストが含まれるまで、セレクター.statusを使用してノードを再テストします。条件が満たされるまで、またはタイムアウトに達するまで、ノードを再取得して何度もチェックします。このタイムアウトを渡すか、テスト構成のtestConfig.expect値を介して一度構成することができます。
デフォルトでは、アサーションのタイムアウトは 5 秒に設定されています。さまざまなタイムアウトの詳細をご覧ください。
Playwright で使用できるアサーションを、以下に挙げる
- Negating Matchers
- Soft Assertions
- Custom Expect Message
- Polling
- expect(locator).toBeChecked([options])
- expect(locator).toBeDisabled([options])
- expect(locator).toBeEditable([options])
- expect(locator).toBeEmpty([options])
- expect(locator).toBeEnabled([options])
- expect(locator).toBeFocused([options])
- expect(locator).toBeHidden([options])
- expect(locator).toBeVisible([options])
- expect(locator).toContainText(expected[, options])
- expect(locator).toHaveAttribute(name, value[, options])
- expect(locator).toHaveClass(expected[, options])
- expect(locator).toHaveCount(count[, options])
- expect(locator).toHaveCSS(name, value[, options])
- expect(locator).toHaveId(id[, options])
- expect(locator).toHaveJSProperty(name, value[, options])
- expect(locator).toHaveScreenshot(name[, options])
- expect(locator).toHaveScreenshot([options])
- expect(locator).toHaveText(expected[, options])
- expect(locator).toHaveValue(value[, options])
- expect(locator).toHaveValues(values[, options])
- expect(locator).not
- expect(page).toHaveScreenshot(name[, options])
- expect(page).toHaveScreenshot([options])
- expect(page).toHaveTitle(titleOrRegExp[, options])
- expect(page).toHaveURL(urlOrRegExp[, options])
- expect(page).not
- expect(apiResponse).toBeOK()
- expect(apiResponse).not
- expect(screenshot).toMatchSnapshot(name[, options])
- expect(screenshot).toMatchSnapshot([options])
taichi fukumotoNegating Matchers
一般に、マッチャーの前に
.notを追加することで、反対のことが真であると期待できます。
expect(value).not.toEqual(0);
await expect(locator).not.toContainText("some text");
Soft Assertions
デフォルトでは、アサーションに失敗するとテストの実行が終了します。ソフトアサーションに失敗してもテストの実行は終了しませんが、失敗したというマークはつきます。
// 失敗してもテストが止まらないようなチェックをいくつか作っておく
await expect.soft(page.locator('#status')).toHaveText('Success');
await expect.soft(page.locator('#eta')).toHaveText('1 day');
// さらにいろいろなことを確認するためにテストを続ける
await page.locator('#next-page').click();
await expect.soft(page.locator('#title')).toHaveText('Make another order');
テスト実行中のどの時点でも、ソフトアサーションの失敗があったかどうかを確認することができます。
// 失敗してもテストが止まらないようなチェックをいくつか作っておく
await expect.soft(page.locator('#status')).toHaveText('Success');
await expect.soft(page.locator('#eta')).toHaveText('1 day');
// ソフトアサーションに失敗した場合に、それ以上の実行を避ける
expect(test.info().errors).toHaveLength(0);
Custom Expect Message
次の例のように、
expect関数の 2 番目の引数としてカスタム エラー メッセージを指定できます。
await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
エラーは次のようになります。
Error: should be logged in
Call log:
- expect.toBeVisible with timeout 5000ms
- waiting for selector "text=Name"
2 |
3 | test('example test', async({ page }) => {
> 4 | await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
| ^
5 | });
6 |
同じことがソフト アサーションでも機能します。
expect.soft(value, 'my soft assertion').toBe(56);
Polling
expect.pollを使えば、任意の同期型期待値を非同期型のポーリング型期待値に変換することができます。
以下のメソッドは、与えられた関数がHTTPステータス200を返すまでポーリングします。
await expect.poll(async () => {
const response = await page.request.get('https://api.example.com');
return response.status();
}, {
// カスタムエラーメッセージ（オプション）
message: 'make sure API eventually succeeds', // custom error message
// 10秒間のポーリング。デフォルトは5秒。タイムアウトを無効にするには0を渡す。
timeout: 10000,
}).toBe(200);
expect(locator).not
- type: <LocatorAssertions>
アサーションが逆の条件をチェックするようにします。たとえば、このコードでは Locator が
"error"というテキストを含んでいないことをテストします。
await expect(locator).not.toContainText('error');
expect(locator).toBeChecked([options])
options?<Object>
checked?<boolean>timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator がチェックされた入力を指していることを確認する。
const locator = page.locator('.subscribe');
await expect(locator).toBeChecked();
expect(locator).toBeDisabled([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が無効な要素を指していることを確認する。
"disabled "属性を持つか、'aria-disabled'によって無効にされた要素は無効になります。"disabled"属性で無効にできるのは、HTMLbutton,input,select,textarea,option,optgroupなどのネイティブな制御要素だけであることに注意してください。その他の要素の"disabled"属性は、ブラウザによって無視されます。
const locator = page.locator('button.submit');
await expect(locator).toBeDisabled();
expect(locator).toBeEditable([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が編集可能な要素を指していることを確認する。
const locator = page.locator('input');
await expect(locator).toBeEditable();
expect(locator).toBeEmpty([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が空の編集可能な要素またはテキストを持たないDOMノードを指していることを確認する。
const locator = page.locator('div.warning');
await expect(locator).toBeEmpty();
expect(locator).toBeEnabled([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locatorが有効な要素を指していることを確認する。
const locator = page.locator('button.submit');
await expect(locator).toBeEnabled();
expect(locator).toBeFocused([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator がフォーカスされた DOM ノードを指すようにします。
const locator = page.locator('input');
await expect(locator).toBeFocused();
expect(locator).toBeHidden([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が hidden DOM ノード (visible の反対) を指すことを保証する。
const locator = page.locator('.my-element');
await expect(locator).toBeHidden();
expect(locator).toBeVisible([options])
options?<Object>
- timeout? <number> アサーションを再試行する時間。デフォルトは
TestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が可視の DOM ノードを指していることを確認する。
const locator = page.locator('.my-element');
await expect(locator).toBeVisible();
expect(locator).toContainText(expected[, options])
expected<string|RegExp|Array<string|RegExp>> 期待される部分文字列またはRegExp、あるいはそれらのリストです。options?<Object>
ignoreCase?<boolean>ignoreCaseオプションが指定された場合、対応する正規表現フラグより優先されます。timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeoutです。useInnerText?<boolean> DOMノードのテキストを取得する際に、element.textContentの代わりにelement.innerTextを使用するかどうか。- returns: <Promise<void>>
Locator が与えられたテキストを含む要素を指していることを確認します。値には正規表現を使用することもできます。
const locator = page.locator('.title');
await expect(locator).toContainText('substring');
await expect(locator).toContainText(/\d messages/);
array が期待値として渡される場合、要素のリスト全体がアサートされることに注意すること。
const locator = page.locator('list > .list-item');
await expect(locator).toContainText(['Text 1', 'Text 4', 'Text 5']);
expect(locator).toHaveAttribute(name, value[, options])
name<string> 属性名value<string|RegExp> 期待される属性値。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
Locator が指定された属性の要素を指していることを確認する。
const locator = page.locator('input');
await expect(locator).toHaveAttribute('type', 'text');
expect(locator).toHaveClass(expected[, options])
expected<string|RegExp|Array<string|RegExp>> 期待されるクラスまたはRegExp、あるいはそれらのリスト。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeoutです。- returns: <Promise<void>>
Locator が指定されたCSSクラスを持つ要素を指していることを確認します。これは完全一致か、緩和された正規表現を使用する必要があります。
<div class='selected row' id='component'></div>
const locator = page.locator('#component');
await expect(locator).toHaveClass(/selected/);
await expect(locator).toHaveClass('selected row');
array が期待値として渡される場合、要素のリスト全体がアサートされることに注意すること。
const locator = page.locator('list > .component');
await expect(locator).toHaveClass(['component', 'component selected', 'component']);
expect(locator).toHaveCount(count[, options])
count<number> 予想されるカウント数options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
Locator が正確な数の DOM ノードに解決されることを保証する。
const list = page.locator('list > .component');
await expect(list).toHaveCount(3);
expect(locator).toHaveCSS(name, value[, options])
name<string> CSS プロパティ名。value<string|RegExp> CSS プロパティ値。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
Locatorが、与えられた計算されたCSSスタイルを持つ要素に解決されることを保証する。
const locator = page.locator('button');
await expect(locator).toHaveCSS('display', 'flex');
expect(locator).toHaveId(id[, options])
id<string|RegExp> エレメントの id。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
Locator が指定された DOM Node ID を持つ要素を指していることを確認する。
const locator = page.locator('input');
await expect(locator).toHaveId('lastname');
expect(locator).toHaveJSProperty(name, value[, options])
name<string> プロパティ名。value<Object> プロパティ値。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
Locator が指定された JavaScript プロパティを持つ要素を指していることを確認します。このプロパティは、プリミティブ型でも、シリアライズ可能なJavaScriptオブジェクトでもよいことに注意してください。
const locator = page.locator('.component');
await expect(locator).toHaveJSProperty('loaded', true);
expect(locator).toHaveScreenshot(name[, options])
name<string|Array<string>> スクリーンショット名。
options?<Object>
animations?<"disabled"|"allow">"disabled"に設定すると、CSS アニメーション、CSS トランジション、ウェブアニメーションを停止します。アニメーションは継続時間によって異なる扱いを受ける
- 有限のアニメーションは、完了まで早送りされるので、
transitionendイベントが発生します。- 無限アニメーションは、初期状態にキャンセルされ、スクリーンショット後に再生されます。
デフォルトは"disabled"で、アニメーションを無効化される。
caret?<"hide"|"initial">"hide"に設定すると、スクリーンショットのテキストキャレットが非表示になります。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。
mask?<Array<Locator>> スクリーンショット撮影時にマスクされるロケーターを指定します。マスクされた要素は、そのバウンディングボックスを完全に覆うピンクのボックス（#FF00FF）でオーバーレイされます。
maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0 から 1 の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。#
maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。
omitBackground?<boolean> デフォルトの白い背景を隠し、透明度の高いスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalse。
scale?<"css"|"device">"css"に設定すると、スクリーンショットは、ページ上の各 css ピクセルごとに 1 ピクセルずつ表示されます。高 dpi デバイスでは、スクリーンショットを小さく保つことができます。"device"オプションを使用すると、各デバイスのピクセルごとに 1 ピクセルが生成されるため、高 dpi デバイスのスクリーンショットは 2 倍またはそれ以上の大きさになります。デフォルトは"css".
threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。returns: <Promise<void>>
この関数は、2つの連続したロケータのスクリーンショットが同じ結果を得るまで待機し、最後のスクリーンショットと期待値を比較します。
const locator = page.locator('button');
await expect(locator).toHaveScreenshot('image.png');
expect(locator).toHaveScreenshot([options])
options?<Object>
animations?<"disabled"|"allow">"disabled"に設定すると、CSS アニメーション、CSS トランジション、ウェブアニメーションを停止します。アニメーションは継続時間によって異なる扱いを受ける
- 有限のアニメーションは、完了まで早送りされるので、
transitionendイベントが発生します。- 無限アニメーションは、初期状態にキャンセルされ、スクリーンショット後に再生されます。
デフォルトは"disabled"で、アニメーションを無効化される。
caret?<"hide"|"initial">"hide"に設定すると、スクリーンショットのテキストキャレットが非表示になります。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。
mask?<Array<Locator>> スクリーンショット撮影時にマスクされるロケーターを指定します。マスクされた要素は、そのバウンディングボックスを完全に覆うピンクのボックス（#FF00FF）でオーバーレイされます。
maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0 から 1 の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。#
maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。
omitBackground?<boolean> デフォルトの白い背景を隠し、透明度の高いスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalse。
scale?<"css"|"device">"css"に設定すると、スクリーンショットは、ページ上の各 css ピクセルごとに 1 ピクセルずつ表示されます。高 dpi デバイスでは、スクリーンショットを小さく保つことができます。"device"オプションを使用すると、各デバイスのピクセルごとに 1 ピクセルが生成されるため、高 dpi デバイスのスクリーンショットは 2 倍またはそれ以上の大きさになります。デフォルトは"css".
threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。returns: <Promise<void>>
この関数は、2つの連続したロケータのスクリーンショットが同じ結果を得るまで待機し、最後のスクリーンショットと期待値を比較します。
const locator = page.locator('button');
await expect(locator).toHaveScreenshot();
１つ上のやつと何が違うのかわからない。引数が違うけど使い分けがあるのだろうか？
taichi fukumotoexpect(locator).toHaveText(expected[, options])
expected<string|RegExp|Array<string|RegExp>> 期待される部分文字列またはRegExp、あるいはそれらのリスト。options?<Object>
ignoreCase?<boolean>ignoreCaseオプションが指定された場合，対応する正規表現フラグより優先される。timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。useInnerText?<boolean> DOMノードのテキストを取得する際に、element.textContentの代わりにelement.innerTextを使用するかどうか。- returns: <Promise<void>>
Locator が与えられたテキストを持つ要素を指していることを確認する。値には正規表現を使用することもできます。
const locator = page.locator('list > .component');
await expect(locator).toHaveText(['Text 1', 'Text 2', 'Text 3']);
array が期待値として渡される場合、要素のリスト全体がアサートされることに注意すること。
const locator = page.locator('list > .component');
await expect(locator).toHaveText(['Text 1', 'Text 2', 'Text 3']);
expect(locator).toHaveValue(value[, options])
value<string|RegExp> 期待値。options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>#
Locatorが与えられた入力値を持つ要素を指していることを確認する。値には正規表現を使用することもできます。
const locator = page.locator('input[type=number]');
await expect(locator).toHaveValue(/[0-9]/);
expect(locator).toHaveValues(values[, options])
values<Array<string|RegExp>> 現在選択されている期待されるオプション。
options?<Object>timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>#
Locator が multi-select / combobox（つまりmultiple属性を持つ選択）を指し、指定された値が選択されることを確認する。
例えば、次のような要素があるとする。
<select id="favorite-colors" multiple>
<option value="R">Red</option>
<option value="G">Green</option>
<option value="B">Blue</option>
</select>
const locator = page.locator("id=favorite-colors");
await locator.selectOption(["R", "G"]);
await expect(locator).toHaveValues([/R/, /G/]);
expect(page).not
- type: <PageAssertions>
アサーションが逆の条件をチェックするようにします。たとえば、このコードではページの URL に
"error"が含まれていないことをテストします。
await expect(page).not.toHaveURL('error');
expect(page).toHaveScreenshot(name[, options])
name<string|Array<string>> スクリーンショット名。options?<Object>
animations?<"disabled"|"allow">"disabled"に設定すると、CSS アニメーション、CSS トランジション、および Web アニメーションを停止します。アニメーションは、その継続時間によって異なる扱いを受けます。
- 有限のアニメーションは、完了まで早送りされるので、
transitionendイベントが発生します。- 無限アニメーションは、初期状態にキャンセルされ、スクリーンショット後に再生されます。
デフォルトは "disabled "で、アニメーションを無効化する。caret?<"hide"|"initial">"hide"に設定すると、スクリーンショットのテキストキャレットが非表示になります。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。clip?<Object> 結果画像のクリッピングを指定するオブジェクト。以下のフィールドを持つ必要がある。
- x <number> クリップ領域の左上隅の x 座標。
- y <number> クリップ領域の左上隅の y 座標。
- width <number> クリップ領域の幅。
- height <number> クリップ領域の高さ。
fullPage?<boolean>trueの場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを取得します。デフォルトはfalseです。mask?<Array<Locator>> スクリーンショット撮影時にマスクされるロケーターを指定します。マスクされた要素は、そのバウンディングボックスを完全に覆うピンクのボックス#FF00FFでオーバーレイされます。maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0〜1の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。omitBackground?<boolean> デフォルトの白い背景を隠し、透明度の高いスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalseです。scale?<"css"|"device">"css"に設定すると、スクリーンショットは、ページ上の各 css ピクセルごとに 1 ピクセルずつ表示されます。高 dpi デバイスでは、スクリーンショットを小さく保つことができます。"device"オプションを使用すると、各デバイスのピクセルごとに 1 ピクセルが生成されるため、高 dpi デバイスのスクリーンショットは 2 倍またはそれ以上の大きさになります。デフォルトは"css".threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
この関数は、2つの連続したページのスクリーンショットが同じ結果になるまで待機し、最後のスクリーンショットと期待値を比較します。
await expect(page).toHaveScreenshot('image.png');
expect(page).toHaveScreenshot([options])
options?<Object>
animations?<"disabled"|"allow">"disabled"に設定すると、CSS アニメーション、CSS トランジション、および Web アニメーションを停止します。アニメーションは、その継続時間によって異なる扱いを受けます。
- 有限のアニメーションは、完了まで早送りされるので、
transitionendイベントが発生します。- 無限アニメーションは、初期状態にキャンセルされ、スクリーンショット後に再生されます。
デフォルトは "disabled "で、アニメーションを無効化する。caret?<"hide"|"initial">"hide"に設定すると、スクリーンショットのテキストキャレットが非表示になります。"initial"に設定すると、テキストキャレットの動作は変更されません。デフォルトは"hide"です。clip?<Object> 結果画像のクリッピングを指定するオブジェクト。以下のフィールドを持つ必要がある。
- x <number> クリップ領域の左上隅の x 座標。
- y <number> クリップ領域の左上隅の y 座標。
- width <number> クリップ領域の幅。
- height <number> クリップ領域の高さ。
fullPage?<boolean>trueの場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを取得します。デフォルトはfalseです。mask?<Array<Locator>> スクリーンショット撮影時にマスクされるロケーターを指定します。マスクされた要素は、そのバウンディングボックスを完全に覆うピンクのボックス#FF00FFでオーバーレイされます。maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0〜1の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。omitBackground?<boolean> デフォルトの白い背景を隠し、透明度の高いスクリーンショットをキャプチャできるようにします。jpeg画像には適用されません。デフォルトはfalseです。scale?<"css"|"device">"css"に設定すると、スクリーンショットは、ページ上の各 css ピクセルごとに 1 ピクセルずつ表示されます。高 dpi デバイスでは、スクリーンショットを小さく保つことができます。"device"オプションを使用すると、各デバイスのピクセルごとに 1 ピクセルが生成されるため、高 dpi デバイスのスクリーンショットは 2 倍またはそれ以上の大きさになります。デフォルトは"css".threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
この関数は、2つの連続したページのスクリーンショットが同じ結果になるまで待機し、最後のスクリーンショットと期待値を比較します。
await expect(page).toHaveScreenshot();
expect(page).toHaveTitle(titleOrRegExp[, options])
titleOrRegExp<string|RegExp> 期待されるタイトルまたは RegExp.options?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
ページが与えられたタイトルを持つことを確認する。
await expect(page).toHaveTitle(/.*checkout/);
expect(page).toHaveURL(urlOrRegExp[, options])
urlOrRegExp<string|RegExp> 期待されるURLの文字列またはRegExpoptions?<Object>
timeout?<number> アサーションを再試行する時間。デフォルトはTestConfig.expectのtimeout。- returns: <Promise<void>>
ページが与えられたURLにナビゲートされることを保証する。
await expect(page).toHaveURL(/.*checkout/);
expect(apiResponse).not
- type: <APIResponseAssertions>
アサーションが逆の条件をチェックする。たとえば、このコードではレスポンスステータスが成功でないことをテストする。
await expect(response).not.toBeOK();
expect(apiResponse).toBeOK()
- returns: <Promise<void>>
レスポンスステータスコードが [200...299] の範囲内であることを確認する。
await expect(response).toBeOK();
expect(screenshot).toMatchSnapshot(name[, options])
name<string|Array<string>> スクリーンショット名。options?<Object>
maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0〜1の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。- returns: <void>
渡された値（文字列またはBuffer）が、test snapshots ディレクトリに保存されている期待されるスナップショットに一致することを確認します。
// 基本的な使い方
expect(await page.screenshot()).toMatchSnapshot('landing-page.png');
// スナップショット比較をカスタマイズし、生成された名前を持つようにオプションを渡す。
expect(await page.screenshot()).toMatchSnapshot('landing-page.png', {
maxDiffPixels: 27, // allow no more than 27 different pixels.
});
// 画像マッチングの閾値を設定する。
expect(await page.screenshot()).toMatchSnapshot('landing-page.png', { threshold: 0.3 });
// ファイルパス・セグメントを渡すことで、スナップショット・ファイルに構造を持たせることができます。
expect(await page.screenshot()).toMatchSnapshot(['landing', 'step2.png']);
expect(await page.screenshot()).toMatchSnapshot(['landing', 'step3.png']);
expect(screenshot).toMatchSnapshot([options])
options?<Object>
maxDiffPixelRatio?<number> 総画素数に対する異なる画素の割合の許容値で、0〜1の間。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。maxDiffPixels?<number> 異なる可能性のあるピクセルの許容量。デフォルトはTestConfig.expectで設定可能。デフォルトでは未設定。threshold?<number> 比較した画像の同じピクセル間の、YIQ 色空間における許容可能な知覚的色差。デフォルトは 0.2。- returns: <void>
渡された値（文字列またはBuffer）が、test snapshots ディレクトリに保存されている期待されるスナップショットに一致することを確認します。
// 基本的な使い方で、ファイル名はテスト名に由来。
expect(await page.screenshot()).toMatchSnapshot();
// スナップショット比較をカスタマイズし、生成された名前を持つようにオプションを渡す。
expect(await page.screenshot()).toMatchSnapshot({
maxDiffPixels: 27, // allow no more than 27 different pixels.
});
// 画像マッチングの閾値とスナップショット名を設定する。
expect(await page.screenshot()).toMatchSnapshot({
name: 'landing-page.png',
threshold: 0.3,
});