TestCafeを使用して、1つのコンソールコマンドで1杯のホットコーヒーをオフィスに配達します。

今日は、新しいオープンソーステストフレームワークを使用して、コーヒー配信Webサービスのエンドツーエンドテストの問題を簡単かつエレガントに解決する方法についてお話します。 サイトの運用だけでなく、管理者、さらには配送サービスもチェックします。また、これに最小限の労力と時間を費やします。 そして、努力のボーナスとして、ホットコーヒーのマグカップを手に入れます。 猫の下の冒険好きの人たちに聞いて…

今日、e2e Webテストの必要性は誰にとってもニュースではありません。 遅かれ早かれテスト用のサービスを選択するという問題は、Webアプリケーションの優位性を高めます。 一般の人々は、Seleniumから派生したさまざまなソリューションを認識しており、その大半はWebDriverを使用して構築されています。 まったく異なる原則に基づいて構築された、新しいオープンソーステストフレームワークTestCafeを使用した作業を実証します。 最後に、ビジネスから話を始めましょう。

TestCafeをインストールする

いつものように、すべては製品のインストールから始まります。 もちろんこれは非常に退屈ですが、TestCafeの完全なインストールは1つのコンソールコマンドで実行されます。

npm install -g testcafe
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Seleniumまたはそれをベースにしたフレームワークをインストールする必要がある場合、TestCafeを使用するのがいかに簡単で高速であるかが驚くでしょう。 お気づきかもしれませんが、TestCafeはNode.js上に構築されています。つまり、Java、ブラウザプラグイン、オペレーティングシステムへのバインディングはありません。 必要なのは、コンピューターにNode.jsをインストールすることだけです。

ここで、テストを配置するファイルを作成し、 get-a-cup-of-coffee.jsという名前を付けます。 ファイルで、 フィクスチャを作成します-テストセット、ページアドレスを指定し、空のテストを作成します。

 fixture `Let\'s take a look at the new TestCafe` .page ` url     (    )`; test(`Get a cup of coffee`, async t => { // TODO: test });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TestCafeフレームワークの優れた機能の1つは、ブラウザでサポートされているか、Node.jsのバージョンに関係なく、テストでES6およびES7構文を使用できることです。 Babelを使用したTestafeは、すべてのコードをES5構文に変換します。

テストライティング

ページ要素を使用したアクションの実行

テストの作成を始めましょう。 ホットコーヒーの配達セクションに移動しましょう。 すべてが非常に簡単です-「メニュー」項目をクリックして、「コーヒー」項目を選択します。

 test(`Get a cup of coffee`, async t => { await t .click(Selector('#nav').find('a').withText('')) .click(Selector('#content').find('#smenu-150')); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テスト中に、新しいページへのいくつかの移行があることに注意してください。 しかし、あなた自身が見るように、テストのどこにも、ページの読み込み、フォームの送信、またはXHRリクエストへの応答を待機する必要があるポイントと時間を示しません。 TestCafeはこれらのすべての責任を自分自身に負っていますので、心配する必要はありません。

アクションを実行する必要がある要素を示すために、 セレクターを使用しました。 TestCafeのセレクターを使用すると、DOM要素に関連するすべての作業を実行できます。 これを行うには、css-セレクターまたは関数など、クライアントでアイテムを取得する方法を指定する必要があります。 また、TestCafeは、ページ階層内の場所または指定されたフィルター（テキスト、インデックス、カスタムフィルター）によって要素を検索できる複合セレクターを作成するためのAPIを提供します 。

必要なメニューに移動したら、「クラシックラテ」をバスケットに追加します。

 await t.click(Selector('.title').withText(' ').sibling('.labels'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページ要素のステータスを確認する

次に、製品がバスケットに追加されていることを確認する必要があります。 適切なページに移動します。

 await t.click('.myShop-cartmini');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

検証には、TestCafeが提供する組み込みのアサーションを使用します。 そして、興味のあるページ要素のプロパティの値を取得するために、再びセレクターを使用します。 セレクタには、テストで直接実行したり、アサーションに渡すことができる非同期プロパティとメソッドのセットが含まれています。 2番目の場合、アサーションは待機メカニズムをアクティブにします。 実際、アニメーションが完了するまで待機するか、アサーションを実行する前にXHRリクエストへの応答を受信する必要が非常に頻繁にあります。

既存のすべてのアサーションライブラリは、人為的な遅延の使用を伴うため、テストの完了にかかる時間が大幅に増加し、テストが不安定になります。 TestCafeはこれを自分で処理します。 プロパティとセレクターメソッドの使用時にテストが失敗した場合、テストはすぐにはクラッシュしません。 アサーションは複数回計算され、各反復で現在の値を取得し、タイムアウトに達し検証が正常に完了しなかった場合にのみ低下します。 このアプローチにより、テスト済みページの応答時間を気にすることなく、安定した高速で信頼性の高いテストを作成できます。

バスケット内の商品の数と名前を確認してください。

 const items = Selector('.myShop-cart-item'); await t .expect(items.count).eql(2) .expect(items.nth(0).innerText).contains(' ') .expect(items.nth(1).innerText).contains('');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クライアントコードの実行

クライアント関数を使用して、バスケット内の商品の数量を取得することもできます 。 このような関数はクライアントで実行され、結果がサーバーに返されます。 クライアント関数内では、ページに追加したかのように、任意のjsコードを使用できます。

 const getOrderCount = ClientFunction(() => document.querySelectorAll('.myShop-cart-item').length); let orderCount = await getOrderCount();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

t.evalメソッドを使用して、クライアントでコードをすぐに実行する方法もあります。

 orderCount = await t.eval(() => document.querySelectorAll('.myShop-cart-item').length);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

取得したデータが期待どおりであることを確認します。

 await t.expect(orderCount).eql(2);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

完了とチェックアウト

コーヒー選択メニューに戻り、「フラットホワイトポップコーン」をバスケットに追加します。

 await t .click('.myShop-cartmini') .click(Selector('#content').find('#smenu-150')) .click(Selector('.title').withText('  ').sibling('.labels'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

バスケットに行き、商品の番号と名前が変更されたことを確認します。

 await t .click('.myShop-cartmini') .expect(Selector('.myShop-cart-item').count).eql(3) .expect(Selector('.myShop-cart-item').nth(0).innerText).contains(' ') .expect(Selector('.myShop-cart-item').nth(1).innerText).contains('  ') .expect(Selector('.myShop-cart-item').nth(2).innerText).contains('');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで注文プロセスが完了します。連絡先の詳細と配送先住所を入力するページに移動します。 必須フィールドに入力した後は、[送信]ボタンをクリックするだけです。

 await t .click('.myShop-button-order') .typeText('#ffio', ' ') .typeText('#ftel', '+79999999999') .click('#fgorod') .click(Selector('#fgorod > option').withText('--')) .typeText('#fulica', '') .typeText('#fdom', '1') .click('input[type="submit"]');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストの準備ができました。 コードには余分なものは何もありません。実行およびアクションのリストのみが含まれ、ページ要素を操作しますが、読み取りと保守については明確なままです。

試運転

次のコンソールコマンドでテストを実行します。

 testcafe chrome get-a-cup-of-coffee.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

TestCafeは、マシンにインストールされているブラウザーを検出し、起動してテストを実行します。

コンソールには、テストの結果に関する詳細情報が表示されます。



サイトのエラーが原因でテストは失敗しました。 テストがクラッシュした場合、TestCafeはコールサイトとコールスタックを提供し、対応するオプションが指定されている場合は 、クラッシュ中に撮影されたスクリーンショットへのリンクも提供します 。 したがって、TestCafeのおかげで、1つの簡単なテストを書くだけでエラーを見つけることができました。 エラーを発見したので、サイトの所有者にこれを報告し、将来のエラーを避けるためにテストにTestCafeを使用するようアドバイスしました。

次のコンソールコマンドを使用して、ページエラーをクラッシュさせずにテストを実行します。

 testcafe chrome get-a-cup-of-coffee.js --skip-js-errors
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストレポートはさまざまな形式で表示できます。これには、適切なプラグインのセットがあります。 これらを使用すると、継続的インテグレーションのメインシステムとの作業を構成できます。 ローカルだけでなく、リモートデバイスやクラウドデバイス（ Sauce Labsなど ）でもテストを実行できます。 サービスを最終的に自動化するために、結果を継続的な統合システムに統合することが残っています。 誰が知っているか、おそらく将来、コーヒーの温度、配達の時間、さらには味のチェックを追加したいと思うでしょう。 おそらく、このプロセスの自動化と統合に関する別の記事を書くでしょう:)。

結論

ご覧のとおり、私たちは当初の目標を達成しました。1つのチームで、オフィスでコーヒーを直接注文し、サービスの有効性を確認しました。 もちろん、これはユーモラスな例です。私たちは、4都市だけでコーヒーを配達している会社を取り上げました。 しかし、あなたはあなたの側にあるそのようなサービスのための簡単なテストを書くことができます。

完全な例はここにあります 。 PageObject手法を使用しました 。これにより、テストコードをより読みやすく、理解しやすくすることができます。

読んだ後、 TestCafeでコーヒーをお楽しみください。 あなたはコメントで議論であなたのすべての質問について議論できます。 良い一日を！