これは何か

Dart でWebの自動テストをしたくなりました。
Googleの提供するDart 用のWebdriverがあるのですが、利用方法をサクッと紹介する日本語記事がなかったため執筆しました。

以下を対象読者としています

Pythonなど他言語で、Selenium を利用したことがある
Dartを利用して自動テストしたい
初期セットアップだけやれれば、あとは自走できる

動作環境

MacOS Monterey
chromedriver (103)
webdriver: ^3.0.0

1. chromedriver のインストール

% brew install selenium-server-standalone
% brew install chromedriver

※ 細かいですが、chromedriverを以前からinstallしてある人は、バージョンが最新かチェックしましょう。

% chromedriver --version
ChromeDriver 103.0.5060.53 (...略)

上記コマンドで出てくるバージョン（私の場合103番台）と、ご利用中のGoogle Chrome のバージョンがあっているかどうか確認しましょう。これがあっていないとエラー出ます。(よくあるエラーですね)

2. Dart側の設定

pubspec.yamlにwebdriverを追加

dependencies:
  webdriver: any

3. chromedriver をターミナルから起動

% chromedriver

うまくいけば、以下のようなレスポンスがあります

Starting ChromeDriver 103.0.5060.53 (...略...) on port 9515
Only local connections are allowed.
Please see https://chromedriver.chromium.org/security-considerations for suggestions on keeping ChromeDriver safe.
ChromeDriver was started successfully.

これでいう1行目に書いてあるポート番号（こちらだと「9515」）をメモしましょう。（あとで使う）

また、このターミナルは起動したまま放置しておきます。
（※PythonのSelenium だと、この過程がなかったと記憶しています。気をつけましょう）

4. Dartファイルを作る

どこでもいいので、Dart プロジェクトの適当な場所にテストファイルを設置します。

one_test.dart

import 'package:webdriver/io.dart';

void main() {
  //このuriの'9515'となっているところに、3.でメモしたポート番号を入れる
  var driverUri = Uri.parse('http://127.0.0.1:9515/');
  String targetUri = 'https://google.com/';

  Future<WebDriver> driver =
      createDriver(uri: driverUri, spec: WebDriverSpec.W3c);

  driver.then((WebDriver d) {
    d.get(targetUri);

    //例えばここでDOM操作 できます
    //var ans = d.findElement(By.id('hogehoge'));
    //print(ans);

  });
}

5. 自動で Windowを開くところまでやる

3で利用したのとは別のターミナルから、4で作成したdartのファイルを起動します

% dart run one_test.dart

6. できました

それでは。

参考