selenium-webdriverを使えばChrome Extensionの操作テストとか出来たりする模様なのでやってみた

事前項目

適当にブラウザアクションでなんかを描画するのを作っておいて、crxパッケージを作っておく。でテストする際に拡張IDが必要になるので環境で一回入れてみて拡張IDをコピーしておく

んまぁあとはselenium-webdriverを使ってテストするスクリプトを書く

test/test.js

※selenium-webdriverをnpmでインストールしておく

var expect    = require("chai").expect,
    webdriver = require("selenium-webdriver"),
    chrome    = require("selenium-webdriver/chrome"),
    test      = require("selenium-webdriver/testing");

var id = "ldnmahpdmpbajnhpijgaaehncdkfklae";

test.describe("D", function() {

  var driver;

  test.before(function() {
    var options = new chrome.Options();
    // テストするChrome Extensionをパッケージ化したcrxのパスを指定
    options.addExtensions(["/path/to/chrome_extension.crx"]);

    driver = new webdriver.Builder()
      .withCapabilities(webdriver.Capabilities.chrome())
      .setChromeOptions(options)
      .build();

    driver.get("chrome-extension://" + id + "/popup.html");
    // 一度リロードしておかないとChrome拡張側でのgetBackgroundPage等のAPIが初期化されてない
    driver.navigate().refresh();
  });

  test.after(function() {
    driver.quit();
  });

  test.it("I", function(done) {
    driver.findElement(webdriver.By.id("title")).getText().then(function(title) {
      // 本当はhogeが入ってるけど、わざとずっこけさせる
      expect(title).to.be.eq("fuga");
      done();
    });
  });
});

mochaを使ってテストを実行すれば良いのだけど、mochaのdescribeだとかを使うと何やらselenium-webdriverのセッション処理あたりがうまく言ってない箇所があったりする。selenium-webdriver/testingに含まれているAPIを使えば問題無い模様

あとは普通にmochaでテストを実行すれば良いんだけど、test/mocha.opts辺りを作っておいた方が良いかと

--timeout 5000
--reporter tap

んで実行すると

1..1
not ok 1 D I
  AssertionError: expected "hoge" to equal "fuga"
# 以降省略
# tests 1
# pass 0
# fail 1

っていう感じでテスト出来る。ちなみのdriverインスタンスでexecuteScriptとかを使えばlocalStorageをぶっこんだりする事も可能な模様なので、そういうのが必要なのであればテストにそういう所な処理をしておけば良い