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

コアポイント：

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

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

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

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

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

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

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

最初のテストを書く

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

• タスクランナーのテストタスクを作成
• 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 => {
    // 我們稍后將添加測(cè)試代碼
});

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

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

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

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

ページオブジェクト

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チームは、テストでページオブジェクトパターンの使用を奨勵(lì)しています。このパターンを使用すると、テスト対象のページのオブジェクト表現(xiàn)を?qū)毪?、テストコードで使用できます。私たちがこれをどのように行うか見てみましょう。

新しいページ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を自動(dòng)的に見つけて起動(dòng)し、テストを?qū)g行します。

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でこのテストを?qū)g行できます。

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つの內(nèi)蔵レポート形式から選択するか、さまざまな形式をサポートするアドオンを検索できます。

IDE

からテストを開始します

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

クラウドテストサービスでテストを?qū)g行する

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

このセクションでは、人気のある自動(dòng)テストクラウドであるSaucelabsでテストを?qū)g行します。異なるオペレーティングシステムとブラウザを備えた數(shù)百の仮想マシンをホストしています。

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

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

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

npm install -g testcafe

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

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

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

タスクランナーとの統(tǒng)合は、開発時(shí)にTestCafeテストを?qū)g行するための優(yōu)れたソリューションです。そのため、TestCafeコミュニティは、最も人気のあるnode.jsタスクランナーと統(tǒng)合するプラグインを開発しました。

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

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

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

test('My first test', async t => {
    // 我們稍后將添加測(cè)試代碼
});

testcafeをgulp.jsと統(tǒng)合する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ファイルでテストを?qū)g行します。 Gulp Plugin APIの詳細(xì)については、GitHubページを參照してください。

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

継続的な統(tǒng)合プラットフォームでのテスト

TestCafeは、強(qiáng)力なコマンドラインとプログラミングインターフェイスを提供し、ほとんどの最新の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テストをプロジェクトのプロセスに統(tǒng)合する方法を示します。 TestCafeでWebアプリケーションをテストするのがどれほど簡単かを自分で體験できます。

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

testcafe faq

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

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

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

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

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

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

複數(shù)のブラウザでTestCafeテストを同時(shí)に実行できますか？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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