お久しぶりです。

JGです。

前回は Puppeteerを紹介しましたが、今回はnightwatch.jsを試してみたので、 nightwatch.jsについて簡単に説明したいと思います。

概要

nightwatch.jsは一言で表現すると、Seleniumを元に作られたブラウザでのテストを自動化できるツールです。

JavaScriptとTypeScriptに対応しています。

環境構築

Windowsの手順しか書いておりませんが、Macも似たような手順だと思います。

少し手順が多いですが、下記の手順でできると思います。

今回のnightwatch.jsのバージョンは2.5.1です。

1.Node.jsをインストール

公式ドキュメントのバージョンに合わせて16.14.2をインストールしましたが、バージョンによっては上手く環境構築ができない場合がありました。

2.コマンドプロンプトで下記を実行(今回はnightwatchフォルダを作成し、そのディレクトリで実行)

npm init nightwatch

3.幾つかの質問を聞かれるので、下記を選択する

What is your Language - Test Runner setup? (Use arrow keys)
> JavaScript - Nightwatch Test Runner

Where do you want to run your e2e tests? (Use arrow keys)
> Both

Please select your cloud provider
> BrowserStack

Where you'll be testing on? (Press <space> to select, <a> to toggle all, <i> to invert selection,
and <enter< to proceed)
>(*) Chrome

Where do you plan to keep your end-to-end tests?
> tests

What is the base_url of your project?
> http://localhost

詳細な説明は下記の公式ドキュメントを参考にして下さい。

https://nightwatchjs.org/guide/quickstarts/create-and-run-a-nightwatch-test.html

4.質問の回答が終わると、下記がコンソール画面に表示される

TEMPLATE TESTS

To get started, checkout the following templates. Skip/delete them if you are an experienced user.
  1. Title Assertion (nightwatch\templates\titleAssertion.js)
  2. Login (nightwatch\templates\login.js)

RUN NIGHTWATCH TESTS

To run all examples, run:
  npx nightwatch .\nightwatch\examples

To run a single example (ecosia.js), run:
  npx nightwatch .\nightwatch\examples\basic\ecosia.js

5.4に記載されているsingle exampleを実行し、海外のWEBサイトが起動すれば環境構築完了です

npx nightwatch nightwatch/examples/basic/ecosia.js --env chrome

6.下記のエラーが表示される場合はnightwatch.conf.jsのchromeのargsの–no-sandboxのコメントアウトを外して有効にし、再度5を実行する

error: 'unknown error',
message: 'unknown error: Chrome failed to start: crashed.\n' +
 '  (chrome not reachable)\n' +
 '  (The process started from chrome location chrome.exe is no longer running, so ChromeDriver is assuming that Chrome has crashed.)',

指定したURLを起動する方法

ここからはnightwatch.jsできることをJavaScriptを使い、紹介していきたいと思います。

まずは指定したURLを起動する方法です。

testsフォルダ配下に下記のtest.jsを作成します。

describe('test', function() {
    before(browser => browser.navigateTo('https://www.yahoo.co.jp/'));
    it('Demo test', function(browser) {
        browser
            .waitForElementVisible('body');
    });

    after(browser => browser.end());
});

そして下記コマンドを実行すれば、yahooのページが表示されるはずです。

npx nightwatch tests/test.js --env chrome

コンソールを表示する方法

ブラウザのコンソールの内容を表示する方法です。

testsフォルダ配下に下記のtest2.jsを作成します。

describe('test2', function() {
    it('Demo test2', function(browser) {
        browser
    .navigateTo('https://www.yahoo.co.jp/')
    .waitForElementVisible('body')
    .getLog('browser', function(logEntriesArray) {
            console.log('Log length: ' + logEntriesArray.length);
        logEntriesArray.forEach(function(log) {
                console.log(log.level['name'] + ' : '+ log.timestamp + ' : ' + log.message);
        });
            });
    });
});

そして下記コマンドを実行すれば、ブラウザのコンソールの内容が表示されるはずです。

npx nightwatch tests/test2.js --env chrome

ログインする方法

IDとパスワードを入力して、ログインする方法です。

testsフォルダ配下に下記のtest3.jsを作成します。

describe('test3', function() {
    before(browser => browser.navigateTo('https://login.yahoo.co.jp/config/login?.src=www&.done=https://www.yahoo.co.jp/'));
    it('Demo test3', function(browser) {
        browser
            .waitForElementVisible('body')
            .setValue(By.id('username'), 'id')
            .click(By.id('btnNext'))
            .pause(5000)
            .setValue('input[type=password]', 'password')
            .click(By.id('btnSubmit'));
    });
    after(browser => browser.end());
});

そして下記コマンドを実行すれば、yahooにログインできるはずです。

npx nightwatch tests/test3.js --env chrome

スマホでアクセスする方法

スマホでアクセスする方法です。

testsフォルダ配下に下記のtest4.jsを作成します。

describe('test4', function() {
    it('Demo test4', function(browser) {
        browser
        .navigateTo('https://www.yahoo.co.jp/')
    .waitForElementVisible('body')
    .pause(5000);
    });
});

今回は既存のままのnightwatch.conf.jsではスマホでアクセスできないため、専用のconf.jsを作成し、実行時にそれを呼び出す必要があります。

nightwatch.conf.jsをコピーしてnightwatch2.conf.jsを作成し、chromeのargsの下に下記を追加します。

mobileEmulation: {
    deviceName: 'Galaxy Fold'
}

そして下記コマンドを実行すれば、スマホのyahooが表示されます。

npx nightwatch tests/test4.js --env chrome -c nightwatch2.conf.js

スクショをとる方法

スクショをとる方法です。

testsフォルダ配下に下記のtest5.jsとimagesフォルダを作成します。

describe('test', function() {
    before(browser => browser.navigateTo('https://www.yahoo.co.jp/'));    
        it('Demo test', function(browser) {
            browser
                .waitForElementVisible('body')
                .saveScreenshot('tests/images/image_'+get_now_datetime()+'.png');
        });
        after(browser => browser.end());
});

function get_now_datetime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const hour = now.getHours();
    const min = now.getMinutes();
    const sec = now.getSeconds();
    return year + '_' + month + '_' + date + '_' + hour + '_' + min + '_' + sec;
}

そして下記コマンドを実行すれば、yahooにアクセスした画像がimagesフォルダに出力されます。

npx nightwatch tests/test5.js --env chrome

スクレイピングの方法

最後はスクレイピングの方法です。

testsフォルダ配下に下記のtest6.jsとimagesフォルダを作成します。

describe('test6', function()     {
    it('Demo test6', function(browser) {
        const urls = [
            'https://www.yahoo.co.jp/',
            'https://www.google.com/'
        ];

        for (const url of urls) {
            browser
            .navigateTo(url)
            .waitForElementVisible('body')
            .saveScreenshot('tests/images/image_'+get_now_datetime()+'.png')
            .getLog('browser', function(logEntriesArray) {
                console.log('Log length: ' + logEntriesArray.length);
                logEntriesArray.forEach(function(log) {
                    console.log(log.level['name'] + ' : '+ log.timestamp + ' : ' + log.message);
                });
            });
        }
    });
});

function get_now_datetime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const hour = now.getHours();
    const min = now.getMinutes();
    const sec = now.getSeconds();
    const ms = now.getMilliseconds();
    return year + '_' + month + '_' + date + '_' + hour + '_' + min + '_' + sec + '_' +ms;
}

そして下記コマンドを実行すれば、アクセスしたページがimagesフォルダに出力されます。

npx nightwatch tests/test6.js --env chrome

最後に

本当に簡単にnightwatch.jsについて説明しました。

もし興味を持ったかたやコピペしたけど動かない等があれば、JGまで遠慮なく聞いてください。