UNPKG

12.8 kBMarkdownView Raw
1# Puppeteer
2
3<!-- [START badges] -->
4[![Linux Build Status](https://img.shields.io/travis/GoogleChrome/puppeteer/master.svg)](https://travis-ci.org/GoogleChrome/puppeteer) [![Windows Build Status](https://img.shields.io/appveyor/ci/aslushnikov/puppeteer/master.svg?logo=appveyor)](https://ci.appveyor.com/project/aslushnikov/puppeteer/branch/master) [![Build Status](https://api.cirrus-ci.com/github/GoogleChrome/puppeteer.svg)](https://cirrus-ci.com/github/GoogleChrome/puppeteer) [![NPM puppeteer package](https://img.shields.io/npm/v/puppeteer.svg)](https://npmjs.org/package/puppeteer)
5<!-- [END badges] -->
6
7<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right">
8
9###### [API](docs/api.md) | [FAQ](#faq) | [Contributing](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md)
10
11> Puppeteer is a Node library which provides a high-level API to control [headless](https://developers.google.com/web/updates/2017/04/headless-chrome) Chrome or Chromium over the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/). It can also be configured to use full (non-headless) Chrome or Chromium.
12
13<!-- [START usecases] -->
14###### What can I do?
15
16Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:
17
18* Generate screenshots and PDFs of pages.
19* Crawl a SPA and generate pre-rendered content (i.e. "SSR").
20* Automate form submission, UI testing, keyboard input, etc.
21* 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.
22* Capture a [timeline trace](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) of your site to help diagnose performance issues.
23<!-- [END usecases] -->
24
25Give it a spin: https://try-puppeteer.appspot.com/
26
27<!-- [START getstarted] -->
28## Getting Started
29
30### Installation
31
32To use Puppeteer in your project, run:
33
34```bash
35npm i puppeteer
36# or "yarn add puppeteer"
37```
38
39Note: When you install Puppeteer, it downloads a recent version of Chromium (~170Mb Mac, ~282Mb Linux, ~280Mb Win) that is guaranteed to work with the API. To skip the download, see [Environment variables](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#environment-variables).
40
41### Usage
42
43Caution: Puppeteer requires at least Node v6.4.0, but the examples below use async/await which is only supported in Node v7.6.0 or greater.
44
45Puppeteer will be familiar to people using other browser testing frameworks. You create an instance
46of `Browser`, open pages, and then manipulate them with [Puppeteer's API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#).
47
48**Example** - navigating to https://example.com and saving a screenshot as *example.png*:
49
50Save file as **example.js**
51
52```js
53const puppeteer = require('puppeteer');
54
55(async () => {
56 const browser = await puppeteer.launch();
57 const page = await browser.newPage();
58 await page.goto('https://example.com');
59 await page.screenshot({path: 'example.png'});
60
61 await browser.close();
62})();
63```
64
65Execute script on the command line
66
67```bash
68node example.js
69```
70
71Puppeteer sets an initial page size to 800px x 600px, which defines the screenshot size. The page size can be customized with [`Page.setViewport()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetviewportviewport).
72
73**Example** - create a PDF.
74
75Save file as **hn.js**
76
77```js
78const puppeteer = require('puppeteer');
79
80(async () => {
81 const browser = await puppeteer.launch();
82 const page = await browser.newPage();
83 await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
84 await page.pdf({path: 'hn.pdf', format: 'A4'});
85
86 await browser.close();
87})();
88```
89
90Execute script on the command line
91
92```bash
93node hn.js
94```
95
96See [`Page.pdf()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions) for more information about creating pdfs.
97
98**Example** - evaluate script in the context of the page
99
100Save file as **get-dimensions.js**
101
102```js
103const puppeteer = require('puppeteer');
104
105(async () => {
106 const browser = await puppeteer.launch();
107 const page = await browser.newPage();
108 await page.goto('https://example.com');
109
110 // Get the "viewport" of the page, as reported by the page.
111 const dimensions = await page.evaluate(() => {
112 return {
113 width: document.documentElement.clientWidth,
114 height: document.documentElement.clientHeight,
115 deviceScaleFactor: window.devicePixelRatio
116 };
117 });
118
119 console.log('Dimensions:', dimensions);
120
121 await browser.close();
122})();
123```
124
125Execute script on the command line
126
127```bash
128node get-dimensions.js
129```
130
131See [`Page.evaluate()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageevaluatepagefunction-args) for more information on `evaluate` and related methods like `evaluateOnNewDocument` and `exposeFunction`.
132
133<!-- [END getstarted] -->
134
135<!-- [START runtimesettings] -->
136## Default runtime settings
137
138**1. Uses Headless mode**
139
140Puppeteer launches Chromium in [headless mode](https://developers.google.com/web/updates/2017/04/headless-chrome). To launch a full version of Chromium, set the ['headless' option](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) when launching a browser:
141
142```js
143const browser = await puppeteer.launch({headless: false}); // default is true
144```
145
146**2. Runs a bundled version of Chromium**
147
148By default, Puppeteer downloads and uses a specific version of Chromium so its API
149is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium,
150pass in the executable's path when creating a `Browser` instance:
151
152```js
153const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});
154```
155
156See [`Puppeteer.launch()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) for more information.
157
158See [`this article`](https://www.howtogeek.com/202825/what%E2%80%99s-the-difference-between-chromium-and-chrome/) for a description of the differences between Chromium and Chrome. [`This article`](https://chromium.googlesource.com/chromium/src/+/lkcr/docs/chromium_browser_vs_google_chrome.md) describes some differences for Linux users.
159
160**3. Creates a fresh user profile**
161
162Puppeteer creates its own Chromium user profile which it **cleans up on every run**.
163
164<!-- [END runtimesettings] -->
165
166## API Documentation
167
168Explore the [API documentation](docs/api.md) and [examples](https://github.com/GoogleChrome/puppeteer/tree/master/examples/) to learn more.
169
170<!-- [START debugging] -->
171
172## Debugging tips
173
1741. Turn off headless mode - sometimes it's useful to see what the browser is
175 displaying. Instead of launching in headless mode, launch a full version of
176 the browser using `headless: false`:
177
178 const browser = await puppeteer.launch({headless: false});
179
1802. Slow it down - the `slowMo` option slows down Puppeteer operations by the
181 specified amount of milliseconds. It's another way to help see what's going on.
182
183 const browser = await puppeteer.launch({
184 headless: false,
185 slowMo: 250 // slow down by 250ms
186 });
187
1883. Capture console output - You can listen for the `console` event.
189 This is also handy when debugging code in `page.evaluate()`:
190
191 page.on('console', msg => console.log('PAGE LOG:', msg.text()));
192
193 await page.evaluate(() => console.log(`url is ${location.href}`));
194
195 await page.evaluate(() => console.log(`url is ${location.href}`));
196
1974. Enable verbose logging - All public API calls and internal protocol traffic
198 will be logged via the [`debug`](https://github.com/visionmedia/debug) module under the `puppeteer` namespace.
199
200 # Basic verbose logging
201 env DEBUG="puppeteer:*" node script.js
202
203 # Debug output can be enabled/disabled by namespace
204 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
205 env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
206 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls
207
208 # Protocol traffic can be rather noisy. This example filters out all Network domain messages
209 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'
210
211<!-- [END debugging] -->
212
213## Contributing to Puppeteer
214
215Check out [contributing guide](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md) to get an overview of Puppeteer development.
216
217<!-- [START faq] -->
218
219# FAQ
220
221#### Q: Which Chromium version does Puppeteer use?
222
223Look for `chromium_revision` in [package.json](https://github.com/GoogleChrome/puppeteer/blob/master/package.json).
224
225Puppeteer bundles Chromium to ensure that the latest features it uses are guaranteed to be available. As the DevTools protocol and browser improve over time, Puppeteer will be updated to depend on newer versions of Chromium.
226
227#### Q: What is the difference between Puppeteer, Selenium / WebDriver, and PhantomJS?
228
229Selenium / WebDriver is a well-established cross-browser API that is useful for testing cross-browser support.
230
231Puppeteer works only with Chromium or Chrome. However, many teams only run unit tests with a single browser (e.g. PhantomJS). In non-testing use cases, Puppeteer provides a powerful but simple API because it's only targeting one browser that enables you to rapidly develop automation scripts.
232
233Puppeteer bundles the latest versions of Chromium.
234
235#### Q: Who maintains Puppeteer?
236
237The Chrome DevTools team maintains the library, but we'd love your help and expertise on the project!
238See [Contributing](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md).
239
240#### Q: Why is the Chrome team building Puppeteer?
241
242The goals of the project are simple:
243
244- Provide a slim, canonical library that highlights the capabilities of the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/).
245- Provide a reference implementation for similar testing libraries. Eventually, these other frameworks could adopt Puppeteer as their foundational layer.
246- Grow the adoption of headless/automated browser testing.
247- Help dogfood new DevTools Protocol features...and catch bugs!
248- Learn more about the pain points of automated browser testing and help fill those gaps.
249
250#### Q: How does Puppeteer compare with other headless Chrome projects?
251
252The past few months have brought [several new libraries for automating headless Chrome](https://medium.com/@kensoh/chromeless-chrominator-chromy-navalia-lambdium-ghostjs-autogcd-ef34bcd26907). As the team authoring the underlying DevTools Protocol, we're excited to witness and support this flourishing ecosystem.
253
254We've reached out to a number of these projects to see if there are opportunities for collaboration, and we're happy to do what we can to help.
255
256#### Q: What features does Puppeteer not support?
257
258You may find that Puppeteer does not behave as expected when controlling pages that incorporate audio and video. (For example, [video playback/screenshots is likely to fail](https://github.com/GoogleChrome/puppeteer/issues/291).) There are two reasons for this:
259
260* Puppeteer is bundled with Chromium--not Chrome--and so by default, it inherits all of [Chromium's media-related limitations](https://www.chromium.org/audio-video). This means that Puppeteer does not support licensed formats such as AAC or H.264. (However, it is possible to force Puppeteer to use a separately-installed version Chrome instead of Chromium via the [`executablePath` option to `puppeteer.launch`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions). You should only use this configuration if you need an official release of Chrome that supports these media formats.)
261* Since Puppeteer (in all configurations) controls a desktop version of Chromium/Chrome, features that are only supported by the mobile version of Chrome are not supported. This means that Puppeteer [does not support HTTP Live Streaming (HLS)](https://caniuse.com/#feat=http-live-streaming).
262
263#### Q: I am having trouble installing / running Puppeteer in my test environment?
264We have a [troubleshooting](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md) guide for various operating systems that lists the required dependencies.
265
266#### Q: How do I try/test a prerelease version of Puppeteer?
267
268You can check out this repo or install the latest prerelease from npm:
269
270```bash
271npm i --save puppeteer@next
272```
273
274Please note that prerelease may be unstable and contain bugs.
275
276<!-- [END faq] -->