summaryrefslogtreecommitdiffstats
path: root/remote/test/puppeteer/examples
diff options
context:
space:
mode:
Diffstat (limited to 'remote/test/puppeteer/examples')
-rw-r--r--remote/test/puppeteer/examples/README.md43
-rw-r--r--remote/test/puppeteer/examples/block-images.js36
-rw-r--r--remote/test/puppeteer/examples/cross-browser.js46
-rw-r--r--remote/test/puppeteer/examples/custom-event.js40
-rw-r--r--remote/test/puppeteer/examples/detect-sniff.js49
-rw-r--r--remote/test/puppeteer/examples/oopif.js39
-rw-r--r--remote/test/puppeteer/examples/pdf.js25
-rw-r--r--remote/test/puppeteer/examples/proxy.js25
-rw-r--r--remote/test/puppeteer/examples/screenshot-fullpage.js18
-rw-r--r--remote/test/puppeteer/examples/screenshot.js17
-rw-r--r--remote/test/puppeteer/examples/search.js45
11 files changed, 383 insertions, 0 deletions
diff --git a/remote/test/puppeteer/examples/README.md b/remote/test/puppeteer/examples/README.md
new file mode 100644
index 0000000000..f20c2e7162
--- /dev/null
+++ b/remote/test/puppeteer/examples/README.md
@@ -0,0 +1,43 @@
+# Running the examples
+
+Assuming you have a checkout of the Puppeteer repo and have run `npm i` (or `yarn`) to install the dependencies, and `npm run build` (or `yarn run build`) to build the project, the examples can be run from the root folder like so:
+
+```bash
+NODE_PATH=../ node examples/search.js
+```
+
+## Larger examples
+
+More complex and use case driven examples can be found at [github.com/GoogleChromeLabs/puppeteer-examples](https://github.com/GoogleChromeLabs/puppeteer-examples).
+
+# Other resources
+
+Other useful tools, articles, and projects that use Puppeteer.
+
+## Rendering and web scraping
+
+- [Puppetron](https://github.com/cheeaun/puppetron) - Demo site that shows how to use Puppeteer and Headless Chrome to render pages. Inspired by [GoogleChrome/rendertron](https://github.com/GoogleChrome/rendertron).
+- [Thal](https://medium.com/@e_mad_ehsan/getting-started-with-puppeteer-and-chrome-headless-for-web-scrapping-6bf5979dee3e 'An article on medium') - Getting started with Puppeteer and Chrome Headless for Web Scraping.
+- [pupperender](https://github.com/LasaleFamine/pupperender) - Express middleware that checks the User-Agent header of incoming requests, and if it matches one of a configurable set of bots, render the page using Puppeteer. Useful for PWA rendering.
+- [headless-chrome-crawler](https://github.com/yujiosaka/headless-chrome-crawler) - Crawler that provides simple APIs to manipulate Headless Chrome and allows you to crawl dynamic websites.
+- [puppeteer-examples](https://github.com/checkly/puppeteer-examples) - Puppeteer Headless Chrome examples for real life use cases such as getting useful info from the web pages or common login scenarios.
+- [browserless](https://github.com/joelgriffith/browserless) - Headless Chrome as a service letting you execute Puppeteer scripts remotely. Provides a docker image with configuration for concurrency, launch arguments and more.
+- [Puppeteer on AWS Lambda](https://github.com/jay-deshmukh/headless-chrome-with-puppeteer-on-AWS-lambda-with-serverless-framework) - Running puppeteer on AWS Lambda with Serverless framework
+- [Apify SDK](https://github.com/apifytech/apify-js) - The scalable web crawling and scraping library for JavaScript. Automatically manages a pool of Puppeteer browsers and provides easy error handling, task management, proxy rotation and more.
+
+## Testing
+
+- [angular-puppeteer-demo](https://github.com/Quramy/angular-puppeteer-demo) - Demo repository explaining how to use Puppeteer in Karma.
+- [mocha-headless-chrome](https://github.com/direct-adv-interfaces/mocha-headless-chrome) - Tool which runs client-side **mocha** tests in the command line through headless Chrome.
+- [puppeteer-to-istanbul-example](https://github.com/bcoe/puppeteer-to-istanbul-example) - Demo repository demonstrating how to output Puppeteer coverage in Istanbul format.
+- [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer) - (almost) Zero configuration tool for setting up and running Jest and Puppeteer easily. Also includes an assertion library for Puppeteer.
+- [puppeteer-har](https://github.com/Everettss/puppeteer-har) - Generate HAR file with puppeteer.
+- [puppetry](https://puppetry.app/) - A desktop app to build Puppeteer/Jest driven tests without coding.
+- [puppeteer-loadtest](https://github.com/svenkatreddy/puppeteer-loadtest) - commandline interface for performing load test on puppeteer scripts.
+- [cucumber-puppeteer-example](https://github.com/mlampedx/cucumber-puppeteer-example) - Example repository demonstrating how to use Puppeeteer and Cucumber for integration testing.
+
+## Services
+
+- [Checkly](https://checklyhq.com) - Monitoring SaaS that uses Puppeteer to check availability and correctness of web pages and apps.
+- [Doppio](https://doppio.sh) - SaaS API to create screenshots or PDFs from HTML/CSS/JS
+- [Doczilla](https://www.doczilla.app) - SaaS API empowering the generation of screenshots or PDFs directly from HTML/CSS/JS code.
diff --git a/remote/test/puppeteer/examples/block-images.js b/remote/test/puppeteer/examples/block-images.js
new file mode 100644
index 0000000000..73a87eb089
--- /dev/null
+++ b/remote/test/puppeteer/examples/block-images.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright 2017 Google Inc., PhantomJS Authors All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.setRequestInterception(true);
+ page.on('request', request => {
+ if (request.resourceType() === 'image') {
+ request.abort();
+ } else {
+ request.continue();
+ }
+ });
+ await page.goto('https://news.google.com/news/');
+ await page.screenshot({path: 'news.png', fullPage: true});
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/cross-browser.js b/remote/test/puppeteer/examples/cross-browser.js
new file mode 100644
index 0000000000..0f972a0b70
--- /dev/null
+++ b/remote/test/puppeteer/examples/cross-browser.js
@@ -0,0 +1,46 @@
+const puppeteer = require('puppeteer');
+
+/**
+ * To have Puppeteer fetch a Firefox binary for you, first run:
+ *
+ * PUPPETEER_PRODUCT=firefox npm install
+ *
+ * To get additional logging about which browser binary is executed,
+ * run this example as:
+ *
+ * DEBUG=puppeteer:launcher NODE_PATH=../ node examples/cross-browser.js
+ *
+ * You can set a custom binary with the `executablePath` launcher option.
+ */
+
+const firefoxOptions = {
+ product: 'firefox',
+ extraPrefsFirefox: {
+ // Enable additional Firefox logging from its protocol implementation
+ // 'remote.log.level': 'Trace',
+ },
+ // Make browser logs visible
+ dumpio: true,
+};
+
+(async () => {
+ const browser = await puppeteer.launch(firefoxOptions);
+
+ const page = await browser.newPage();
+ console.log(await browser.version());
+
+ await page.goto('https://news.ycombinator.com/');
+
+ // Extract articles from the page.
+ const resultsSelector = '.titleline > a';
+ const links = await page.evaluate(resultsSelector => {
+ const anchors = Array.from(document.querySelectorAll(resultsSelector));
+ return anchors.map(anchor => {
+ const title = anchor.textContent.trim();
+ return `${title} - ${anchor.href}`;
+ });
+ }, resultsSelector);
+ console.log(links.join('\n'));
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/custom-event.js b/remote/test/puppeteer/examples/custom-event.js
new file mode 100644
index 0000000000..960bca34ee
--- /dev/null
+++ b/remote/test/puppeteer/examples/custom-event.js
@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+
+ // Define a window.onCustomEvent function on the page.
+ await page.exposeFunction('onCustomEvent', e => {
+ console.log(`${e.type} fired`, e.detail || '');
+ });
+
+ /**
+ * Attach an event listener to page to capture a custom event on page load/navigation.
+ * @param {string} type Event name.
+ * @returns {!Promise}
+ */
+ function listenFor(type) {
+ return page.evaluateOnNewDocument(type => {
+ document.addEventListener(type, e => {
+ window.onCustomEvent({type, detail: e.detail});
+ });
+ }, type);
+ }
+
+ await listenFor('app-ready'); // Listen for "app-ready" custom event on page load.
+
+ await page.goto('https://www.chromestatus.com/features', {
+ waitUntil: 'networkidle0',
+ });
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/detect-sniff.js b/remote/test/puppeteer/examples/detect-sniff.js
new file mode 100644
index 0000000000..2900236fb8
--- /dev/null
+++ b/remote/test/puppeteer/examples/detect-sniff.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright 2017 Google Inc., PhantomJS Authors All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+function sniffDetector() {
+ const userAgent = window.navigator.userAgent;
+ const platform = window.navigator.platform;
+
+ window.navigator.__defineGetter__('userAgent', function () {
+ window.navigator.sniffed = true;
+ return userAgent;
+ });
+
+ window.navigator.__defineGetter__('platform', function () {
+ window.navigator.sniffed = true;
+ return platform;
+ });
+}
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.evaluateOnNewDocument(sniffDetector);
+ await page.goto('https://www.google.com', {waitUntil: 'networkidle2'});
+ console.log(
+ 'Sniffed: ' +
+ (await page.evaluate(() => {
+ return !!navigator.sniffed;
+ }))
+ );
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/oopif.js b/remote/test/puppeteer/examples/oopif.js
new file mode 100644
index 0000000000..6ed79f9ced
--- /dev/null
+++ b/remote/test/puppeteer/examples/oopif.js
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+async function attachFrame(frameId, url) {
+ const frame = document.createElement('iframe');
+ frame.src = url;
+ frame.id = frameId;
+ document.body.appendChild(frame);
+ await new Promise(x => {
+ return (frame.onload = x);
+ });
+ return frame;
+}
+
+(async () => {
+ // Launch browser in non-headless mode.
+ const browser = await puppeteer.launch({headless: false});
+ const page = await browser.newPage();
+
+ // Load a page from one origin:
+ await page.goto('http://example.org/');
+
+ // Inject iframe with the another origin.
+ await page.evaluateHandle(attachFrame, 'frame1', 'https://example.com/');
+
+ // At this point there should be a message in the output:
+ // puppeteer:frame The frame '...' moved to another session. Out-of-process
+ // iframes (OOPIF) are not supported by Puppeteer yet.
+ // https://github.com/puppeteer/puppeteer/issues/2548
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/pdf.js b/remote/test/puppeteer/examples/pdf.js
new file mode 100644
index 0000000000..e97cc53cdb
--- /dev/null
+++ b/remote/test/puppeteer/examples/pdf.js
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto('https://news.ycombinator.com', {
+ waitUntil: 'networkidle2',
+ });
+ // page.pdf() is currently supported only in headless mode.
+ // @see https://bugs.chromium.org/p/chromium/issues/detail?id=753118
+ await page.pdf({
+ path: 'hn.pdf',
+ format: 'letter',
+ });
+
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/proxy.js b/remote/test/puppeteer/examples/proxy.js
new file mode 100644
index 0000000000..e41d0d8cd1
--- /dev/null
+++ b/remote/test/puppeteer/examples/proxy.js
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch({
+ // Launch chromium using a proxy server on port 9876.
+ // More on proxying:
+ // https://www.chromium.org/developers/design-documents/network-settings
+ args: [
+ '--proxy-server=127.0.0.1:9876',
+ // Use proxy for localhost URLs
+ '--proxy-bypass-list=<-loopback>',
+ ],
+ });
+ const page = await browser.newPage();
+ await page.goto('https://google.com');
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/screenshot-fullpage.js b/remote/test/puppeteer/examples/screenshot-fullpage.js
new file mode 100644
index 0000000000..cbc3d5e782
--- /dev/null
+++ b/remote/test/puppeteer/examples/screenshot-fullpage.js
@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.emulate(puppeteer.devices['iPhone 6']);
+ await page.goto('https://www.nytimes.com/');
+ await page.screenshot({path: 'full.png', fullPage: true});
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/screenshot.js b/remote/test/puppeteer/examples/screenshot.js
new file mode 100644
index 0000000000..85c8462cb5
--- /dev/null
+++ b/remote/test/puppeteer/examples/screenshot.js
@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+ await page.goto('http://example.com');
+ await page.screenshot({path: 'example.png'});
+ await browser.close();
+})();
diff --git a/remote/test/puppeteer/examples/search.js b/remote/test/puppeteer/examples/search.js
new file mode 100644
index 0000000000..7c2a081808
--- /dev/null
+++ b/remote/test/puppeteer/examples/search.js
@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright 2017 Google Inc.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * @fileoverview Search developers.google.com/web for articles tagged
+ * "Headless Chrome" and scrape results from the results page.
+ */
+
+'use strict';
+
+const puppeteer = require('puppeteer');
+
+(async () => {
+ const browser = await puppeteer.launch();
+ const page = await browser.newPage();
+
+ await page.goto('https://developers.google.com/web/');
+
+ // Type into search box.
+ await page.type('.devsite-search-field', 'Headless Chrome');
+
+ // Wait for suggest overlay to appear and click "show all results".
+ const allResultsSelector = '.devsite-suggest-all-results';
+ await page.waitForSelector(allResultsSelector);
+ await page.click(allResultsSelector);
+
+ // Wait for the results page to load and display the results.
+ const resultsSelector = '.gsc-table-result a.gs-title[href]';
+ await page.waitForSelector(resultsSelector);
+
+ // Extract the results from the page.
+ const links = await page.evaluate(resultsSelector => {
+ const anchors = Array.from(document.querySelectorAll(resultsSelector));
+ return anchors.map(anchor => {
+ const title = anchor.textContent.split('|')[0].trim();
+ return `${title} - ${anchor.href}`;
+ });
+ }, resultsSelector);
+ console.log(links.join('\n'));
+
+ await browser.close();
+})();