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();
+})();