This is a image デモ: 自動でYoutube へ Chrome でアクセスして Cafe Music と検索してブラウザを閉じる。ffmpegで変換 ffmpeg -i input.mov -vf size-1200:-1 -r 10 output.gif

TL;DR;

Vue.js の CLI でプロジェクトを作成する際に、e2eテストでは Nightwach.jsがリコメンドされるものの触ったことがなかったため触ってみた。

導入までの流れを記したに過ぎず、使用にあたってはNightawatch.jsのメソッド類やConfigurationの記述を調べる必要あり。

Seleniumとは何か

こちらの記事が大変参考になる。 Seleniumアレルギーのための処方箋 - Qiita

こちらの記事では > ブラウザ自動化のためのエコシステム全体 を称して「Selenium」と呼び習わしています。

とあり、テストフレームワークの内部ではSeleniumのコアが機能しており、講義ではテストフレームワーク自体も含めてSeleniumと呼び得る、、、ということだろうか。

本家サイトhttps://www.seleniumhq.org/より

Selenium automates browsers. That’s it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) be automated as well.

Selenium has the support of some of the largest browser vendors who have taken (or are taking) steps to make Selenium a native part of their browser. It is also the core technology in countless other browser automation tools, APIs and frameworks.

Selenium はブラウザを自動化します。基本的にはブラウザの自動化が主目的ですが、それだけでなく web-basedのタスクをいい感じに自動化します!

ブラウザによってSeleniumはサポートされ続け、今ではブラウザの一部ともなっています。ブラウザの自動化ツールとして、APIとして、フレームワークとして、Seleniumはこれらの中心技術でもあります。

Selenium WebDriver と Selenium IDE

Selenium の本家ページへ行くと、Selenium WebDriver と Selenium IDE の二つが大きく取り上げ得られている。 それぞれの説明文や解説エントリを読むと、 - Selenium WebDriver コードを書いて自動化を実行するためのAPI群 - Selinium IDE ブラウザのアドオンで、GUIでサクッと自動化

というようだ。

Selenium WebDriver is the successor of Selenium Remote Control which has been officially deprecated. The Selenium Server (used by both WebDriver and Remote Control) now also includes built-in grid capabilities.

Selenium WebDriver はSelenium Remote Control をするよ。

Then you want to use Selenium IDE; a Chrome and Firefox add-on that will do simple record-and-playback of interactions with the browser.

Selenium IDE は Chrome と FIrefox のアドオンで、ブラウザ上で実行・記録といったインタラクションを実行するよ。

非公式の解説では下記のものが概要を掴みやすい。

iPhone/Android含むブラウザ自動テストの最終兵器Selenium WebDriverとは (12):Selenium WebDriverでWebアプリのテストが変わる(前編) - @IT

Nightwatch.js

Nightwatch.js とは何か

Nightwatch.js 本家サイト

Nightwatch.js is an integrated, easy to use End-to-End testing solution for browser based apps and websites, written on Node.js. It uses the W3C WebDriver API to perform commands and assertions on DOM elements.

Nightwatch.js はブラウザベースのアプリ/ウェブサイトのために諸々の機能を統一したe2eテストsolutionです。 Node.jsで書かれており、コマンド、エレメントに対するアサーションの実行を、WebDriver APIにより実現します。

ここでいう WebDriver API が、Seleniumのコア部分に相当するため、Nightwatch.jsを初めとするテストフレームワークを知る上ではSeleniumについては少しは知っておくとよい。

SeleniumとWebDriverの関係は、ホッチキス(商標)とステープラ(一般名詞)のようなものです。固有のプロダクトとして始まったSeleniumは、WebDriverという一般名詞になりW3Cで標準化されようとしています(まだドラフト)。

Seleniumアレルギーのための処方箋 - Qiitaより

Nightwatch.js のインストール

Getting Started | Nightwatch.jsを参照

Getting started with automation testing and Nightwatch.jsを参照

  • JavaSDK をインストール

    brew cask install java

  • Selenium stand alone server をインストール

    npm install selenium-standalone@latest --save-dev

    • Selenium server をインストール
    • package.json に "e2e-setup": "selenium-standalone install" をしておいて実行。 これをやっておかないとSelenium-serverの実行ファイルである x.xxx.x-server.jar ファイルが生成されない。
  • Chrome driver をインストール

    npm install chromedriver --save-dev

  • Firefox driver をインストール

    npm install geckodriver --save-dev

  • Nightwatch をインストール

    npm install nightwatch

nightwatch.jsonファイルの作成(configurationファイル)

E2E Testing with Nightwatch: Part One | Codementorを参照

MacにFirefox をインストールしていないので、今回はChromeDriveのみ指定しました。 defaultbrowser を変更することで、テストするブラウザを設定できます。

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : true,
    "server_path" : "node_modules/selenium-standalone/.selenium/selenium-server/3.141.5-server.jar",
    "log_path" : "./reports",
    "host": "127.0.0.1",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "./node_modules/chromedriver/bin/chromedriver"
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "chrome",
        "marionette": true,
        "javascriptEnabled": true,
        "acceptSslCerts": true
      }
    },

    "chrome" : {
      "desiredCapabilities": {
        "browserName": "chrome"
      }
    },

    "edge" : {
      "desiredCapabilities": {
        "browserName": "MicrosoftEdge"
      }
    }
  }
}

テストファイルの作成

testsディレクトリを作り、main.jsファイルを作成します。 テストではないですが、サンプルとして以下を実行。

module.exports = {
    'Searching nightwatch in youtube': function (browser) {
        browser
            .url("http://www.youtube.com/")
            .pause(2000)
            .setValue('#search' , "Cafe music")
            .pause(2000)
            .keys(browser.Keys.ENTER)
            .pause(4000)
    },
    after: function (browser) {
        browser
            .end();
    }
};

テスト実行

npx nightwatch tests/main.js でテストを実行。 グローバルインストールしている場合は、npx はommitで。