# ウェブテストチュートリアル

このページで学べること

本チュートリアルは、Gondolaのウェブテストの基本コンセプトおよび実施内容について記載しています

# 始める前に

  • このチュートリアルでは、"ミニ"チュートリアルの最初のテストの作成と実行を拡張していきます。
    先にそちらのチュートリアルを完了させてください。
  • POMビルダーのインストールをしてください。
    その後、インストールを完了させるために、Chromeを再起動してください。
    ツールバーの右側の角に、 Pom Builder のアイコンが確認できるはずです。

POM Builder Toolbar Icon

  • このチュートリアルでは、Demo Shopウェブアプリケーションのテストを実施します。
  • 本チュートリアルの目的は、GondolaツールおよびGondolaの概念についてすばやく学んでもらうことです。
    次のチュートリアルでは、より高度なテクニックを取り扱うことで、プロジェクトをより良く管理する方法や、テストスクリプトのメンテナンス性をより高める方法を習得します。

それでは始めましょう!

# 'ホームページUI'のテストモジュールを作成する

本テストモジュールでは、ホームページのUIの挙動を確認するためのテストケースをいくつか実装します。

src/testディレクトリに、home_page_test.tsファイルを作成し、以下を入力します:

import { gondola, TestCase, TestModule } from "@logigear/gondola"

TestModule("Home Page UI");

# テストケース1

本テストケースでは、メインメニューをクリックした際に、バナーの見出しが正常に表示されることを以下の手順で検証します:

  • Saleリンクをクリック
  • バナー見出しに"Sale"が表示されているかどうかを確認
  • Women'sとMen'sのページのリンクについても繰り返し

# テストケースの作成

それでは、テストケースの作成を行いましょう。最初のステップは、サイトのホームページに遷移することです。
home_page_test.tsに以下を入力してください:

TestCase("Banner heading is displayed correctly ", () => {
  gondola.navigate("https://demo.gondolatest.com");
});

# POMビルダーを使ったエレメントセレクターの特定

Saleのリンクをクリックする必要があります。そのためには、gondola.click(locator)のアクションを使用することができます。
信頼性の高いSaleリンクのlocatorを特定するために、POMビルダーを使います:

pom builder for sale link

上記のように、本ケースにて、POMビルダーはxpathを使うよう提案しています。値をコピーし、locatorとして使用しましょう。テストケースは以下のようになっているはずです:

 TestCase("Banner heading is displayed correctly ", () => {
    gondola.navigate("https://demo.gondolatest.com");
    // Saleリンク
    gondola.click({xpath: "//a[.='Sale']"});
});

# バナーのテキスト値の確認

Gondolaには値をチェックするためのアクションがいくつも用意されています。このケースでは、gondola.checkText(locator, expectedValue)を使いましょう。

バナーの見出しのlocatorを取得するために、さきほどと同様にPOMビルダーを使用しましょう:

pom builder for banner

今回は、POMビルダーはh1要素に対してcssをロケーター型を使うよう提案しています。値をコピーし、locatorに使用しましょう。テストケースは以下のようになります:

TestCase("Banner Heading is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    // Saleリンク
    gondola.click({ xpath: "//a[.='Sale']" });
    gondola.checkText({ css: "h1" }, "Sale");
});

# 実践

上記の手順を繰り返して、WomenとMenのリンクをクリックし、バナー見出しの確認を行うテストケースを作ってみましょう。

念のため、以下にテストケースを記載しておきます 😉

TestCase("Banner heading is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    // Saleリンク
    gondola.click({ xpath: "//a[.='Sale']" });
    gondola.checkText({ css: "h1" }, "Sale");
    // Womenの'sのリンク
    gondola.click({ xpath: '//a[.="Women\'s"]' });
    gondola.checkText({ css: "h1" }, "Women's");
    // Men'sのリンク
    gondola.click({ xpath: '//a[.="Men\'s"]' });
    gondola.checkText({ css: "h1" }, "Men's");
});

# テストケース2

  • 本テストケースでは、最高価格が正しく表示されてるかどうかを検証します($150になること期待値です):

highest price

  • さきほど学習した内容を繰り返すと、テストケースはこのようになるでしょう:
TestCase("Highest Price is displayed correctly", () => {
    gondola.navigate("https://demo.gondolatest.com");
    // [確認] 最高値が150でなければならない(これは不具合)
    gondola.checkText({xpath: "//span[.='$300']"}, "150");
});

動的な要素取得に関する潜在的な問題

実際のケースでは、 //span[.='$300'] というxpathセレクターは理想的ではないかもしれません。
要素を特定するために、静的なIDではなく、 $300 という値を使っていますが、この*最大価格+は動的に変更されるものなので、値が変化した場合には特定できなくなるからです。

しかし、本チュートリアルの目的に沿って、今回はこの問題を保留し、後ほど詳細ガイドのほうで対処法を記載します。 最適なlocatorを選択するための詳細については、この記事を推奨します。

  • それでは、テストを実行し、テスト結果を見てみましょう。検証が失敗すると、Gondolaは自動的にスクリーンショットを撮ります:

failed test result

# テスト実行について試してみる

gondola.jsonを開きます。プロジェクトルートフォルダに配置されています。

# 異なるブラウザでテスト実行する

ブラウザをchromeからfirefoxに切り替えてテストを実行します:

{
    "helpers": {

        "WebDriver": {

            "browser": "firefox",

        }
    }
}

# 複数のブラウザを使ってテスト実行する

  • gondola.jsonでは、複数ブラウザで同時にテストを行うために、multipleを設定しています:
{
    
    "multiple": {
        "parallel": {
            "browsers": [
                "chrome",
                "firefox"
            ]
        }
    }

}
  • 上記の例では、parallelという名称のテストスイートを定義しています。このテストスイートを実行すると、ChromeとFirefoxが同時に起動します:
gondola run-multiple parallel --reporter mochawesome

gondolaコマンドはWindows上の%Path%、Linux/OSx上の$Pathに追加されていないかもしれません。その場合は、以下を実行する必要があります。

./node_modules/.bin/gondola run-multiple parallel --reporter mochawesome

  • テスト実行の実行が終了すると、各ブラウザのテスト結果は別々に保存されます。

TIP

複数のウェブテスト実行に関する詳細については、こちらに情報があります。 テスト実行の詳細については、こちらに情報があります。

注意

同時に実行できるテストの数は、購入したエージェントの数に基づいています。

よりよいlocator

テストケース2では、locatorはあまり良くないということについて触れました。
では、より良いものはどのようなものでしょう?
この例では、我々はcss locatorのcss: "label[for='pricerange'] > span"を使用するでしょう。
Highest Priceを含むspanは、ユニークな静的IDを持ちませんが、親要素の<label>タグは持っています。
これを使うことで、Hightest Priceを保持する<span>タグを特定することができます。
他の方法としては、Highest Priceを保持する<span>に静的IDを追加してもらうよう開発チームに依頼することです。

最終更新: 2020/12/28 4:12:58