TestCafeというNode.js製のテストツールを試してみる

まえがき

たまたま下記のようなTwitterポストを見つけました

TestCafe 1.6.0リリース。
フルページスクリーンショットのサポート、スクリーンショットオプションの変更など "TestCafe v1.6.0 Released | TestCafe" https://t.co/eoN4McQ1EX #browser

— azu (@azu_re) October 19, 2019

TestCafeというテストツールを自分は知らなかったので調べてみました。

github.com

Node.js製のE2Eテストができるツールのようです。

Windows, mac, Linuxで動作し、
デスクトップ、モバイル、リモート、クラウドブラウザ(ヘッドレスやUI)をサポートしているよう。
(ここ原文をそのまま訳していますが、UIって何を指しているんだろう)

試しにtestcafe テストツール などで検索してみると結構日本語の情報もあるようだったので、導入は簡単そう。
npm(yarn)でインストールすれば使えるというのも導入の敷居が低くて良さそうですね。

以下、試してみた系の備忘録

TestCafeのインストール

まずはインストール。普段yarn使っているので、下記のようにしてインストールします
(READMEにはglobalインストールするコマンドが記述されていましたが、今回はプロジェクト単位で区切ろうと思います)

yarn add testcafe

# 実際にプロジェクトで使うときは下記かな？
# yarn add -D testcafe

サンプルコードを書いてみる

READMEに書かれているものを写経する

import { Selector } from 'testcafe'; // first import testcafe selectors

fixture`Getting Started`.page`https://devexpress.github.io/testcafe/example`; // declare the fixture // specify the start page

//then create a test and place your code there
test('My first test', async t => {
  await t
    .typeText('#developer-name', 'John Smith')
    .click('#submit-button')

    // Use the assertion to check if the actual header text is equal to the expected one
    .expect(Selector('#article-header').innerText)
    .eql('Thank you, John Smith!');
});

実行は下記コマンドで

yarn testcafe chrome test.js

すると、下記のようなダイアログが出てくるのでOKを押します。

すると、テストが実行されます。

導入自体は簡単そうですね。

fixtureという文法 => TODO

サンプルコードを書いていて感じたのが、fixtureという構文です。
testcafeから少し話はそれてしまいますが、testcafeでも使われているこういう文法ってどうやって定義しているんでしょうかね？

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

jestを使うときにdescribeが使えるようになる、あの仕組みと同じなのかなと思っていますが、そういえばそこらへんの仕組みって自分はちゃんと理解できているわけではないことに今更ながら気づきました。。。

ここについては別に時間をとって、ちゃんと整理したいなと思います。

ひとまずお風呂が湧いたので、今日はこれにて。
最近関東エリアは急に寒くなっている気がするので、皆様風邪など引かれぬようにお気をつけください。