WebDriverAPIを使用した自動ブラウザテスト

公開: 2022-03-10
クイックサマリー↬この記事では、Windows10およびMicrosoftEdgeでWebDriverJSを使用して、ブラウザーに対してテストスクリプトを自動的に実行するための概念、テクノロジ、およびコーディング手法の概要を説明します。

ローカルまたはリモートで開発コードを実行するときに、さまざまなブラウザーを手動でクリックすると、そのコードをすばやく検証できます。 レイアウトと機能の観点から、意図したとおりのものであることを視覚的に検査できます。 ただし、これは、顧客が利用できるさまざまなブラウザやデバイスタイプに基づいて、サイトのコードベース全体をテストするためのソリューションではありません。 そこで、自動テストが実際に登場します。

Seleniumプロジェクトが主導する自動化されたウェブテストは、プラットフォーム間でブラウザに対してテストを作成、管理、実行するための一連のツールです。

WebDriverJS API

WebDriver APIは、開発者からデバイス/ブラウザー固有のバインディングを抽象化する標準であり、選択した言語で記述されたテストスクリプトを一度記述して、WebDriverを介してさまざまなブラウザーで実行できます。 WebDriver機能が組み込まれているブラウザもあれば、ブラウザとOSの組み合わせのバイナリをダウンロードする必要があるブラウザもあります。

webdriverjs api

WebDriverAPIを介したブラウザの駆動

W3CのWebDriver仕様には、ブラウザをプログラムで制御するために開発者が利用できるAPIが記載されています。 この図は、ブラウザーのプロパティを取得および設定するために使用できる一般的なWebDriverコレクションとAPIのいくつかを含むサンプルページを示しています。

webdriverjs api

オーサリングテスト

WebDriverでサポートされている言語バインディングに基づいて言語を選択できます。 メインのSelenium / WebDriverJSプロジェクトでサポートされているコア言語は次のとおりです。

  • C＃
  • Java
  • JavaScript（ノード経由）
  • Python
  • ルビー
ジャンプした後もっと！ 以下を読み続けてください↓

テストは、ページのレイアウトの確認、サーバー側の呼び出しから返される値、ユーザーインタラクションの予想される動作から、ショッピングカートのワークフローが期待どおりに機能することを確認するなどのワークフローの検証までさまざまです。

説明のために、いくつかの異なるモデル-ビュー-コントロールJavaScriptフレームワークに実装されているデモアプリケーションであるTODOMVCアプリケーションをテストしていると仮定します。 このシンプルなアプリケーションは、To-Doアイテムを入力し、アイテムを編集、削除、および完了としてマークするためのUIを提供します。 https://todomvc.com/examples/react/でReactベースの例を使用します。

その後、URLを変更するだけで、Backbone.jsとVue.jsの例に対してReactの例のテストを実行する方法を示すことができます。

  • 完全なJSサンプルファイルの要点

このデモンストレーションでは、ノードで実行されているJavaScriptでテストを次のように記述します。

  1. 3つのToDoアイテムを追加し、入力した内容がToDoアイテムに作成されたことを確認します。
  2. ダブルクリックしてバックスペースキーボードコマンドを送信し、テキストを追加して、そのアイテムを変更します。
  3. マウスAPIを使用して、を使用してそのアイテムを削除します。
  4. 完了したリストから項目をチェックします。

基本的な自動化テスト環境をセットアップする

まず、JavaScriptを使用してWebDriverを実行するようにWindows10マシンをセットアップすることから始めましょう。 ノードからのWebDriverの呼び出しは、ほとんどの場合非同期になります。 コードを読みやすくするために、ES2016のasync / await overPromisesまたはコールバックを使用しました。

非同期/待機機能をサポートするには、v7.6より新しいnode.jsをインストールするか、Babelを使用してクロスコンパイルする必要があります。 また、ノードの編集とデバッグにはVisual StudioCodeを使用します。

MicrosoftEdge用のWebDriverJS

各ブラウザには、ブラウザ自体と対話するためにローカルで必要となるバイナリファイルがあります。 そのバイナリは、Selenium WebDriverAPIを介してコードによって呼び出されます。 Microsoft EdgeWebDriverの最新のダウンロードとドキュメントはここにあります。

テストを実行するEdgeのバージョンは、一致するバージョンのMicrosoftWebDriver.exeでテストする必要があることに注意してください。 対応するMicrosoftWebDriver.exeバージョン5.16299で安定バージョンのEdge（16.16299）を使用します。

MicrosoftWebDriver.exeをパス、またはテストスクリプトが実行されるのと同じフォルダーに配置します。 この実行可能ファイルを実行すると、コンソールウィンドウが起動し、WebDriverJSが送信される要求を処理することを期待しているURLとポート番号が表示されます。

他のブラウザ用のWebDriverJS

構成変数を設定し、それぞれのブラウザーに適切なバイナリドライバーをインストールすることで、WebDriverJSに別のブラウザーでテストを実行するように簡単に指示できます。 あなたはここでそれらを見つけることができます：

  • Apple Safari：Safari10以降にバンドルされています
  • Google Chrome：ChromeDriver
  • Microsoft Internet Explorer：SeleniumプロジェクトのIEDriver
  • Mozilla Firefox：Geckodriver
  • Opera：OperaChromiumDriver

JavaScript用のSeleniumWebDriverJS

JavaScriptを介してダウンロードしたバイナリドライバーを操作するには、JavaScript用のSeleniumWebDriver自動化ライブラリをインストールする必要があります。 これは、以下を使用してノードパッケージとして簡単にインストールできます。

npm install selenium-webdriver

自動化コードの記述

ブラウザ固有のドライババイナリがシステムのパスまたはローカルフォルダにあり、npmを介してSelenium WebDriverをインストールしたら、コードを使用してブラウザの自動化を開始できます。

サンプルコードを、必要なさまざまなステップに分解してみましょう。

  1. ライブラリをロードして操作するローカル変数を作成します。
     var webdriver = require('selenium-webdriver');
  2. デフォルトでは、WebDriverJSは、ローカルで実行されており、ドライバーファイルが存在することを前提としています。 後で、ブラウザを初めてインスタンス化するときに構成情報をライブラリに渡す方法を示します。 WebDriverJSは、「capabilities」と呼ばれる構成変数を使用してインスタンス化され、使用するブラウザードライバーを定義します。
     var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";
  3. 次に、変数を作成し、capabilities config変数を使用してbuild（）を呼び出して、WebDriverJSにブラウザーをインスタンス化します。
     var browser = new webdriver.Builder().withCapabilities(capabilities).build();
  4. ブラウザを操作できるようになったので、 `get`メソッドを使用してURLに移動するようにブラウザに指示します。 このメソッドは非同期であるため、 `await`を使用して終了するまで待機します。
     // Have the browser navigate to the TODO MVC example for React await browser.get('https://todomvc.com/examples/react/#');
  5. 一部のブラウザおよびシステムでは、WebDriverJSバイナリにURLに移動してページをロードする時間を与えるのが最善です。 この例では、WebDriverJSの管理機能を使用して1秒（1000ms）待機します。
     //Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);
  6. これで、ブラウザ変数を介して実行中のブラウザにプログラムでフックできます。 このドキュメントの前半にあるWebDriverAPIコレクションを示すコレクション図に注意してください。 Elementsコレクションを使用して、ページから特定の要素を取得します。 この場合、TODOMVCの例で入力ボックスを探しているので、いくつかのTODO項目を入力できます。 このフィールドに割り当てられたクラスであることがわかっているので、WebDriverJSにクラスルール.new-todoに一致する要素を探すように依頼します。 返されるデータを変更することはできないため、定数を宣言します。クエリを実行するだけです。 これにより、CSSパターンに一致するDOMの最初の要素が検出されることに注意してください。これは、1つしかないことがわかっているため、この場合は問題ありません。
     const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));
  7. 次に、sendKeys関数を使用するためのハンドルを取得したフィールドにキーストロークを送信します。 競合状態を回避するために、エスケープされたエンターキーを独自の待機ラインに配置します。 promiseを処理するときに、 for (x of y)反復パターンを使用します。 toDoTestItemsは、3つの文字列、1つの文字列変数（後でテストします）、および2つのリテラルの配列です。 裏では、WebDriverJSは文字列の個々の文字を一度に1つずつ送信しますが、文字列変数全体をsendKeysに渡すだけです。

     var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("\n"); }

この時点で、ノードを使用してスクリプトを実行し、ページに移動してこれら3つのテストTODO項目を入力するブラウザーが表示されるかどうかを確認しましょう。 次のようなasync関数で最初の変数宣言の後にコードをラップします。

 async function run() {

コードの最後で関数}を閉じてから、次のコマンドでその非同期関数を呼び出します。

 run();

JSファイルを保存します。 ノードのコマンドウィンドウに移動し、JSファイルを保存したフォルダーに移動して、 node yourfile.jsを実行します。

ブラウザウィンドウが表示され、TODOMVCファイルに送信されたテキストがアプリケーションの新しいTODOエントリとして入力されます。 おめでとうございます—WebDriverJSを使用できます。

この例でWebDriverJSがロードするURLを他のTODOMVCサンプルの1つに変更してみて、同じテストコードが異なるフレームワークに対して実行できることを確認してください。

 await browser.get('https://todomvc.com/examples/vue/');

BrowserStackでのテストの実行

このテストがマシン上でローカルに実行される方法を示しました。 BrowserStackなどのオンラインテストサービスを使用して、同じテストを簡単に実行できます。 BrowserStackサービスへの無料アクセスにサインアップして、無料のライブおよび自動テストのためにMicrosoftEdgeブラウザーにアクセスします。 サインインしたら、[自動化]セクションに移動し、自動テストアカウント設定を検索します。 これらをWebDriverJS関数に渡して、コードを介してサインインし、テストセッションに名前を付けて、アクセストークンを渡す必要があります。

次に、これらの値をcapabilities変数に追加し、WebDriverビルダーを再度呼び出します。

 var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername', 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

BrowserStackが受け入れることができるcapabilities変数と値について詳しくは、こちらをご覧ください。

次に、 builder関数を呼び出して、BrowserStackサーバーのURLを渡します。

 var browser = new webdriver.Builder(). usingServer('https://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

最後に、WebDriverJSにブラウザを終了するように指示する必要があります。そうしないと、ブラウザは実行を継続し、最終的にはタイムアウトになります。 テストファイルの最後にあるquit関数を呼び出します。

 browser.quit();

これで、NodeJSを使用してJSテストファイルを実行すると、BrowserStackのクラウドサービスでホストされているブラウザーにテスト命令が送信されます。 BrowserStackの「自動化」セクションに移動して、テストジョブの開始と停止を確認できます。 完了すると、送信されたWebDriverコマンドを参照したり、テスト実行中に定期的にブラウザー画面の画像を表示したり、ブラウザーセッションのビデオを表示したりすることができます。

BrowserStackのAutomateサービスで実行されたテストのビジュアルログ機能のスクリーンショット
BrowserStackのAutomateサービスで実行されたテストのビジュアルログ機能のスクリーンショット

アサーションを使用した値のテスト

サイトをテストするときは、実際の結果と期待される結果を比較しています。 これを行う最良の方法は、アサーション条件が満たされない場合に例外がスローされるアサーションを使用することです。 この例では、アサーションライブラリを使用してこれらのアサーションを表現し、コードを読みやすくします。 あらゆるJavaScriptライブラリで使用できる柔軟性があり、執筆時点で非常に人気があるため、ChaiJSを選択しました。

npmを使用して、Chaiをノードパッケージとしてダウンロードしてインストールします。 コードでは、 chaiを要求する必要があります：

 var expect = require('chai').expect;

私たちは、Expectインターフェースを使用して、自然言語を使用してアサーションを連鎖させることにしました。

長さ、存在、値の包含などをテストできます。

 expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

これらのアサーションの1つが真でない場合、アサーション例外がスローされます。 サンプルコードは、例外を処理していないため、例外がスローされると実行を停止します。 実際には、例外を処理し、テストエラーとパスを報告するノードを持つテストランナーを使用します。

テストランナーによるテストパスの自動化

アサーション例外をより適切に処理するために、テストランナーはノードとペアになって、テストアサーションを含むコードブロックを、例外を失敗したテストケースにマップするtry / catchスタイルの関数でラップします。

この例では、MochaJSテストフレームワークを選択しました。これは、Chaiとの組み合わせがよく、本番コードのテストに使用するものだからです。

ランナーを統合するために、テストスクリプトに追加されたコードと、ノードでコードを実行する方法の変更の両方があります。

テストランナーコードの追加

テストコードを、キーワード「describe」を使用するトップレベル関数とキーワード「it」を使用するサブテスト関数を使用して非同期関数にラップします。 関数は、テストが探しているものの説明でマークアップされます。 この説明は、テスト結果にマッピングされるものです。

MochaJSは、npmを介してノードパッケージとしてインストールされます。

describeを使用したサンプルの最上位関数は次のとおりです。

 describe('Run four tests against TODOMVC sample', async () => {

続いて、論理テストをitキーワードを使用してグループにラップします。

 it('TEST 3: Delete a TODO item from the list by clicking the X button', async () => {

例外を引き起こすこれらの関数内にラップされたアサーションは、これらの説明にマップされます。

NodeJSとMochaJSを使用したコードの実行

最後に、例外を正しく処理するために、MochaJSバイナリを呼び出すノードでテストコードを実行する必要があります。 Mochaに引数を渡して、タイムアウト値、テストファイルを保持する検索フォルダーなどを構成できます。 Visual Studio Codeでデバッガーを接続し、Codeの検査とステップスルー機能を使用するために使用した構成は次のとおりです。

 { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

自動テストは、手動でテストする手間やコストをかけずに、サイトがさまざまなブラウザで一貫して機能することを確認するための優れた方法です。 ここで使用したツールは、利用可能な多くの選択肢のほんの一部ですが、プロジェクトの自動テストの設定と実行に関連する一般的な手順を示しています。