Skip to content

Latest commit

 

History

History
139 lines (106 loc) · 4.61 KB

README.template.md

File metadata and controls

139 lines (106 loc) · 4.61 KB
Raw

Puppeteer in Dart

A Dart library to automate the Chrome browser over the DevTools Protocol.

This is a port of the Puppeteer Node.JS library in the Dart language.

pub package Build Status Coverage Status

What can I do?

Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:

  • Generate screenshots and PDFs of pages.
  • Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. "SSR" (Server-Side Rendering)).
  • Automate form submission, UI testing, keyboard input, etc.
  • Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.

Api

Examples

Launch Chrome

Download the last revision of chrome and launch it.

import 'example/example.dart';

Generate a PDF from a page

import 'example/print_to_pdf.dart';

Take a screenshot of a complete HTML page

import 'example/screenshot_page.dart';

Take a screenshot of a specific node in the page

import 'example/screenshot_element.dart';

Interact with the page and scrap content

import 'example/search.dart';

Create a static version of a Single Page Application

import 'example/capture_spa.dart';

Capture a screencast of the page

The screencast feature is not part of the Puppeteer API. This example uses the low-level protocol API to send the commands to the browser.

import 'example/screencast.dart';

Low-level DevTools protocol

This package contains a fully typed API of the Chrome DevTools protocol. The code is generated from the JSON Schema provided by Chrome.

With this API you have access to the entire capabilities of Chrome DevTools.

The code is in lib/protocol

import 'example/dev_tools_protocol.dart';

Execute JavaScript code

The Puppeteer API exposes several functions to run some Javascript code in the browser.

Like in this example from the official Node.JS library:

test(async () => {
  const result = await page.evaluate(x => {
    return Promise.resolve(8 * x);
  }, 7);
});

In the Dart port, you have to pass the JavaScript code as a string. The example above will be written as:

main() async {
  var result = await page.evaluate('''x => {
    return Promise.resolve(8 * x);
  }''', args: [7]);
}

The javascript code can be:

  • A function declaration (in the classical form with the function keyword or with the shorthand format (() => ))
  • An expression. In which case you cannot pass any arguments to the evaluate method.
import 'example/execute_javascript.dart';

If you are using IntellJ (or Webstorm), you can enable the syntax highlighter and the code-analyzer for the Javascript snippet with a comment like // language=js before the string.

main() {
  page.evaluate(
  //language=js
  '''function _(x) {
    return x > 0;
  }''', args: [7]);
}

Note: In a future version, we can imagine writing the code in Dart and it would be compiled to javascript transparently (with ddc or dart2js).

Related work