how to do automated browser testing with Dart?

Depending on your use case and requirements, you might also be able to use puppeteer

For example (from the docs), you can take a screenshot of the page

void main() async {
  // Start the browser and go to a web page
  var browser = await puppeteer.launch();
  var page = await browser.newPage();

  // Setup the dimensions and user-agent of a particular phone
  await page.emulate(puppeteer.devices.pixel2XL);

  await page.goto('https://dart.dev', wait: Until.networkIdle);

  // Take a screenshot of the page
  var screenshot = await page.screenshot();

  // Save it to a file
  await File('example/_github.png').writeAsBytes(screenshot);

  await browser.close();
}

You can also generate a PDF, take a screenshot of a node, interact with the page, evaluate JavaScript, and use the results from your Dart code, and more.


You can use Chrome or Dartium and drive it with ChromeDriver and the webdriver package

Here is a quick example:

import 'dart:convert';
import 'dart:io';
import 'package:webdriver/io.dart';

main() async {
  // Start the ChromeDriver process
  Process chromeDriverProcess = await Process
      .start('chromedriver', ['--port=4444', '--url-base=wd/hub']);

  await for (String browserOut in const LineSplitter()
      .bind(UTF8.decoder.bind(chromeDriverProcess.stdout))) {
    if (browserOut.contains('Starting ChromeDriver')) {
      break;
    }
  }

  // Connect to it with the webdriver package
  WebDriver driver = await createDriver(
      uri: Uri.parse('http://localhost:4444/wd/hub/'),
      desired: Capabilities.chrome);

  // Go to your page
  await driver.get('http://stackoverflow.com');

  //TODO: write your tests
  print(await driver.execute('return navigator.userAgent', []));

  // Take a simple screenshot
  String screenshot = await driver.captureScreenshotAsBase64();
  new File('stackoverflow.png').writeAsBytesSync(BASE64.decode(screenshot));

  driver.quit();
  chromeDriverProcess.kill();
}

It is not totally "headless" but it is easy to make it work on server like Travis-CI with this config:

before_install:
 - export DISPLAY=:99.0
 - sh -e /etc/init.d/xvfb start

content-shell is a headless browser with Dart support like Dartium (https://www.dartlang.org/install/mac)

and https://pub.dartlang.org/packages/webdriver can be used for Selenium test.

There is headless support for Chromium work-in-progress. When Dartium is upgraded to use this Chromium version, Dartium should be able to be run headless.

The Dart team is working on incremental JS compilation (DDC - Dart development compiler) which should allow to use Chrome as development browser. The headless mode (when available) can be used directly.

Tags:

Dart