#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スイートと組み合わせることでテストを自動化できます。
以上です。