TestCafeを使用したVue.jsアプリのエンドツーエンドテスト

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

エンドツーエンドのテストは、テストアーセナルで最も価値のあるツールの1つであり、ユーザーがアプリ内を移動するときにユーザーが行うことをシミュレートし、アプリがそれに正しく応答しているかどうかを判断できます。残念ながら、これは最も困難で時間のかかるテスト方法の1つでもあり、そのための通常のツールでは、かなりの量の構成とセットアップが必要であり、プロセスがさらに複雑になります。ありがたいことに、いくつかの比較的単純な解決策があります。ここでは、そのうちの1つである TestCafe をデモンストレーションし、Vue.jsアプリを使用してエンドツーエンドのテストを行う方法を示します。（とはいえ、これらのメソッドは任意のフレームワークまたはサイトで使用できます。）

インストール

Selenium / WebDriver + Browser Drivers + Client Libraries など、一般に管理不可能な量の依存関係を伴う従来のソリューションとは異なり、全体TestCafe はノードベースであり、1つのパッケージにインストールできます。これは、ゼロ構成ツールでもあります。必要なオプションは、コマンドラインを介して渡されます。そのため、NPMスクリプトを使用するのが最適です。

Vueアプリでの使用を開始するには、YarnまたはNPMを介してtestcafeをインストールします。新しいプロジェクトを開始する場合は、vue-cliにvuepackテンプレートを使用することも検討してください。

# Yarn
$ yarn add testcafe -D

# NPM
$ npm install testcafe --save-dev

設定

ここから、アプリに npm rundevで実行できる開発サーバーがあると想定します。 webpack-dev-serverは正常に動作します。

testcafeを起動するpackage.json scriptsオブジェクトに新しいスクリプトを追加します。

"scripts": {
  "dev": "...",
  "test": "testcafe all tests/*.test.js --app \"npm run dev\" --app-init-delay 10000 -S -s screenshots",
}

これにより、testcafeは次のようになります。

all -システム上で検出できるすべてのブラウザでテストを実行します。必要に応じて、これをブラウザ名のコンマ区切りリストに設定します。
tests/*.test.js -testsフォルダー内の.test.jsで終わるテストとしてすべてのファイルを実行します。
--app \"npm run dev\" -アプリサーバーを起動するコマンド。
--app-init-delay 10000 -テストスイートの起動を10秒間遅らせて、アプリサーバーが読み込まれるのを待ちます。
-S -テストが失敗したときにスクリーンショットを撮ります。
-s screenshots -プロジェクトルートを基準にしたscreenshotsフォルダーにスクリーンショットを保存します。

これで、エンドツーエンドのテストを作成する準備が整いました。

あなたの最初のテスト

アプリ全体が単に内部の段落要素であると少しの間仮定しましょう単語が含まれています "Hello World!". これが実際に当てはまるようにする方法です。

ブラウザと通信する必要があるものはすべて、promiseを返します。 async / await を使用してブラウザーへの呼び出しを管理すると、テストの実行がはるかに簡単になります。 TestCafeは、必要な変換を処理します。

test / example.test.js

// A fixture must be created for each group of tests.
fixture(`Index page`)
  // Load the URL your development server runs on.
  .page('http://localhost:8080');

// Create a new test(description, function(testController): <Promise>)
test('Body > Paragraph contains "Hello World!"', async testController => {
  // Select the paragraph element under the body.
  // Must use promises (async / await  here) for communication with the browser.
  const paragraphSelector = await new Selector('body > p');

  // Assert that the inner text of the paragraph is "Hello World!"
  await testController.expect(paragraphSelector.innerText).eql('Hello World!');
});

ユーザー入力の制御

ここで、適切なエンドツーエンドのテストを実行するには、ユーザーのアクションと入力をシミュレートできる必要があります。他の優れたテストスイートと同様に、TestCafeはこのユースケースを処理するために必要なメソッドを提供します。

test('Typing in an input', async testController => {
  // Select the input element (Assumes <body><input type="text/></body>")
  const inputSelector = await new Selector('body > input[type="text"]');

  await testController
    // Type the last word of "Hello World!"
    .typeText(inputSelector, 'World!')
    // Click the beginning of the element. caretPos is the position of the text cursor we want the click to be at.
    .click(inputSelector, { caretPos: 0 })
    // Type the keys, SHIFT+H, e, l, l, o, and SPACE in order to write "Hello ".
    .keyPress('H e l l o space')
    // The resulting value should now be "Hello World!"
    .expect(inputSelector.value).eql('Hello World!');
});

参照

TestCafeはかなり多くのことができます。また、テストの重複を減らすためのいくつかの興味深い規則も提供します。詳細については、公式サイトをご覧ください。

getdocs

13036