LoginSignup
5

More than 5 years have passed since last update.

SeleniumをDartから使う

Posted at

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

以上です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5