CODEWITHSUNDEEP
dart
Ahm Lenx
Ahm Lenx

Reputation: 103

how to do automated browser testing with Dart?

Is there any headless browser for dart? Or a wrapper for something like selenium? My goal is to use the browser for automated end-user testing for a website i wrote years ago. Now i need to make few changes on the site. Since it contains specific business logic, i would like to write some quick tests for the site without refactoring or modifying it for unit-tests, before i make those changes.
It seems like a fun introduction to get more familiar with dart ecosystem as well.

Upvotes: 10

Views: 6794

Answers (3)

Vince Varga
Vince Varga

Reputation: 6918

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.

Upvotes: 3

Xavier
Xavier

Reputation: 4005

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

Upvotes: 19

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657268

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.

Upvotes: 8

Related Questions