スナップショット

スナップショットテストは、コンポーネントやロジックの幅広い側面を同時にアサートするのに非常に役立ちます。WebdriverIOでは、任意のオブジェクトだけでなく、WebElementのDOM構造やWebdriverIOコマンドの結果のスナップショットを撮ることができます。

他のテストフレームワークと同様に、WebdriverIOは指定された値のスナップショットを取得し、それをテストと一緒に保存された参照スナップショットファイルと比較します。2つのスナップショットが一致しない場合、テストは失敗します。変更が予期しないか、参照スナップショットを結果の新しいバージョンに更新する必要があります。

クロスプラットフォーム対応

これらのスナップショット機能は、Node.js環境内でのエンドツーエンドテストの実行だけでなく、ブラウザやモバイルデバイスでのユニットテストおよびコンポーネントテストの実行にも利用できます。

スナップショットを使用する

値をスナップショットするには、expect() APIからtoMatchSnapshot()を使用できます。

import { browser, expect } from '@wdio/globals'

it('can take a DOM snapshot', () => {
    await browser.url('http://guinea-pig.webdriver.io/')
    await expect($('.findme')).toMatchSnapshot()
})

このテストを初めて実行すると、WebdriverIOは次のようなスナップショットファイルを作成します

// Snapshot v1

exports[`main suite 1 > can take a DOM snapshot 1`] = `"<h1 class="findme">Test CSS Attributes</h1>"`;

スナップショットの成果物は、コードの変更とともにコミットし、コードレビュープロセスの一部としてレビューする必要があります。その後のテスト実行では、WebdriverIOはレンダリングされた出力を以前のスナップショットと比較します。それらが一致すると、テストは合格します。一致しない場合は、テストランナーが修正する必要があるコードのバグを発見したか、実装が変更され、スナップショットを更新する必要があります。

スナップショットを更新するには、wdioコマンドに-sフラグ（または--updateSnapshot）を渡します。例：

npx wdio run wdio.conf.js -s

注：複数のブラウザで並行してテストを実行する場合、作成および比較されるスナップショットは1つだけです。機能ごとに個別のスナップショットが必要な場合は、問題を提起し、ユースケースをお知らせください。

インラインスナップショット

同様に、toMatchInlineSnapshot()を使用して、テストファイル内にスナップショットをインラインで保存できます。

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

スナップショットファイルを作成する代わりに、Vitestはテストファイルを直接変更して、スナップショットを文字列として更新します

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
    const elem = $('.container')
    await expect(elem.getCSSProperty()).toMatchInlineSnapshot(`
        {
            "parsed": {
                "alpha": 0,
                "hex": "#000000",
                "rgba": "rgba(0,0,0,0)",
                "type": "color",
            },
            "property": "background-color",
            "value": "rgba(0,0,0,0)",
        }
    `)
})

これにより、異なるファイル間をジャンプせずに、予期される出力を直接確認できます。

ビジュアルスナップショット

特にDOM構造が大きすぎたり、動的な要素のプロパティが含まれている場合は、要素のDOMスナップショットを撮ることは最善の方法ではない可能性があります。このような場合は、要素のビジュアルスナップショットに依存することをお勧めします。

ビジュアルスナップショットを有効にするには、セットアップに@wdio/visual-serviceを追加します。ビジュアルテストのドキュメントにある設定手順に従うことができます。

次に、toMatchElementSnapshot()を使用してビジュアルスナップショットを撮ることができます。例：

import { expect, $ } from '@wdio/globals'

it('can take inline DOM snapshots', () => {
  const elem = $('.container')
  await expect(elem.getCSSProperty()).toMatchInlineSnapshot()
})

画像はベースラインディレクトリに保存されます。詳細については、ビジュアルテストをご覧ください。