JS で書けるE2Eのテスト自動化システム「Test Cafe」

まず始めにインストールの手順。
npmが入っていれば、すぐに始められる。

公式マニュアル
https://testcafe.io/documentation/402635/getting-started

日本語のインストール記事
https://qiita.com/aki-1227/items/fbda8e7e7018f8ee2729

ベーシックなサンプルコードとコードの書き方をざっくり説明

import { Selector } from 'testcafe';

fixture`Getting Started`
    .page`http://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'John Smith')
        .click('#submit-button');
});

• 開始ページの指定
  fixture ~~.page で テスト開始URLを指定

• test()のt に . で実行したいコマンドを連ねていく。
  サンプルコードでは、指定のdiv id の箇所にテキストを入力して、サブミットボタンをクリックしている。

xpathを用いた要素指定

要素の指定は、CSS selector 推しっぽくて、xpathの指定方法は標準では入っていません。
（キレイに書かれたフロントエンドなら、CSS selectorだけで書けるかもしれないけど……）

以下の公式サンプルコードを使って、xpath指定できるようにします。
https://github.com/DevExpress/testcafe-examples/tree/master/examples/use-xpath-selectors

xpath-selector.js をダウンロードして、
スクリプト実行ファイルと同じディレクトリに配置します。

xpathを使うスクリプトには、xpath-selector を読み込むように記述しておきます。
以下のスクリプトでは1行目で読み込んでいます。

要素指定の際に、CSS selectorの場合は、関数に直接、selectorを記述していましたが、
xpathの場合は、一度変数に入れてから、関数で指定するのが推奨されているようです。
指定したい要素をXPathSelectorという関数を使って指定して、それを変数に入れておきます。

import XPathSelector from './xpath-selector';

fixture `Use XPath selectors`
    .page('https://devexpress.github.io/testcafe/example/');

test('Click checkboxes', async t => {
    const firstCheckbox  = XPathSelector('//input[@type="checkbox"]');
    const secondCheckbox = XPathSelector('//input[@type="checkbox"]').nth(1);

    await t
        .click(firstCheckbox)
        .click(secondCheckbox);
});

Proxy を介した接続をする

proxyの指定は、
コードでは無く、コマンド引数で指定します。

testcafe chrome test_proxy.js --proxy sample.com:7878

コマンド引数には、 --ports というのも存在しますが、
proxy使う際には、ドメインの後ろにコロンでプロキシ番号を入力しても通ります。