TestCafe：node.jsを使用したエンドツーエンドのWebアプリテストが簡単です

testcafe：node.jsフレームワークWebアプリケーションの自動テストを簡素化するためのフレームワーク

コアポイント：

• TestCafeは、node.jsに基づくWebアプリケーションテストフレームワークであり、自動テストのセットアップと実行プロセスを簡素化します。ブラウザの起動、テストの実行、結果の収集、レポートの生成など、テストのすべてのフェーズをカバーします。
• TestCafeは、ブラウザプラグインまたはその他の依存関係を必要とせず、人気のある最新のデスクトップまたはモバイルブラウザーでのテストをサポートしています。また、プラグインエコシステムを介したクラウドテストサービスや型破りなブラウザとも互換性があります。
• TestCafeは、ホバーからファイルアップロードまで、さまざまなテスト操作を提供し、待機や冬眠を手動で追加することなく、自動待機メカニズムが組み込まれています。また、テストされているページのオブジェクト表現を導入し、テストコードで使用するページオブジェクトパターンもサポートします。
• TestCafeは、人気のあるタスクランナーや継続的な統合システムと統合でき、日常的なタスクと自動開発ワークフローでのプロジェクトテストのセットアップのための共通のツールになります。また、複数のブラウザで同時にテストを実行し、テストプロセスを高速化することもできます。

この記事は、この新しいnode.jsベースのアプリケーションテストフレームワークの利点を説明するために、TestCafeチームのメンバーであるVasily Strelyaevによって説明されています。

フロントエンドのWeb開発者は、Webアプリケーションの自動テストをセットアップすることがどれほど難しいかを知っています。テストフレームワークをインストールすることも困難な場合があります。多くの既存のソリューションには、ブラウザプラグインとJDKが付属しているセレンが必要です。

また、テストを開始する前にテスト環境を設定する必要があります。つまり、構成ファイルの処理を意味します。後で、テスト環境の一部（レポートなど）が欠落していることがわかり、それらを個別に見つけてインストールする必要があります。

TestCafeは、Webアプリケーション用の新しいオープンソースのNode.JSベースのエンドツーエンドテストフレームワークです。

すべてのテストフェーズについて責任を負います。ブラウザの起動、テストの実行、テスト結果の収集、レポートの生成です。ブラウザプラグインもその他の依存関係も必要ありません。箱から出して動作します。

この記事では、どのように説明しますか

最初のテストを書く

ローカルマシンおよびクラウドテストサービスで実行します

• タスクランナーのテストタスクを作成
• testcafe
のインストール
最初に、マシンにnode.jsをインストールする必要があります。持っていない場合は、ウェブサイトにアクセスしてダウンロードするか、バージョンマネージャー（NVMなど）の使用を検討してください。

node.jsを完了した後、testcafeのインストールには1つのコマンドのみが必要です。

Linux/Macを使用していて、sudoを追加する必要があることに気付く場合は、NPM許可を修正することを検討する必要があります。

テストの書き込み

npm install -g testcafe

TestCafeデモページのテストを作成します。

選択したコードエディターを開き、新しいtest.jsファイルを作成します。

最初に、http：//devexpress.github.io/testcafe/example/demo webpageを指す固定具のステートメントを追加してください：

npm install -g testcafe

次に、テストを追加します：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

次に、テストを「開発者名」入力フィールドにテキストを入力し、[送信]ボタンをクリックします。

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

ここでは、typetextを使用し、[テスト操作]をクリックします。 TestCafeは、ホバリングからファイルアップロードまで、多くのこのような操作を提供します。

テストに戻りましょう。送信ボタンは、「ありがとう、％username％！」というページにリダイレクトされます。

このページのテキストに正しい名前が含まれているかどうかを確認します。

これを行うには、記事のタイトルを識別するためのセレクターを作成します。テスト操作の後、テキストが「ありがとう、ピーターパーカー！」と書かれているかどうかを確認するためのアサーションを追加します。

ページオブジェクト

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

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

TestCafeチームは、テストでページオブジェクトパターンの使用を奨励しています。このパターンを使用すると、テスト対象のページのオブジェクト表現を導入し、テストコードで使用できます。私たちがこれをどのように行うか見てみましょう。

新しいページobject.jsファイルを作成して、ページクラスを宣言します：

これまでのところ、テストは、開発者名入力、送信ボタン、「ありがとう」タイトルの3つのページ要素と相互作用します。そのため、ページクラスに3つのセレクターを追加します。

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

ページオブジェクトモードを使用すると、すべてのセレクターを1つの場所に保存できます。テスト中のWebページが変更された場合、1つのファイル-Page -Object.jsを更新するだけです。

テストをローカルに実行

export default class Page {
    constructor () {
    }
}

このテストをローカルマシンで実行するには、1つのコマンドのみが必要です。

TestCafeは、Google Chromeを自動的に見つけて起動し、テストを実行します。

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

同様に、この名前を指定するだけで、SafariまたはFirefoxでこのテストを実行できます。

TestCafe - List-Browsersコマンドを使用して、マシンでTestCafeで検出されたブラウザのリストを表示できます。

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

テスト操作レポート

テストが完了した後、TestCafeはレポートをコンソールに出力します。

テストが失敗した場合、TestCafeはエラーが発生した場所を示すコールスタックを備えたコールサイトを提供します。

5つの内蔵レポート形式から選択するか、さまざまな形式をサポートするアドオンを検索できます。

IDE

からテストを開始します

専用のプラグインを使用して、VSコードやsublimetextなどの人気のあるIDEからTestCafeテストを実行できます。

クラウドテストサービスでテストを実行する

TestCafeは、人気のある最新のデスクトップまたはモバイルブラウザーでテストを箱から出して実行できますが、クラウドテストサービス、ヘッドレスブラウザー、その他の型破りなブラウザーと互換性のあるプラグインのエコシステムもあります。

このセクションでは、人気のある自動テストクラウドであるSaucelabsでテストを実行します。異なるオペレーティングシステムとブラウザを備えた数百の仮想マシンをホストしています。

ソーセラブでテストを実行するには、ソーセラブアカウントが必要です。持っていない場合は、https：//saucelabs.com/にアクセスして、新しいアカウントを作成してください。必要な資格情報を取得します：ユーザー名とアクセスキー。

このプラグインはローカルディレクトリにインストールされているため、TestCafeをローカルにインストールする必要があります。

次のコマンドを実行して、ソーセラブで利用可能なブラウザと仮想マシンの完全なリストを表示できます。

npm install -g testcafe

タスクランナーにタスクを追加

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

タスクランナーは、開発ワークフローでルーチンタスクを自動化する必要がある場合に役立ちます。

タスクランナーとの統合は、開発時にTestCafeテストを実行するための優れたソリューションです。そのため、TestCafeコミュニティは、最も人気のあるnode.jsタスクランナーと統合するプラグインを開発しました。

このチュートリアルでは、gulp.jsを使用します。

gulp.jsがマシンにインストールされていない場合は、次のコマンドを使用してグローバルにプロジェクトにインストールします。

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});

testcafeをgulp.jsと統合するGulpプラグインをインストール：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

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

プロジェクトにgulpfile.jsファイルがある場合は、次のタスクを追加します。それ以外の場合は、このタスクを使用して、新しいgulpfile.jsを作成します：

このタスクは、ChromeおよびFirefoxのtest.jsファイルでテストを実行します。 Gulp Plugin APIの詳細については、GitHubページを参照してください。

次のようにコマンドラインからこのタスクを実行できます。

継続的な統合プラットフォームでのテスト

TestCafeは、強力なコマンドラインとプログラミングインターフェイスを提供し、ほとんどの最新のCIシステムで簡単に使用できるようにします。

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

テストランレポートは、最も人気のあるCIシステムで理解されるJSON、Xunit、およびヌニット形式でレポートすることができます。

TestCafeドキュメントには、Travis CIのGitHubプロジェクトのテストをセットアップする方法を説明するレシピが含まれています。

要約

この記事では、最初のTestCafeテストから始めて、最終的にE2Eテストをプロジェクトのプロセスに統合する方法を示します。 TestCafeでWebアプリケーションをテストするのがどれほど簡単かを自分で体験できます。

TestCafeについて質問がある場合は、以下にコメントしてください。フォーラムで質問するか、GitHubページにアクセスしてください。

testcafe faq

TestCafeは他のエンドツーエンドテストツールとどう違うのですか？

TestCafeは、WebDriverやその他のテストソフトウェアを必要としないため、ユニークなエンドツーエンドテストツールです。 node.jsで実行され、プロキシを使用してスクリプトをブラウザに挿入します。これにより、ユーザーアクションを自動化し、予想どおりにページ上の要素が実行されることをアサートできます。モバイルデバイスを含む複数のブラウザーとプラットフォームでのテストをサポートしています。また、自動待機、リアルタイム診断、同時テスト実行などの機能も提供します。

モバイルテストにTestCafeを使用できますか？

はい、TestCafeはモバイルテストをサポートしています。 iOSおよびAndroidデバイス、およびモバイルエミュレーターとエミュレーターでテストを実行できます。デスクトップブラウザのモバイルデバイスをシミュレートすることもできます。これにより、レスポンシブWebアプリケーションをテストするためのユニバーサルツールになります。

TestCafeは非同期操作をどのように処理しますか？

TestCafeには、自動待機メカニズムが組み込まれています。これは、テストに待機や冬眠を手動で追加する必要がないことを意味します。 TestCafeは、各操作の前後にページの読み込みとXHRを自動的に待機します。また、相互作用する前に要素が表示されるのを待ちます。

複数のブラウザでTestCafeテストを同時に実行できますか？

はい、TestCafeを使用すると、複数のブラウザでテストを同時に実行できます。これにより、テストプロセスを大幅に高速化できます。テストを開始するときに、同時テスト実行の数を指定できます。

testcafeでテストをデバッグする方法は？

TestCafeは、デバッグとテストのためのいくつかの方法を提供します。これには、テストを一時停止し、現時点でテストされているページのステータスを表示できるデバッグモードが含まれています。また、テストセッションのリアルタイムテストステータスレポート、スクリーンショット、ビデオ録画も提供します。

クロスブラウザーテストにTestCafeを使用できますか？

はい、TestCafeはクロスブラウザーテストをサポートしています。ローカルマシンであろうとリモートデバイスでも、複数のブラウザで同時にテストを実行できます。 Chrome、Firefox、Safari、Internet Explorerなど、すべての人気ブラウザをサポートしています。

TestCafeはページナビゲーションをどのように処理しますか？

TestCafeはページナビゲーションを自動的に処理します。テストが開始される前と、新しいページを引き起こす各アクションの後にページがロードされるのを待ちます。これは、ページナビゲーションを処理するために特別なコードを追加する必要がないことを意味します。

継続的な統合システムでtestcafeを使用できますか？

はい、TestCafeは、Jenkins、TeamCity、Travisなどの一般的な継続的な統合システムと統合できます。これらのシステムで使用できるXunitを含むさまざまな形式でレポートを生成できます。

testcafeでファイルアップロードを処理する方法は？

TestCafeは、ファイルアップロードのための特別な操作を提供します。 T.SetFileStoupload操作を使用してファイルをアップロードできます。この操作は、ファイル入力を識別するセレクターと、ファイルをアップロードするパスを指定する文字列を採用します。

パフォーマンステストにTestCafeを使用できますか？

TestCafeは主に機能テストに使用されますが、パフォーマンステストにも使用できます。それを使用して、操作が完了するのにかかる時間、ページの読み込み、Ajax要求を完了することができます。ただし、より詳細なパフォーマンステストのために、専用のパフォーマンステストツールを使用する必要がある場合があります。

この改訂された出力は、元の画像の位置と形式を維持しながら、一貫した見出しスタイルを使用し、より良い読み取りのために全体的な構造を改善します。

以上がTestCafe：node.jsを使用したエンドツーエンドのWebアプリテストが簡単ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。