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


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



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

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



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 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 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アレルギーのための処方箋 - 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の実行ファイルである ファイルが生成されない。
  • Chrome driver をインストール

    npm install chromedriver --save-dev

  • Firefox driver をインストール

    npm install geckodriver --save-dev

  • Nightwatch をインストール

    npm install nightwatch


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": "",
    "port" : 4444,
    "cli_args" : {
      "" : "./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) {
            .setValue('#search' , "Cafe music")
    after: function (browser) {


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