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

コンポーネント、エンドツーエンド、モバイルテストのためのDOMおよびビジュアルスナップショットテストの導入

·6分で読めます
WebdriverIO Team
WebdriverIOチーム

WebdriverIOが提供するすべてのテスト環境をサポートする共通のプリミティブセットを使用した、DOMおよびビジュアルスナップショットテストのサポートを発表できることを嬉しく思います。私たちのビジョンは、常にワークフローを簡素化する包括的で多用途なテストツールを提供することでした。このアップデートは、ユニットテストとビジュアルテストのための「スイスアーミーナイフ」を作成し、プラットフォーム全体の多様な要件に対応し、ネイティブモバイルアプリケーションへのサポートを拡張し、テストプロセスをより効率的かつシームレスにすることを目指しています。

DOMとビジュアルスナップショットプリミティブの両方が、コンポーネントとユニットテスト、エンドツーエンドテスト、およびモバイルWebテストを実行する際に利用できるようになります。それに加えて、同じビジュアルスナップショットプリミティブがネイティブモバイルアプリケーショントテストにも利用できるようになります。

ビジュアル学習者の方のために、YouTubeチャンネルでWebdriverIOのチュートリアルも公開しました。

これらの強力な機能のそれぞれについて詳しく見ていきましょう。

DOMまたはオブジェクトのスナップショット​

DOMの状態、大きなオブジェクト、またはUI要素の内容を評価するために、アプリケーションまたはコンポーネントの動作を変更した場合に、値をテストにコピーして手動で更新する傾向があります。

テキストベースのスナップショットを使用すると、これをWebdriverIOに処理させることができます。たとえば、ブラウザでReactコンポーネントの状態を確認したい場合、次のようにできます。

/src/component.test.tsx
import { expect, $ } from '@wdio/globals'
import { render } from '@testing-library/react'

function App() {
    const [theme, setTheme] = useState('light')

    const toggleTheme = () => {
        const nextTheme = theme === 'light' ? 'dark' : 'light'
        setTheme(nextTheme)
    }

    return <button onClick={toggleTheme}>
        Current theme: {theme}
    </button>
}

describe('React Component Testing', () => {
    it('supports snapshot tests', async () => {
        const { container } = render(<App />)
        await expect(container).toMatchSnapshot()
        await $('button').click()
        await expect(container).toMatchSnapshot()
    })
})

WebdriverIOは、コンポーネントのDOM構造を自動的に取得し、次の内容を含むcomponent.test.tsx.snapというスナップショットファイルを、テストの隣にある/src/__snapshots__ディレクトリに保存します。

// Snapshot v1

exports[`React Component Testing > supports snapshot tests 1`] = `"<div><button>Current theme: light</button></div>"`;

exports[`React Component Testing > supports snapshot tests 2`] = `"<div><button>Current theme: dark</button></div>"`;

スナップショットをテストの一部として保持したい場合は、代わりにtoMatchInlineSnapshotを使用できます。

await expect(container).toMatchInlineSnapshot()

最初のテストを実行した後、WebdriverIOはテストに変更を加え、スナップショットをインラインで入力します。

await expect(container).toMatchInlineSnapshot(`"<div><button>Current theme: light</button></div>"`)

コンポーネントに変更を加えてすべてのスナップショットに影響を与える場合は、次のコマンドを呼び出して、一度にすべてを更新できます。

npx wdio run wdio.conf.ts --updateSnapshots
# or
npx wdio run wdio.conf.ts -s

これにより、テストの保守が非常に簡単になります。同じことが、CSSプロパティや要素のテキストコンテンツなど、他のすべてのタイプのオブジェクトにも当てはまります。すべてをスナップショットに変換して、アサーションを簡素化し、テストを簡素化できます。これにより、たとえば、多くのアサーションを1つにまとめることで、テストを高速化することもできます。

const elem = $('#alertBar')
await expect(elem).toHaveAttribute('data-alert')
await expect(elem).toHaveClassName('success')
await expect(elem).toHaveText('You logged into a secure area!')

今では単一の

await expect($('#alertBar')).toMatchSnapshot()
/**
 * stores the following into a snapshot file:
 *
 * <div data-alert="" id="flash" class="flash success">
 *   You logged into a secure area!
 *   <a href="#" class="close">×</a>
 * </div>
 */

DOMのスナップショットを作成することが最も一般的なユースケースかもしれませんが、シリアル化可能なすべてのタイプのデータ構造のスナップショットを作成できます。例：

// the visible content of an element
await expect($('elem').getText()).toMatchSnapshot()
// or of an serializable object
await expect($('elem').getCSSProperty('color')).toMatchSnapshot()

DOMとオブジェクトベースのスナップショットの詳細については、スナップショットガイドをご覧ください。

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

要素構造とその属性のスナップショットを取得することは素晴らしいことであり、強力であるかもしれませんが、重要な注意点があります。要素にsuccessというクラス名があることをテストしている場合でも、アラートが緑色であることを保証するものではありません！

これらの理由から、ビジュアルテストは非常に人気のあるツールになりました。要素がどのようにレンダリングされるか、どの色でレンダリングされるかが含まれており、たとえば、他の要素によってオーバーレイされていないことを確認できるからです。ビジュアルスナップショットの取得は非常に似たように機能します。次のようにできます。

  • 画面全体のビジュアルスナップショットを取得する 
    await expect(browser).toMatchScreenSnapshot('partialPage')
  • 要素のビジュアルスナップショットを取得する 
    await expect($('#element-id')).toMatchElementSnapshot('firstButtonElement')
  • ページ全体のsnapshotを取得する 
    await expect(browser).toMatchFullPageSnapshot('fullPage')
  • または、ページのタブ機能を含むページスナップショットを取得する 
    await expect(browser).toMatchTabbablePageSnapshot('check-tabbable')

WebdriverIOは、これらのビジュアルスナップショットを、テストの隣の__snapshots__ディレクトリ内のテキストベースのスナップショットの隣に便利に保存します。

テキストベースのスナップショットテストはWebdriverIOに組み込まれていますが、次の方法でビジュアルスナップショット機能をすべて有効にするには、サービスをインストールする必要があります。

npm i --save-dev @wdio/visual-service

ビジュアルテストモジュールの最新リリースでは、モバイルネイティブアプリスナップショットテストがさらに改善されました。

モバイルネイティブアプリスナップショットテスト​

モジュールは、モバイルネイティブアプリ用のtoMatchElementSnapshotおよびtoMatchScreenSnapshotマッチャーをサポートするようになりました。テストコンテキスト（web、webview、またはnative_app）を自動的に検出して、ワークフローを合理化します。

ビジュアルサービスの主な機能​

WebdriverIOを使用したビジュアルテストをユニークなものにしている機能のいくつかは次のとおりです。

  • 画面/要素/フルページ画面をベースラインに対して保存または比較します
  • ベースラインがない場合は、自動的にベースラインを作成します
  • カスタムリージョンをブロックアウトし、比較中にステータスやツールバー（モバイルのみ）を自動的に除外することもできます
  • 要素の寸法スクリーンショットを増やす
  • Webサイトの比較中にテキストを非表示にして
    • 安定性を向上させ、フォントレンダリングのばらつきを防ぎます
    • Webサイトのレイアウトのみに焦点を当てる
  • より読みやすいテストのために、さまざまな比較方法と追加のマッチャーのセットを使用する
  • Webサイトがキーボードでのタブ移動をどのようにサポートするかを確認する。 Webサイトのタブ移動も参照してください
  • さらに多くの情報については、サービスおよびメソッドオプションを参照してください

WebdriverIOのビジュアルテスト機能の詳細については、ビジュアルドキュメントを参照し、Discordの👁️-visual-testingチャンネルに参加してください。

@wswebcreationへの特別な感謝​

この機能拡張のきっかけとなったwdio-native-app-compareでの作業について、コアメンテナーのWim Sellesに大きな感謝を申し上げます。彼の貢献は、モジュールの機能を向上させる上で不可欠でした。

引き続きのご支援ありがとうございます。これらの新機能に関するフィードバックをお待ちしています。

ハッピーテスティング！

WebdriverIOチーム

ようこそ！ ご用件は何でしょうか？

WebdriverIO AI Copilot