SeleniumをDartから使う

  • 4
    Like
  • 0
    Comment
More than 1 year has passed since last update.

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!
  });
}

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

以上です。