WEBシステムのセットアップ-ヘッドレスクロムブラウザー、chromedriver、nightwatch、およびUbuntuのnode.jsに基づいたテスト

まえがき

こんにちは、Habr！ この問題は、Instagramで認証用のロボットを作成するという私の問題で発生しました。 タスク全体を書くのではなく、リモートサーバーに必要なツールをセットアップするという形で実装の一部だけを書くことにします。



WEBテストは膨大で曖昧な分野であり、WEBアプリケーションのテストだけでなく、たとえば、ソーシャルネットワークを操作するためのパーサー、IoTロボット、ボットの構築など、JavaScriptのみを使用して問題を解決することもできます。 ！

「テスト」というフレーズが気に入らない可能性があります。このフレーズには、たとえば、Instagram、Facebookにログインして番号を入力できるボットを作成できる興味深いものが含まれているためかもしれません私たちに代わってアクションを実行すると同時に、フロントエンドがどのように実行されるかを観察するのは退屈ですが、テストは理にかなっており、すでにW3Cコミュニティによって標準化されており、開発を続けています。

タスクの簡単な説明

テストを使用して解決するために設定するタスクは何ですか？ 必要なのは、一部のプログラムがブラウザを開き、自動的にリンクをクリックし、テキストを入力して、何が起こるかを表示するか、必要な結果パラメーターを返すことだけです。 そして、これはすべてLinux上で実行する必要があります。Ubuntu16.04ディストリビューションにはGUIがありません。 本格的なコンピューターに障害が発生するため、コンソールのみを使用して使い慣れたブラウザーを起動します。

GUIのない​​テストソリューションには何が必要ですか？

最新の「排他的な」JavaScriptテストに必要なすべて：

1. ヘッドレスクロムブラウザーv 59（ クロムブラウザー ）-コンソールのヘッドレスブラウザー。
2. Node.js（ nodejs ）-JavaScriptサーバー。
3. WebDriver（ chromedriver ）-JavaScriptテストを処理し、Node.jsを介してchrome -browserを操作するためのドライバー。
4. Nightwatch.js（ nightwatch ）は、LinkedInのNode.jsを使用して自動テストを作成および実行するための有名なライブラリです。

サーバーのインストール

すべてのコンポーネントをテスト用に順次インストールする手順を記述します。







1）。 cromium-browserをインストールします。 クロムブラウザをインストールする前に、それに必要なすべての依存関係をインストールする必要があるため、一連のアクションを実行する必要があります。

依存関係をインストールします。

sudo apt-get -f install
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初のインストールを試みたが、依存関係がない場合は、次のコマンドを実行して、 / var / cache / apt / archivesのダウンロードしたファイルを削除するとよいでしょう。

 sudo rm /var/cache/apt/archives/chromium*
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

cromium-browser自体をインストールします。

 sudo apt-get install chromium-browser
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2）。 nodejsをインストールします。 Node.jsのインストール方法とすべてのインストール方法については、 ここで詳しく説明します 。



最も簡単なインストール方法の1つ：

この方法では、Ubuntuリポジトリから古い安定バージョンv4.2.6がインストールされる可能性が高いため、このテスト例はテストされていません。 PPAまたはNVMを使用してバージョン7以降をインストールする場合、安定した動作に最適です。

 sudo apt-get update sudo apt-get install nodejs
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、 chromedriverとnightwatchをインストールする必要があるパッケージマネージャーも必要です 。

 sudo apt-get install npm
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Node.jsからJavaScriptテストを処理します。







3）。 chromedriverをインストールします。 このドライバーはWebDriverとして機能します。これは、リンクをクリックしてテキストをテキストフィールドやフォームに挿入できるAPIを提供します。このため、Chromedriverを使用します。 chromedriverをインストールするには、次のコマンドを実行します。

 npm install chromedriver
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

4）。 ナイトウォッチのインストール。 Nightwatch.jsは、JavaScript自動テストを作成および実行するためのライブラリです。

 npm install nightwatch
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストスキーム

簡単に言うと、スキーム全体はNightwatch.jsのテストがChromedriverにリクエストを送信するように見え、ChromedriverはChromeブラウザを呼び出してテストを実行します（フォームフィールドに入力してリンクをクリックします）。

最初のテストをセットアップして実行する

デフォルトのNightwatch.js構成ファイルはnode_modules / nightwatch / binフォルダーにあり、そこからデフォルトで設定が取得されます。Nightwatch.jsのカスタム設定を設定するには、プロジェクトルートにnightwatch.jsonファイルを作成し、そこに必要なものをすべて書き込んで、Chromedriver （Seleniumや他のサードパーティのものなしで）直接使用され、Chromiumは「ヘッドレス」モードで起動しました。

 { "src_folders": ["tests"], //      "output_folder": "reports", "custom_commands_path": "", "custom_assertions_path": "", "page_objects_path": "", "globals_path": "globals.js", //   ,         "selenium": { "start_process": false //   , ..    Chromedriver  }, "test_settings": { "default": { "selenium_port": 9515, //   Chromedriver   ("selenium_"    —   ) "selenium_host": "localhost", "default_path_prefix" : "", "desiredCapabilities": { "browserName": "chrome", "chromeOptions" : { "args" : ["--no-sandbox", "--headless", "--disable-gpu"], //       headless- "binary" : "/usr/bin/chromium-browser" //      }, "acceptSslCerts": true } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

globals.jsの行に注意する必要があります 。 このファイル内では、すべてのテストにグローバルコンテキストを設定できます。 最後にすべてのテストと釘を実行する前に、Chromedriverが開始されるように記述します。

 const chromedriver = require('chromedriver'); module.exports = { before: function(done) { chromedriver.start(); done(); }, after: function(done) { chromedriver.stop(); done(); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、テストシステムの状態を確認するためのテストを作成する必要があります。 たとえば、google.comを開いて何かを検索し、検索結果を確認する必要があります。 もちろん、 Nightwatch.js APIは、すべての種類のチェックのためのさまざまなメソッドを提供しますが、初心者には十分なものがあります。

 module.exports = { 'Test google.com': function(browser) { const firstResultSelector = '#rso cite._Rm'; browser .url('http://google.com', () => { console.log('Loading google.com...'); }) .waitForElementVisible('#lst-ib', 5000) .execute(function() { document.getElementById('lst-ib').value = ' WebSofter!'; }) .submitForm('form') .waitForElementVisible(firstResultSelector, 5000) .getText(firstResultSelector, result => { browser.assert.equal(result.value, 'blog.websofter.ru/'); }) .end(); } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次のコマンドでコンソールから起動します。

 nightwatch --test google.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

発言。 まず、Node.jsがnvmを介してインストールされている場合、次のコマンドでセッションをアクティブ化する必要があります。

 nvm ~/.profile
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、テストを実行するには、プロジェクトのルートにプロジェクトデータを使用してpackage.jsonを作成する必要があり、コマンドを使用して起動ファイルの形式でgoogle.jsを指定する必要があります。

 npm init
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、テストを実行するコマンドを既に実行します。

 nightwatch --test google.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイル内の上記のコードの結果は、コンソールの結果になります。







つまり、メインのGoogleサイトにアクセスし、「WebSofter Blog！」というフレーズを検索に使用します。その結果、検索結果ページに特定のタグが存在するかどうか、ブログのアドレスを比較します。



この記事から作業例をダウンロードできます。

おわりに

当初、Nightwatch.jsはSeleniumとの連携に重点を置いていました。 しかし今日、彼女はchromedriverを直接操作する方法を知っており、PhantomJSではSeleniumの必要性はさらに少なくなりますが、それらと統合することは可能です。



ご注意 ヘッドレスChromeは、v59のMacおよびLinuxで利用可能です。 WindowsサポートはChrome v60に含まれています。 お使いのChromeのバージョンを確認するには、開く

 chrome://version
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ヘッドレスChromeはChromeのバージョン59に搭載されています。これは、ヘッドレス環境でChromeブラウザを起動する方法です。 GUIのない​​コンソールで。 PhantomJSも同様に機能しました。 Chromeは、ChromiumとBlinkエンジンが提供する最新のWebプラットフォーム機能をすべてコマンドラインに追加します。



なぜこれが便利なのですか？



ヘッドレスブラウザーは、自動化されたテストおよび目に見えるユーザーインターフェイスシェルを必要としないサーバー環境に最適なツールです。 たとえば、実際のWebページでいくつかのテストを実行したり、PDFファイルを作成したり、ブラウザーがURLを表示する方法を確認したりできます。 さらにリンクで見つけることができます

関連リンク

• ヘッドレスクロムの使用を開始する
• JavaとSeleniumを使用せずに簡単なセルフテストシステムをセットアップする方法
  
  
• サイトwww.blog.websofter.ruのこの記事への公式リンク