SeleniumでE2Eテストを自動化する

SeleniumでE2Eテストを自動化してみました。 きっかけは、Google Analytics 4を導入したタイミングで既存のJavaScriptの処理に不具合が発生したことで、これを検出することが目的です。

環境構築

必要なライブラリをインストールします。 テストには以前node.jsのプロジェクトで利用したmochaを利用します。 chromeはローカルのメジャーバージョンが100だったので、それを指定しています。

npm install -D selenium-webdriver mocha chromedriver@100

テストの実装

クリックするリンクをCSSセレクタで指定し、クリックイベントを実行します。 手元で実行し、パスすることを確認します。

const { Builder, By } = require('selenium-webdriver');
const assert = require('assert');

// chromeのパスを通す
const chrome = require('selenium-webdriver/chrome');
const chromedriver = require('chromedriver');
chrome.setDefaultService(new chrome.ServiceBuilder(chromedriver.path).build());

let driver;

describe('Selenium_E2E_Test', () => {
  before(() => {
    const options = new chrome.Options()
            .headless()    // Dockerコンテナで実行するのでheadless
            .addArguments(['--disable-gpu', '--no-sandbox', '--disable-dev-shm-usage'])    // メモリの使用量を減らす
            .windowSize({ width: 375, height: 667 });    // スマートフォンの画面サイズ
    driver = new Builder().forBrowser('chrome').setChromeOptions(options).build();
  });

  after(() => {
    return driver.quit();
  });

  it('リンクをクリックしてページの遷移を確認', async () => {
    // ページ遷移
    await driver.get('https://example.com/abc');
    assert.strictEqual(currentUrl, 'https://example.com/abc');

    // リンクをクリック
    await driver.findElement(By.css('.button a')).click();
    currentUrl = await driver.getCurrentUrl();

    // ページの遷移を確認
    assert.strictEqual(currentUrl, 'https://example.com/123');
  });

});

テストの実行

Dockerコンテナで実行するため、Dockerfileを用意します。

Seleniumを利用するため、以下のイメージを利用しました。 github.com

FROM selenium/standalone-chrome:4.1.4-20220427

RUN mkdir /tmp/selenium/
WORKDIR /tmp/selenium/

# node.jsとnpmをインストール
RUN sudo apt update
RUN sudo curl -sL https://deb.nodesource.com/setup_14.x -o nodesource_setup.sh
RUN sudo sh nodesource_setup.sh
RUN sudo apt install -y nodejs
RUN node -v
RUN npm -v

// package.jsonをコピー
COPY package.json /tmp/selenium/
RUN npm install

// テストをコピー
COPY test.js /tmp/selenium/test/

// テストを実行
CMD ["npm", "run", "test"]

コンテナをビルドして実行すると、テストを実行することができます。

> docker build -t selenium-e2e . && docker run --rm selenium-e2e
> mocha test/test.js --timeout 0

  SeleniumChromeTest
    ✔ リンクをクリックしてページの遷移を確認 (2582ms)

  1 passing (3s)

簡単なテスト内容ですが、Seleniumを利用することでE2Eテストを自動化することができました。