#SeleniumをDartから使う
##Seleniumとは
ブラウザを自動操作するツールです。
ブラウザを使ったWebアプリのテストを自動化できます。
Dartを含めた大体の言語がSeleniumに対応しています。
##インストール
selenium-server-standaloneとchromedriverをインストールします。

brew install selenium-server-standalone
brew install chromedriver

##実際にSeleniumでWebアプリのテストをする
ボタンを押すとHelloと表示されるWebアプリをテストしようと思います。

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>selenium_example</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

  <button id="button">ボタン</button>
  <div id="div"></div>
  <script async src="main.dart" type="application/dart"></script>
  <script async src="packages/browser/dart.js"></script>
</body>
</html>

import 'dart:html';

void main() {
  ButtonElement button = querySelector('#button');
  DivElement div = querySelector('#div');
  button.onClick.listen((e){
    div.text = 'Hello!';
  });
}

###Seleniumの起動
chromedriverコマンド

chromedriver

下のような出力があるはずです。

[mac:~ riku$ chromedriver
Starting ChromeDriver 2.20.353124 on port 9515
Only local connections are allowed.

この時on port 9515のようにChromeDriverのポートが表示されるので控えておきます。

###Dartプロジェクトの編集
まずはpubspec.yamlにwebdriverを追記します。

pubspec.yaml

dependencies:
  webdriver: any

Seleniumを使ってブラウザを操作するDartコードはこんな感じです。

test.dart

import 'package:webdriver/webdriver.dart';
void main() {

  //このuriのportはChromeDriverのポート
  var uri = Uri.parse('http://127.0.0.1:9515');
  WebDriver.createDriver(uri: uri).then((WebDriver driver) {
    //テストしたいWebアプリを起動
    driver.get('http://localhost:63342/selenium-example/web/index.html')
        .then((_) => driver.findElement(new By.id('button')))
        .then((WebElement button) => button.click())
        .then((_) => driver.findElement(new By.id('div')))
        .then((WebElement div) => div.text)
        .then((text) => print(text));//Hello!
  });
}

ポイントは

WebDriver.createDriver(uri:'http://127.0.0.1:ChromeDriverのポート')でWebDriverを取得する
driver.get('テストしたいWebアプリ')でページを表示
driver.findElement(new By.id('~~'))でDOM要素を取得できる
unittestスイートと組み合わせることでテストを自動化できます。

以上です。