Open2022/01/11にコメント追加4

TestCafe ナレッジシェア

JavaScript

hujuu

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

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

公式マニュアル

日本語のインストール記事

hujuu

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

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 の箇所にテキストを入力して、サブミットボタンをクリックしている。

hujuu

xpathを用いた要素指定

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

以下の公式サンプルコードを使って、xpath指定できるようにします。

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);
});

hujuu

Proxy を介した接続をする

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

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

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