[TestCafe]ページモデルを使用してみる

自動化を実装していると、同じ要素を何度も操作したり、
同じ期待値が何度も出てきたり、というのはよくあることだと思います。

なので、その都度要素を指定しているとあとあと面倒になってきます。
何らかの修正が入り、要素の id や class が変わったりすると、
それに合わせてテストコードを修正するのは正直面倒です。

メンテナンスに工数が掛かる為、下手したらいらない子になってしまいます。
テスト規模が大きければ尚更ですね。

なので、要素は要素、操作は操作のクラスを作っておくと、
要素変更に合わせた修正は要素のファイルのみでよくなります。

以下は、TestCafe のチュートリアル画面から必要な要素のみを纏めたものになります。

page_object.js

import { Selector } from 'testcafe';

export default class page {
    constructor () {

    /* -------------------------- */
    /* 入力画面                    */
    /* -------------------------- */
        // 画面タイトル
        this.pageTitle      = Selector('h1').withText('Example');
        
        // 名前インプットボックス
        this.boxNameInput   = Selector('#developer-name');

        // ボタン:submit
        this.buttonSubmit  = Selector('#submit-button');

    /* -------------------------- */
    /* 出力画面                   */
    /* -------------------------- */
        // 出力文字列
        this.outputText    = Selector('#article-header');

    }
}

この要素を使用して、操作するクラスを作ります。
画面タイトルを確認し、名前を入力してsubmitボタンを押して、
遷移先の表示を確認します。

operation.js

// ここで先程のオブジェクトクラスを指定しています
import PageObject   from './page_object';


const page   = new PageObject();

// ついでに期待値もここで指定してしまいます
const title  = 'Example';
const myname = 't_y_cafe';


fixture('Getting Started').page('http://devexpress.github.io/testcafe/example');
test('My second test', async t => {
    await t
        
        // 画面のタイトルを確認
        .expect(page.pageTitle.textContent).eql(title)

        // 名前を入力
        .typeText(page.boxNameInput,myname)

        // 登録する
        .click(page.buttonSubmit)

        // 画面出力確認
        .expect(page.outputText.textContent).eql('Thank you, '+ myname + '!');
});

今回は、要素の一部をページオブジェクトパターンとして１クラスに纏めてみましたが、
画面が増えていってもやはりこの手法は有用だと思います。