UNPKG

11.6 kBMarkdownView Raw
1# Puppeteer [![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) [![NPM puppeteer package](https://img.shields.io/npm/v/puppeteer.svg)](https://npmjs.org/package/puppeteer)
2
3<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right">
4
5###### [API](docs/api.md) | [FAQ](#faq) | [Contributing](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md)
6
7> 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.
8
9###### What can I do?
10
11Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:
12
13* Generate screenshots and PDFs of pages.
14* Crawl a SPA and generate pre-rendered content (i.e. "SSR").
15* Scrape content from websites.
16* Automate form submission, UI testing, keyboard input, etc.
17* 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.
18* Capture a [timeline trace](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference) of your site to help diagnose performance issues.
19
20Give it a spin: https://try-puppeteer.appspot.com/
21
22## Getting Started
23
24### Installation
25
26> *Note: 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*
27
28To use Puppeteer in your project, run:
29```
30yarn add puppeteer
31# or "npm i puppeteer"
32```
33
34> **Note**: When you install Puppeteer, it downloads a recent version of Chromium (~71Mb Mac, ~90Mb Linux, ~110Mb 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).
35
36### Usage
37
38Puppeteer will be familiar to people using other browser testing frameworks. You create an instance
39of `Browser`, open pages, and then manipulate them with [Puppeteer's API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#).
40
41**Example** - navigating to https://example.com and saving a screenshot as *example.png*:
42
43```js
44const puppeteer = require('puppeteer');
45
46(async () => {
47 const browser = await puppeteer.launch();
48 const page = await browser.newPage();
49 await page.goto('https://example.com');
50 await page.screenshot({path: 'example.png'});
51
52 await browser.close();
53})();
54```
55
56Puppeteer 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).
57
58**Example** - create a PDF.
59
60```js
61const puppeteer = require('puppeteer');
62
63(async () => {
64 const browser = await puppeteer.launch();
65 const page = await browser.newPage();
66 await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
67 await page.pdf({path: 'hn.pdf', format: 'A4'});
68
69 await browser.close();
70})();
71```
72
73See [`Page.pdf()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagepdfoptions) for more information about creating pdfs.
74
75**Example** - evaluate script in the context of the page
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://example.com');
84
85 // Get the "viewport" of the page, as reported by the page.
86 const dimensions = await page.evaluate(() => {
87 return {
88 width: document.documentElement.clientWidth,
89 height: document.documentElement.clientHeight,
90 deviceScaleFactor: window.devicePixelRatio
91 };
92 });
93
94 console.log('Dimensions:', dimensions);
95
96 await browser.close();
97})();
98```
99
100See [`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`.
101
102## Default runtime settings
103
104**1. Uses Headless mode**
105
106Puppeteer 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:
107
108```js
109const browser = await puppeteer.launch({headless: false}); // default is true
110```
111
112**2. Runs a bundled version of Chromium**
113
114By default, Puppeteer downloads and uses a specific version of Chromium so its API
115is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium,
116pass in the executable's path when creating a `Browser` instance:
117
118```js
119const browser = await puppeteer.launch({executablePath: '/path/to/Chrome'});
120```
121
122See [`Puppeteer.launch()`](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions) for more information.
123
124See [`this article`](https://www.howtogeek.com/202825/what%E2%80%99s-the-difference-between-chromium-and-chrome/) for a description
125of 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.
126
127**3. Creates a fresh user profile**
128
129Puppeteer creates its own Chromium user profile which it **cleans up on every run**.
130
131## API Documentation
132
133Explore the [API documentation](docs/api.md) and [examples](https://github.com/GoogleChrome/puppeteer/tree/master/examples/) to learn more.
134
135## Debugging tips
136
1371. Turn off headless mode - sometimes it's useful to see what the browser is
138 displaying. Instead of launching in headless mode, launch a full version of
139 the browser using `headless: false`:
140
141 ```js
142 const browser = await puppeteer.launch({headless: false});
143 ```
144
1451. Slow it down - the `slowMo` option slows down Puppeteer operations by the
146 specified amount of milliseconds. It's another way to help see what's going on.
147
148 ```js
149 const browser = await puppeteer.launch({
150 headless: false,
151 slowMo: 250 // slow down by 250ms
152 });
153 ```
154
1551. Capture console output - You can listen for the `console` event.
156 This is also handy when debugging code in `page.evaluate()`:
157
158 ```js
159 page.on('console', msg => console.log('PAGE LOG:', ...msg.args));
160
161 await page.evaluate(() => console.log(`url is ${location.href}`));
162 ```
163
164
1651. Enable verbose logging - All public API calls and internal protocol traffic
166 will be logged via the [`debug`](https://github.com/visionmedia/debug) module under the `puppeteer` namespace.
167
168 ```sh
169 # Basic verbose logging
170 env DEBUG="puppeteer:*" node script.js
171
172 # Debug output can be enabled/disabled by namespace
173 env DEBUG="puppeteer:*,-puppeteer:protocol" node script.js # everything BUT protocol messages
174 env DEBUG="puppeteer:session" node script.js # protocol session messages (protocol messages to targets)
175 env DEBUG="puppeteer:mouse,puppeteer:keyboard" node script.js # only Mouse and Keyboard API calls
176
177 # Protocol traffic can be rather noisy. This example filters out all Network domain messages
178 env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'
179 ```
180
181
182
183
184## Contributing to Puppeteer
185
186Check out [contributing guide](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md) to get an overview of Puppeteer development.
187
188# FAQ
189
190#### Q: Which Chromium version does Puppeteer use?
191
192Look for `chromium_revision` in [package.json](https://github.com/GoogleChrome/puppeteer/blob/master/package.json).
193
194Puppeteer 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.
195
196#### Q: What is the difference between Puppeteer, Selenium / WebDriver, and PhantomJS?
197
198Selenium / WebDriver is a well-established cross-browser API that is useful for testing cross-browser support.
199
200Puppeteer 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.
201
202Puppeteer bundles the latest versions of Chromium.
203
204#### Q: Who maintains Puppeteer?
205
206The Chrome DevTools team maintains the library, but we'd love your help and expertise on the project!
207See [Contributing](https://github.com/GoogleChrome/puppeteer/blob/master/CONTRIBUTING.md).
208
209#### Q: Why is the Chrome team building Puppeteer?
210
211The goals of the project are simple:
212
213- Provide a slim, canonical library that highlights the capabilities of the [DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/).
214- Provide a reference implementation for similar testing libraries. Eventually, these
215other frameworks could adopt Puppeteer as their foundational layer.
216- Grow the adoption of headless/automated browser testing.
217- Help dogfood new DevTools Protocol features...and catch bugs!
218- Learn more about the pain points of automated browser testing and help fill those gaps.
219
220#### Q: How does Puppeteer compare with other headless Chrome projects?
221
222The 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.
223
224We'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.
225
226#### Q: What features does Puppeteer not support?
227
228You 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:
229
230* 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.)
231* 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).
232
\No newline at end of file