selenium webdriverJS

seleniumwebdriverJS.md

Selenium

ブラウザの自動化ツール。メジャーなブラウザをほぼサポート。

ブラウザのテストを自動化できる。例えば、ページ移動、ボタンクリック、入力ボックスにテキストを入力、フォームの送信等々。

WebDriver

Seleniumをコードで制御する仕組み。

ブラウザのコントローラと通信するためのJSONワイヤプロトコルがあり、言語(JavaやRuby等）はそのJSONワイヤプロトコルをラップしたものになる。

WebDriverJS

上記のJavaScript版？

まだChromeしかサポートしてない？

インストール

$ npm install selenium-webdriver --save-dev

Chrome Driverのインストール

https://code.google.com/p/selenium/wiki/ChromeDriver ダウンロードURL http://chromedriver.storage.googleapis.com/index.html 最新版をダウンロードして、解凍

PATHを通す

例 .zshrcに以下を書く

export PATH="$HOME/workspace/:$PATH"

基本

var webdriver = require('selenium-webdriver');

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

driver.get('http://www.google.com');

で

$ node test.js

with Jasmine

テストフレームワークを使う

jasmine-nodeをインストール

$ npm install jasmine-node -g

テストファイル

spec/test.jsを作成

/**
 * Selenium WebdriverJsのテストコードサンプル
 */
//タイムアウト値
jasmine.getEnv().defaultTimeoutInterval = 99999;

describe('Google Search', function() {
  var webdriver, driver;

  beforeEach(function() {
    webdriver = require('selenium-webdriver');

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

  /**
   * Googleで"webdriver"と検索し、検索結果件数と内容が正しいことを検証
   * ※ただし、検索ランクによって失敗することがあるのであまり正確なテストではない。
   */
  it('should work', function(done) {
    //Googleを開く
    driver.get('http://www.google.com');
    //検索テキストに入力
    var searchBox = driver.findElement(webdriver.By.name('q'));
    searchBox.sendKeys('webdriver');
    //検索ボタンクリック
    driver.findElement(webdriver.By.name('btnG')).click();

    //タイトルが変更されたら読み込まれたと判定
    driver.wait(function() {
     return driver.getTitle().then(function(title) {
       return title === 'webdriver - Google 検索';
      });
    }, 10000);

    driver.manage().timeouts().implicitlyWait(3000);

    //テキストボックスの値をチェック
    //レンダリングを待つため少しwaitを入れる
    driver.wait(function() {
      return driver.findElement(webdriver.By.name('q'));
    }, 2000).then(function(el) {
      el.getAttribute("value").then(function(value) {
        expect(value).toBe('webdriver');
      });
    });

    //検索結果をチェック
    driver.findElements(webdriver.By.css('h3.r a')).then(function(elements) {
      //結果が10件である
      expect(elements.length).toBe(10);
      //検索結果の最初のリンクタイトルをチェック
      elements[0].getText().then(function(value) {
        expect(value).toBe('Selenium WebDriver');
      });
    });

    // findElementを使うと最初のelementを拾ってくる
    driver.findElement(webdriver.By.css('h3.r a')).getText().then(function(value) {
        expect(value).toBe('Selenium WebDriver');
    });

    //タイトルチェック(あまり意味ないテストですがおまけで。)
    driver.getTitle().then(function(title) {
      expect(title).toBe('webdriver - Google 検索');
      //最後にdoneを呼び、テスト終了
      done();
    });
  });

  //テスト完了時driverを切る。（テスト用のブラウザを閉じる）
  afterEach(function(){
    driver.quit();
  });

});

実行

$  jasmine-node --matchall spec

エラーで落ちるときは--captureExceptionsでエラーを確認する

$ jasmine-node --matchall --captureExceptions spec