TestCafe ページオブジェクトパターン（ページモデル）

goto

TestCafe ページオブジェクトパターン

この記事では、ページオブジェクトパターン（ページモデル）を用いた
TestCafeのコーディング手法を紹介する。

前回のおさらい

前回のような、手続き型¹のコードで書いたテストシナリオは以下のとおりである。

これだと、テストのシナリオの中に、ページのHTML要素を同定するための
事前作業的なコードが入り込んでしまい²、コードの趣旨³が見えづらい。

コード

import "testcafe";
import {Selector} from "testcafe";

fixture("Google Search")
    .page("https://www.google.com/");

test("Google Search Test", async (t) => {
    const googleSearchTextArea = Selector(".gLFyf").withAttribute("title", "検索");
    const googleSearchButton   = Selector(".gNO89b").withAttribute("value", "Google 検索");

    await t.typeText(googleSearchTextArea, "TestCafe");
    await t.click(googleSearchButton);
});

ページオブジェクトパターン

ページオブジェクトパターンとは、テスト対象のウェブページを表現する
クラスを定義して、テストシナリオの中でそのページクラスのオブジェクトを
使用するコーディングの流儀である。

ページオブジェクト

ページのURL、テスト対象になるHTML要素を、クラスのプロパティとして定義する。

URLは文字列(string)型、
テスト対象になるHTML要素はSelectorPromise型として定義する。

import {Selector} from "testcafe";
export ページクラス名 {
    // プロパティの定義
    ページのURL : string
    ページのテストに必要なHTML要素 : SelectorPromise
    
    constructor(){
        プロパティへの値の代入
    }
}

テストシナリオ

最上部でページクラスをインポートする。
fixtureに、テストスクリプトのテーマを記載し、
pageに、ページのURLを記載する。
test部分にシナリオを記述する。

// テストカフェのインポート
import "testcafe";
// ページクラスのインポート
import ページクラス名

fixture(テストスクリプトのテーマ)
    .page(ページのURL)

test(テストのテーマ, async (t) => {
    テストの動作    
})

コード例

前回同様、Google検索に"TestCafe"と入力して、
検索ボタンをクリックするシナリオを記載する。

ページオブジェクト

// # グーグル検索のページオブジェクト
// ## HTMLの要素に対応するクラスSelectorをインポート
import {Selector} from "testcafe";

// ## グーグル検索のページオブジェクトを定義するクラス
export class GoogleSearchPage {
// ### プロパティを定義
    url            : string;
    searchTextArea : SelectorPromise;
    searchButton   : SelectorPromise;

// ### コンストラクター
    constructor(){
// 1. グーグル検索ページのURL
        this.url            = "https://www.google.com/";
// 2. グーグル検索のテキスト入力欄のHTML要素
        this.searchTextArea = Selector(".gLFyf").withAttribute("title", "検索");
// 3. グーグル検索の検索ボタンのHTML要素
        this.searchButton   = Selector(".gNO89b").withAttribute("value", "Google 検索");
    }
}

テストシナリオ

ページオブジェクトパターンを利用した結果、
テストシナリオから、HTML要素を見つけ出す
細かい操作が消えている。

// # ページオブジェクトパターンを利用したテストシナリオ
// ## testcafeとページオブジェクトをインポート
import "testcafe";
import {GoogleSearchPage} from "./PageObjects/GoogleSearch.po";

// ## ページオブジェクトを新しく生成
const googleSearchPage = new GoogleSearchPage();

// ## テストスクリプト全体の名前と最初のページ
fixture("Google Search")
    .page(googleSearchPage.url);

// ## Google検索の動作確認テスト
test("Google Search Test", async (t) => {
// 1. Google検索ページの検索キーワード入力欄に"TestCafe"と入力
    await t.typeText(googleSearchPage.searchTextArea, "TestCafe");
// 2. Google検索ページの検索ボタンをクリック
    await t.click(googleSearchPage.searchButton);
});