ダークモードのテスト、別の言語、別の画面: すべてのバリエーションをまとめて 1 件のテストで

テストをコピーせずにダークモードをテストする: ライトとダークの両モード、すべての言語、すべての画面で合格する 1 件のテストを保ちます。

執筆: Ait Nohaila (事業開発担当) 読了 10 分

テストをコピーせずにダークモード、別の言語、別の画面をテストするには、アサーションがバリエーションごとのバージョンを持つ 1 件のテストを保ちます。実行がバリエーションを選び、ステップは同じままです。

これはテスト自動化で最もよくある問題の 1 つです。自分の机ではライトモードで合格するテストが、何も壊れていないのに、ダークモード、フランス語、同僚のノート PC では不合格になります。

何も壊れていないのに、ダークモードでテストが失敗するのはなぜ?

Definition

テストは 2 つのことをします: ユーザーと同じ操作をし、画面に表示されるものを確認します。操作はどのバリエーションでも同じです。確認はそうではありません: 正しい画面でも、ダークモード、別の言語、別の画面では見た目が変わり、見た目を 1 つしか期待しないアサーションはほかを不合格にするからです。

GUI Test Studio では、アサーションが期待するものは、ビジュアルアサーションのビジュアルターゲット、テキストアサーションの期待テキスト、動的テキストアサーションの形式、レイアウトアサーションの配置です。記録が各アサーションに最初の期待する見た目を与え、これを既定と呼びます。

ダークモード、別の言語、別の画面: 正しい画面で変わるもの

同じ画面でも、見た目が正当に異なることがあります。アプリが壊れているのではなく別のバリエーションで表示されているだけですが、バージョンを 1 つしか持たないアサーションにはその違いが分かりません。

バリエーション正しい画面で変わるもの
ダークモードとハイコントラストすべての背景、文字色、アイコンが変わるため、どの画像もライトの見た目とは異なります。
別の言語単語は長くも短くもなり、ボタンは大きくなり、行は折り返され、右から左へ書く言語ではレイアウトが左右反転します。
別の画面拡大率 150% のノート PC と 100% の 4K モニターでは、同じボタンが別のピクセルで描かれます。
別のバージョンの Windowsフォント、角、影、スクロールバーは Windows 10 と Windows 11 で異なります。
アプリの別のエディションホワイトラベルの顧客の色とロゴ、または一部のプランにしか表示されない機能。

バリエーションごとにテストをコピーしても長続きしない理由

正しい画面があるバリエーションで失敗し続けると、チームはたいてい 3 種類の近道のどれかに頼ります。

バリエーションごとのコピー

決済のテスト · ライト
決済のテスト · ダークモード
決済のテスト · フランス語
決済のテスト · 拡大率 150%

ワークフローの変更を 4 回行います。

1 件のテスト

決済のテスト

ライトダークモードフランス語拡大率 150%

ワークフローの変更は 1 回で済みます。

テストのステップはどのバリエーションでも同じです。違うのは、アサーションが期待する内容と、一部のステップが入力したり開いたりする内容だけです。
近道その代償
バリエーションごとのテストのコピーワークフローの変更はすべて 2 回、3 回、5 回と繰り返すことになり、コピー同士が少しずつずれていきます。
アサーションを緩めるダークの見た目を受け入れるほど緩いアサーションは、ライトの見た目でのアイコンの欠落や色の誤りも受け入れてしまいます。
そのバリエーションではビジュアルのアサーションをしないテストは最後までクリックして進みますが、暗い背景の上の黒い文字は誰にも気づかれずにリリースされます。
緩めたアサーションには、意図した新しい見た目とバグの区別がつきません。区別できるのは、そのバリエーション用の期待する見た目だけです。

合格したテストでもユーザーが目にするものを見逃しうる理由は、自動テストが見逃すビジュアルバグで扱っています。理由もなく失敗するアサーションがアサーションなしより悪い理由は、不安定なテストと誤検知にあります。

コードで書くテストフレームワークで必要になること

Playwright、Selenium、Cypress のようなコードで書くフレームワークでは、バリエーションを自分でコードに作り込み、保守し続けます。

保守するものコードで書くフレームワークGUI Test Studio
期待する画像テーマ、言語、ブラウザーごとの基準スクリーンショットのフォルダー。テストコードの隣に置きます。1 つのテストファイルの中に、各アサーションのバリエーションごとのバージョンとして。
バリエーションの切り替えテーマや言語で分岐する設定やコード。実行のために選んだプロファイル。
言語ごとに入力する言葉言語ごとのテストデータ。テストコードに組み込みます。その言語用のテキスト入力ステップのバージョン。
意図した変更のあとの新しい見た目--update-snapshots のようなオプションを付けた実行と、変更されたファイルの確認。レポートで新しい見た目を 1 クリックで採用し、保存します。

考え方は同じです: 1 つのバリエーションに、1 組の期待内容。違うのは、そこに至るまでに書いて保守する量です。

すべてのバリエーションをまとめて 1 件のテストで: ベースラインプロファイル

GUI Test Studio は、Windows のエンドツーエンドテストをコードなしで自動化し、すべてのバージョンをテストの中に保存します。ダークモード、フランス語、4K モニター、Windows 10 のように、バリエーションをベースラインプロファイルとして名前を付けます。すると各アサーションは、既定の隣に、プロファイルごとに期待する内容のバージョンを 1 つずつ持てます。

1 個のビジュアルアサーション

Save

既定

記録したとおり

Save

ダークモード

追加するプロファイル

Enregistrer

フランス語

追加するプロファイル

すべてのバージョンで共有

どこを探すかどれだけ待つかどれだけ厳密に判定するか
1 つのアサーションが、バリエーションごとに期待する見た目を 1 つずつ持ちます。バージョンごとに変わるのは、期待する内容だけです。
用語意味
既定記録されたもの。名前は変更できますが削除はできず、プロファイルを選ばない限り、すべての実行がこれを使います。
ベースラインプロファイルテストに追加する名前付きのバリエーションです。アサーションがバージョンを持つまでは、名前にすぎません。
バージョン1 つのプロファイルに対して 1 つのアサーションが期待する見た目: 画像、テキスト、形式、配置のいずれかです。

どの種類のアサーションもバージョンを持てます: ビジュアルアサーション、テキストアサーション、動的テキストアサーション、レイアウトアサーションです。グループアサーションでは、各メンバーがそれぞれのバージョンを持ちます。関係するすべてのウィンドウについては、ベースラインのガイドをご覧ください。

バリエーションごとに変わるもの、決して変わらないもの

プロファイルが変えるのは、アサーションが期待する内容です。アサーションがそれをどう探すかは決して変えません。

アサーションプロファイルのバージョンが持つものすべてのバージョンで共有
ビジュアルアサーションそのビジュアルターゲット、つまり探す画像。検索範囲、タイムアウト、検証の厳密さ。
テキストアサーション期待テキスト、その一致精度、大文字と小文字の区別。検索範囲とタイムアウト。
動的テキストアサーション待機するテキストの形式。検索範囲とタイムアウト。
レイアウトアサーション要素とその配置。検索範囲とタイムアウト。

アプリを複数の言語でテストする: ステップも変わる

別の言語のテストでは、画像を変えるだけでは足りないことがよくあります。別の文字を入力し、別のアドレスを開き、別のファイルをアップロードします。そのため、テストの各ステップは、その動作についてプロファイルごとのバージョンを持てる一方、画面上の位置とタイミングは共有されたままです。

ステップ既定フランス語プロファイル
テキスト入力Hello, I need helpBonjour, j'ai besoin d'aide
キー押下Ctrl+BCtrl+G
Web アプリを開くshop.example.com/enshop.example.com/fr
ファイルをアップロードinvoice.pdffacture.pdf
アプリを実行Setup.exeSetup.exe /lang=fr

ショートカットも異なることがあります: フランス語版の Microsoft Word では太字は Ctrl+B ではなく Ctrl+G なので、キー押下ステップはフランス語版を持ちます。

例英語とフランス語のサポートフォーム

既定では英語のメッセージを入力し、英語の確認メッセージを期待します。フランス語プロファイルでは、同じテキスト入力ステップがフランス語のメッセージを入力し、テキストアサーションがフランス語の確認メッセージを期待します。1 件のテストで 2 つの言語に対応し、ワークフローの変更は一度で済みます。

テキストアサーションがテキストをどう読み取り、比較するかは、テキストアサーションで説明しています。

既存のテストにダークモードを追加する手順

プロファイルを埋める最も手早い方法は、そのプロファイルで実行することです。見た目が異なるアサーションが不合格になるので、それを確認し、正しいものを残します。

実行

プロファイルで

確認

不合格の各アサーション

採用

そのプロファイル用に

保存

テストに

  1. 1

    プロファイルに名前を付ける

    設定、プロジェクト設定で、ベースラインプロファイルカードに「ダークモード」という名前のベースラインプロファイルを追加します。プロファイルは、アサーションがそれぞれのバージョンを持つまでは、ただの名前です。

  2. 2

    そのプロファイルでテストを実行する

    アプリをダークモードに切り替えます。GUI Test Runner-Recorder のテスト画面で、ベースライン行でダークモードを選び、テストを実行をクリックします。

    「ベースライン」行が次回の実行のプロファイルを選び、その選択はそのテストについて記憶されます。
  3. 3

    不合格の各アサーションを確認する

    アサーションはまだライトの見た目と比較するので、見た目が異なるものは不合格になります。信頼度レポートでそれぞれを開き、ダークの見た目が正しいかどうかを判断します。

  4. 4

    正しいダークの見た目を採用する

    確認した各アサーションで実際の画像をダークモードのベースラインとして採用をクリックします。既定のライトの見た目はそのまま残ります。

    プロファイルで実行した場合、「採用」ボタンは新しい見た目をそのプロファイルの下に登録します。
  5. 5

    保存して、もう一度実行する

    レポートの変更をテストに保存し、ダークモードでもう一度実行します。これで各アサーションは、自身のダーク版と比較されます。

または GUI Test Studio でバージョンをキャプチャする

アサーションを選択し、そのベースラインタブを開いてプロファイルを選択します。「プロパティ」パネルのすべてのフィールドにそのプロファイルのバージョンが表示され、アサーションが期待する内容を編集すると、そのバージョンに反映されます。キャプチャ...はアサーションの領域を元の場所に描いた状態で画面キャプチャを開始し、同じ領域をキャプチャはまさにその場所からプロファイルの画像を取り込みます。

プロンプトからテストを作成するの方法で、AI アシスタントにプロファイルの追加やバージョンのキャプチャを頼むこともできます。

アプリを意図して変えたとき: 新しい見た目を 1 クリックで採用する

新しい見た目は、アプリを意図して変えたときに採用します。確認したものだけを採用し、元に戻せる手段を残しておきます。

いつGUI Test Studio ですること
アサーションが不合格になり、新しい見た目が正しい信頼度レポートで実際の結果を採用します。保存するまでは Ctrl+Z で取り消せます。
要素がまったく見つからなかった最も近い領域 (見つかった中で最も近い場所) を、新しい期待する見た目として採用します。
テキストが意図的に変わったレポートで期待テキストを編集します。プロファイルで実行した場合、編集はそのプロファイルのバージョンとして保存されます。
新しい見た目が主流になる「既定にする」は、プロファイルのバージョンを既定に変え、古い既定をそのプロファイルの下に残します。
プロファイルの名前を変更する、または削除するプロジェクト設定で行います: テストのすべてのアサーションが追従します。

変更後にテストを更新するではレポートでの採用の流れを順に説明し、信頼度レポートではレポートに表示されるすべてを説明しています。

CI/CD ですべてのバリエーションを実行する

今回の実行

ベースライン: ダークモード

「保存」ボタン · ビジュアルアサーション

そのダークモード版

注文合計 · テキストアサーション

そのダークモード版

会社のロゴ · ビジュアルアサーション

ダークモード版はまだありません: 既定が使われ、レポートにその旨が示されます

実行では 1 つのプロファイルを使います。各アサーションはそのプロファイル用のバージョンと比較され、ない場合は既定と比較されます。

実行では 1 つのプロファイルを使います。GUI Test Runner-Recorder では、テスト画面のベースライン行で選びます。ビルドエージェントでは、gtr-cli に --baseline-profile とプロファイル名を続けて指定します。

同じテストを、バリエーションごとに 1 回
gtr-cli run tests\Checkout.GTS --junit results\default.xml
gtr-cli run tests\Checkout.GTS --baseline-profile "Dark mode" --junit results\dark.xml
gtr-cli run tests\Checkout.GTS --baseline-profile "French" --junit results\french.xml
  • プロファイル用のバージョンを持たないアサーションは既定と比較され、レポートには、実行が使ったプロファイルと、そのバージョンを持っていたアサーションの数が示されます。テストにないプロファイル名を指定すると既定で実行され、gtr-cli がその旨を伝えて、テストにあるプロファイルを一覧表示します。実行履歴には、各実行が使ったプロファイルが残ります。

gtr-cli のすべてのオプションはパイプラインでテストを実行するに一覧があります。

ブラウザーとデバイスは別の方法で扱う

Web テストには、ブラウザーやデバイスごとのプロファイルは必要ありません: GUI Test Runner-Recorder が、記録したテストのバージョンを Chrome、Edge、Firefox、エミュレートしたスマートフォンとタブレット向けに、それぞれから切り出した画像付きで生成します。1 回の記録からのクロスブラウザーテストをご覧ください。

ベースラインプロファイルは、同じ種類の画面で同じアプリの見た目を変えるもののためにあります: テーマ、言語、拡大率、Windows のバージョン、アプリのエディションなどです。これはデスクトップアプリ、Web アプリ、ゲーム、スマートフォンのいずれにも同じように使えます。

始める前に知っておくこと

制限意味
1 回の実行に 1 つのプロファイル2 つのバリエーションは 2 回の実行です。パイプラインはプロファイルごとに 1 回テストを実行します。
共有の検索範囲プロファイルごとの検索範囲はありません。あるバリエーションで要素がまったく別の場所にある場合は、アサーションの検索範囲を広げてください。
コードのブランチごとのセットはないコードのブランチごとに期待する見た目のセットを分けることはできません。リリース前に新しい見た目を準備するには、実行からプロファイルを埋めておき、リリース時に「既定にする」を使います。

要点

  • 1見た目を 1 つしか期待しないテストは、正しい画面を不合格にします: ダークモード、別の言語、別の拡大率、別のバージョンの Windows で。
  • 2コピーや緩めたアサーションは長続きしません: コピー同士は少しずつずれ、緩めたアサーションは本当のバグを隠します。
  • 3GUI Test Studio はすべてのバリエーションを 1 件のテストに保ちます。すべてのアサーションとステップに、ベースラインプロファイルごとのバージョンを持たせます。
  • 4どこを探すか、どれだけ待つか、どれだけ厳密に判定するかは共有のままです。どのバリエーションでもテストが甘くなることはありません。
  • 5実行は 1 つのバリエーションを選びます。新しい見た目は、信頼度レポートで確認済みの結果を採用することで生まれます。

よくある質問

自動テストがダークモードで失敗するのはなぜですか?

ライトの見た目を期待しているからです。画面の画像を比較するアサーションはどれも、アプリが動いていても、ダークモードでは別の色を見て不合格になります。解決策はアサーションを緩めることではなく、各アサーションが期待する内容のダーク版を用意することです。

ダークモードとライトモードを同じテストでテストするには?

テストは 1 件のままにして、ダークモードというベースラインプロファイルを追加します。既定で 1 回、ダークモードで 1 回実行します: ステップは同じで、各アサーションは実行中のバリエーションの見た目と比較されます。

テストをコピーせずに、アプリを複数の言語でテストするには?

言語ごとにプロファイルを追加します。フランス語プロファイルでは、テキストアサーションがフランス語の言葉を、ビジュアルアサーションがフランス語の画像を期待し、テキスト入力ステップがフランス語を入力します。ワークフローの変更は、すべての言語に対して 1 回で済みます。

別の画面解像度や拡大率でテストが失敗するのはなぜですか?

拡大率 150% のノート PC と 100% の 4K モニターでは、同じボタンが別のピクセルで描かれるため、一方で撮った画像はもう一方と正確には一致しません。その画面用のプロファイルを追加し、確認済みの実行からその見た目を一度採用します。

実行するバリエーションのバージョンをアサーションが持っていないとどうなりますか?

既定、つまり記録された見た目と比較されます。信頼度レポートには、実行が使ったプロファイルと、そのバージョンを持っていたアサーションの数が示されるので、バージョンがないことによる不合格はすぐに見分けられます。

意図した変更のあと、期待する見た目を更新するには?

まず不合格のアサーションを確認し、変更が意図したものであるときだけ新しい見た目を採用します。GUI Test Studio では、信頼度レポートの採用ボタンが 1 つのアサーションについて元に戻せる形でそれを行い、保存で実行に使ったプロファイルの下にテストへ書き込みます。

CI/CD パイプラインですべてのバリエーションを実行できますか?

はい、プロファイルごとに 1 回実行します。gtr-cli は --baseline-profile に続けてプロファイル名を受け取るので、パイプラインは既定で 1 回、プロファイルごとに 1 回テストを実行し、それぞれが独自の結果を持ちます。

ブラウザーごとにプロファイルを作るべきですか?

Web テストでは必要ありません。GUI Test Studio は、記録した Web テストのバージョンを Chrome、Edge、Firefox、エミュレートしたスマートフォンとタブレット向けに、それぞれから切り出した画像付きで生成します。ベースラインプロファイルは、同じアプリの見た目を変えるもののためにあります: テーマ、言語、画面、Windows のバージョンなどです。

Playwright、Selenium、Cypress、Microsoft Word、Windows は各所有者の商標です。

すべての記事