github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity
4e01c73ff6
puppeteer/index.html
jschfflr 4e01c73ff6 Deploying to gh-pages from main @ b871d5dbb6 🚀
2021-10-07 15:21:45 +00:00

46 lines
84 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.3">
<link rel="alternate" type="application/rss+xml" href="/puppeteer/blog/rss.xml" title="Puppeteer documentation Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/puppeteer/blog/atom.xml" title="Puppeteer documentation Blog Atom Feed"><title data-react-helmet="true">Puppeteer documentation</title><meta data-react-helmet="true" property="og:title" content="Puppeteer documentation"><meta data-react-helmet="true" property="og:url" content="https://puppeteer.github.io//puppeteer/"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_tag" content="default"><link data-react-helmet="true" rel="shortcut icon" href="/puppeteer/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://puppeteer.github.io//puppeteer/"><link data-react-helmet="true" rel="alternate" href="https://puppeteer.github.io//puppeteer/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://puppeteer.github.io//puppeteer/" hreflang="x-default"><script data-react-helmet="true">function maybeInsertBanner(){window.__DOCUSAURUS_INSERT_BASEURL_BANNER&&insertBanner()}function insertBanner(){var n=document.getElementById("docusaurus-base-url-issue-banner-container");if(n){n.innerHTML='\n<div id="docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseurl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/puppeteer/</span> </p>\n <p>We suggest trying baseUrl = <span id="docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n';var e=document.getElementById("docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,r="/"===s.substr(-1)?s:s+"/";e.innerHTML=r}}window.__DOCUSAURUS_INSERT_BASEURL_BANNER=!0,document.addEventListener("DOMContentLoaded",maybeInsertBanner)</script><link rel="stylesheet" href="/puppeteer/assets/css/styles.b5962012.css">
<link rel="preload" href="/puppeteer/assets/js/runtime~main.57e71b8c.js" as="script">
<link rel="preload" href="/puppeteer/assets/js/main.9ee296b0.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div id="docusaurus-base-url-issue-banner-container"></div><div><a href="#" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top navbar--primary navbarHideable_2qcr"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/puppeteer/"><img src="/puppeteer/img/logo.svg" alt="My Site Logo" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/puppeteer/img/logo.svg" alt="My Site Logo" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">Puppeteer</b></a><a class="navbar__item navbar__link" href="/puppeteer/docs/puppeteer.puppeteer">APIs</a><a class="navbar__item navbar__link" href="/puppeteer/blog/contributing">Contribute</a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/puppeteer/docs/puppeteer.puppeteer">10.1.0</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/puppeteer/docs/next/puppeteer.puppeteer">Next</a></li><li><a class="dropdown__link" href="/puppeteer/docs/puppeteer.puppeteer">10.1.0</a></li><li><a class="dropdown__link" href="/puppeteer/docs/10.0.0/puppeteer.puppeteer">10.0.0</a></li><li><a class="dropdown__link" href="/puppeteer/docs/9.1.1/puppeteer.puppeteer">9.1.1</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a href="https://github.com/puppeteer/puppeteer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><a href="https://stackoverflow.com/questions/tagged/puppeteer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Stack<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><a href="https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>Version 1.0<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><div class="react-toggle displayOnlyInLargeViewport_GrZ2 react-toggle--disabled"><div class="react-toggle-track" role="button" tabindex="-1"><div class="react-toggle-track-check"><span class="toggle_71bT">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_71bT">🌞</span></div><div class="react-toggle-thumb"></div></div><input type="checkbox" class="react-toggle-screenreader-only" aria-label="Switch between dark and light mode"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/puppeteer/"><img src="/puppeteer/img/logo.svg" alt="My Site Logo" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/puppeteer/img/logo.svg" alt="My Site Logo" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">Puppeteer</b></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/puppeteer/docs/puppeteer.puppeteer">APIs</a></li><li class="menu__list-item"><a class="menu__link" href="/puppeteer/blog/contributing">Contribute</a></li><li class="menu__list-item menu__list-item--collapsed"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/puppeteer/docs/next/puppeteer.puppeteer">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/puppeteer/docs/puppeteer.puppeteer">10.1.0</a></li><li class="menu__list-item"><a class="menu__link" href="/puppeteer/docs/10.0.0/puppeteer.puppeteer">10.0.0</a></li><li class="menu__list-item"><a class="menu__link" href="/puppeteer/docs/9.1.1/puppeteer.puppeteer">9.1.1</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/puppeteer/puppeteer" target="_blank" rel="noopener noreferrer" class="menu__link"><span>Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="menu__list-item"><a href="https://stackoverflow.com/questions/tagged/puppeteer" target="_blank" rel="noopener noreferrer" class="menu__link"><span>Stack<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li><li class="menu__list-item"><a href="https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer" class="menu__link"><span>Version 1.0<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_3J9K"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a></li></ul></div></div></div></nav><div class="main-wrapper mdx-wrapper mdx-page"><main class="container container--fluid margin-vert--lg"><div class="row mdxPageWrapper_3qD3"><div class="col col--8"><header><h1 class="h1Heading_27L5">Puppeteer</h1></header><p><a href="https://github.com/puppeteer/puppeteer/actions?query=workflow%3Arun-checks" target="_blank" rel="noopener noreferrer"><img src="https://github.com/puppeteer/puppeteer/workflows/run-checks/badge.svg" alt="Build status"></a> <a href="https://npmjs.org/package/puppeteer" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/npm/v/puppeteer.svg" alt="npm puppeteer package"></a></p><img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right"><h6><a aria-hidden="true" tabindex="-1" class="anchor" id="api--faq--contributing--troubleshooting"></a><a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md" target="_blank" rel="noopener noreferrer">API</a> | <a href="#faq">FAQ</a> | <a href="https://github.com/puppeteer/puppeteer/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing</a> | <a href="https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting</a><a class="hash-link" href="#api--faq--contributing--troubleshooting" title="Direct link to heading">#</a></h6><blockquote><p>Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the <a href="https://chromedevtools.github.io/devtools-protocol/" target="_blank" rel="noopener noreferrer">DevTools Protocol</a>. Puppeteer runs <a href="https://developers.google.com/web/updates/2017/04/headless-chrome" target="_blank" rel="noopener noreferrer">headless</a> by default, but can be configured to run full (non-headless) Chrome or Chromium.</p></blockquote><h6><a aria-hidden="true" tabindex="-1" class="anchor" id="what-can-i-do"></a>What can I do?<a class="hash-link" href="#what-can-i-do" title="Direct link to heading">#</a></h6><p>Most things that you can do manually in the browser can be done using Puppeteer! Here are a few examples to get you started:</p><ul><li>Generate screenshots and PDFs of pages.</li><li>Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. &quot;SSR&quot; (Server-Side Rendering)).</li><li>Automate form submission, UI testing, keyboard input, etc.</li><li>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.</li><li>Capture a <a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference" target="_blank" rel="noopener noreferrer">timeline trace</a> of your site to help diagnose performance issues.</li><li>Test Chrome Extensions.</li></ul><p>Give it a spin: <a href="https://try-puppeteer.appspot.com/" target="_blank" rel="noopener noreferrer">https://try-puppeteer.appspot.com/</a></p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="getting-started"></a>Getting Started<a class="hash-link" href="#getting-started" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="installation"></a>Installation<a class="hash-link" href="#installation" title="Direct link to heading">#</a></h3><p>To use Puppeteer in your project, run:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i puppeteer</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or &quot;yarn add puppeteer&quot;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Note: 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, or to download a different browser, see <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#environment-variables" target="_blank" rel="noopener noreferrer">Environment variables</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="puppeteer-core"></a>puppeteer-core<a class="hash-link" href="#puppeteer-core" title="Direct link to heading">#</a></h3><p>Since version 1.7.0 we publish the <a href="https://www.npmjs.com/package/puppeteer-core" target="_blank" rel="noopener noreferrer"><code>puppeteer-core</code></a> package,
a version of Puppeteer that doesn&#x27;t download any browser by default.</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i puppeteer-core</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or &quot;yarn add puppeteer-core&quot;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p><code>puppeteer-core</code> is intended to be a lightweight version of Puppeteer for launching an existing browser installation or for connecting to a remote one. Be sure that the version of puppeteer-core you install is compatible with the
browser you intend to connect to.</p><p>See <a href="https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#puppeteer-vs-puppeteer-core" target="_blank" rel="noopener noreferrer">puppeteer vs puppeteer-core</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="usage"></a>Usage<a class="hash-link" href="#usage" title="Direct link to heading">#</a></h3><p>Puppeteer follows the latest <a href="https://github.com/nodejs/Release#release-schedule" target="_blank" rel="noopener noreferrer">maintenance LTS</a> version of Node.</p><p>Note: Prior to v1.18.1, Puppeteer required at least Node v6.4.0. Versions from v1.18.1 to v2.1.0 rely on
Node 8.9.0+. Starting from v3.0.0 Puppeteer starts to rely on Node 10.18.1+. All examples below use async/await which is only supported in Node v7.6.0 or greater.</p><p>Puppeteer will be familiar to people using other browser testing frameworks. You create an instance
of <code>Browser</code>, open pages, and then manipulate them with <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#" target="_blank" rel="noopener noreferrer">Puppeteer&#x27;s API</a>.</p><p><strong>Example</strong> - navigating to <a href="https://example.com" target="_blank" rel="noopener noreferrer">https://example.com</a> and saving a screenshot as <em>example.png</em>:</p><p>Save file as <strong>example.js</strong></p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> puppeteer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;puppeteer&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> page </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">newPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goto</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">screenshot</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> path</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;example.png&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">close</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Execute script on the command line</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">node example.js</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Puppeteer sets an initial page size to 800×600px, which defines the screenshot size. The page size can be customized with <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#pagesetviewportviewport" target="_blank" rel="noopener noreferrer"><code>Page.setViewport()</code></a>.</p><p><strong>Example</strong> - create a PDF.</p><p>Save file as <strong>hn.js</strong></p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> puppeteer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;puppeteer&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> page </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">newPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goto</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;https://news.ycombinator.com&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> waitUntil</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;networkidle2&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">pdf</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> path</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;hn.pdf&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> format</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;a4&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">close</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Execute script on the command line</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">node hn.js</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>See <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#pagepdfoptions" target="_blank" rel="noopener noreferrer"><code>Page.pdf()</code></a> for more information about creating pdfs.</p><p><strong>Example</strong> - evaluate script in the context of the page</p><p>Save file as <strong>get-dimensions.js</strong></p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> puppeteer </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;puppeteer&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">(</span><span class="token keyword" style="color:#00009f">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> page </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">newPage</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">goto</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;https://example.com&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Get the &quot;viewport&quot; of the page, as reported by the page.</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> dimensions </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">evaluate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> width</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">documentElement</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">clientWidth</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> height</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">documentElement</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">clientHeight</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> deviceScaleFactor</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">window</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">devicePixelRatio</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;Dimensions:&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> dimensions</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">close</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Execute script on the command line</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">node get-dimensions.js</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>See <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#pageevaluatepagefunction-args" target="_blank" rel="noopener noreferrer"><code>Page.evaluate()</code></a> for more information on <code>evaluate</code> and related methods like <code>evaluateOnNewDocument</code> and <code>exposeFunction</code>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="default-runtime-settings"></a>Default runtime settings<a class="hash-link" href="#default-runtime-settings" title="Direct link to heading">#</a></h2><p><strong>1. Uses Headless mode</strong></p><p>Puppeteer launches Chromium in <a href="https://developers.google.com/web/updates/2017/04/headless-chrome" target="_blank" rel="noopener noreferrer">headless mode</a>. To launch a full version of Chromium, set the <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#puppeteerlaunchoptions" target="_blank" rel="noopener noreferrer"><code>headless</code> option</a> when launching a browser:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> headless</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// default is true</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p><strong>2. Runs a bundled version of Chromium</strong></p><p>By default, Puppeteer downloads and uses a specific version of Chromium so its API
is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium,
pass in the executable&#x27;s path when creating a <code>Browser</code> instance:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> executablePath</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;/path/to/Chrome&#x27;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>You can also use Puppeteer with Firefox Nightly (experimental support). See <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#puppeteerlaunchoptions" target="_blank" rel="noopener noreferrer"><code>Puppeteer.launch()</code></a> for more information.</p><p>See <a href="https://www.howtogeek.com/202825/what%E2%80%99s-the-difference-between-chromium-and-chrome/" target="_blank" rel="noopener noreferrer"><code>this article</code></a> for a description of the differences between Chromium and Chrome. <a href="https://chromium.googlesource.com/chromium/src/+/master/docs/chromium_browser_vs_google_chrome.md" target="_blank" rel="noopener noreferrer"><code>This article</code></a> describes some differences for Linux users.</p><p><strong>3. Creates a fresh user profile</strong></p><p>Puppeteer creates its own browser user profile which it <strong>cleans up on every run</strong>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="resources"></a>Resources<a class="hash-link" href="#resources" title="Direct link to heading">#</a></h2><ul><li><a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md" target="_blank" rel="noopener noreferrer">API Documentation</a></li><li><a href="https://github.com/puppeteer/puppeteer/tree/main/examples/" target="_blank" rel="noopener noreferrer">Examples</a></li><li><a href="https://github.com/transitive-bullshit/awesome-puppeteer" target="_blank" rel="noopener noreferrer">Community list of Puppeteer resources</a></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="debugging-tips"></a>Debugging tips<a class="hash-link" href="#debugging-tips" title="Direct link to heading">#</a></h2><ol><li><p>Turn off headless mode - sometimes it&#x27;s useful to see what the browser is
displaying. Instead of launching in headless mode, launch a full version of
the browser using <code>headless: false</code>:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> headless</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Slow it down - the <code>slowMo</code> option slows down Puppeteer operations by the
specified amount of milliseconds. It&#x27;s another way to help see what&#x27;s going on.</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> headless</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> slowMo</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">250</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// slow down by 250ms</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Capture console output - You can listen for the <code>console</code> event.
This is also handy when debugging code in <code>page.evaluate()</code>:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain">page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">on</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;console&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">(</span><span class="token parameter">msg</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;PAGE LOG:&#x27;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> msg</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">text</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">evaluate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token console class-name">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">log</span><span class="token punctuation" style="color:#393A34">(</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token template-string string" style="color:#e3116c">url is </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">${</span><span class="token template-string interpolation">location</span><span class="token template-string interpolation punctuation" style="color:#393A34">.</span><span class="token template-string interpolation">href</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#393A34">}</span><span class="token template-string template-punctuation string" style="color:#e3116c">`</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Use debugger in application code browser</p><p>There are two execution context: node.js that is running test code, and the browser
running application code being tested. This lets you debug code in the
application code browser; ie code inside <code>evaluate()</code>.</p><ul><li><p>Use <code>{devtools: true}</code> when launching Puppeteer:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> browser </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">launch</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> devtools</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Change default test timeout:</p><p>jest: <code>jest.setTimeout(100000);</code></p><p>jasmine: <code>jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;</code></p><p>mocha: <code>this.timeout(100000);</code> (don&#x27;t forget to change test to use <a href="https://stackoverflow.com/a/23492442" target="_blank" rel="noopener noreferrer">function and not &#x27;=&gt;&#x27;</a>)</p></li><li><p>Add an evaluate statement with <code>debugger</code> inside / add <code>debugger</code> to an existing evaluate statement:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">evaluate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">debugger</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>The test will now stop executing in the above evaluate statement, and chromium will stop in debug mode.</p></li></ul></li><li><p>Use debugger in node.js</p><p>This will let you debug test code. For example, you can step over <code>await page.click()</code> in the node.js script and see the click happen in the application code browser.</p><p>Note that you won&#x27;t be able to run <code>await page.click()</code> in
DevTools console due to this <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=833928" target="_blank" rel="noopener noreferrer">Chromium bug</a>. So if
you want to try something out, you have to add it to your test file.</p><ul><li><p>Add <code>debugger;</code> to your test, eg:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">debugger</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">click</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;a[target=_blank]&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Set <code>headless</code> to <code>false</code></p></li><li><p>Run <code>node --inspect-brk</code>, eg <code>node --inspect-brk node_modules/.bin/jest tests</code></p></li><li><p>In Chrome open <code>chrome://inspect/#devices</code> and click <code>inspect</code></p></li><li><p>In the newly opened test browser, type <code>F8</code> to resume test execution</p></li><li><p>Now your <code>debugger</code> will be hit and you can debug in the test browser</p></li></ul></li><li><p>Enable verbose logging - internal DevTools protocol traffic
will be logged via the <a href="https://github.com/visionmedia/debug" target="_blank" rel="noopener noreferrer"><code>debug</code></a> module under the <code>puppeteer</code> namespace.</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly"><pre tabindex="0" class="prism-code language-undefined codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token plain"> # Basic verbose logging</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> env DEBUG=&quot;puppeteer:*&quot; node script.js</span></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block">
</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> # Protocol traffic can be rather noisy. This example filters out all Network domain messages</span></span><span class="token-line" style="color:#393A34"><span class="token plain"> env DEBUG=&quot;puppeteer:*&quot; env DEBUG_COLORS=true node script.js 2&gt;&amp;1 | grep -v &#x27;&quot;Network&#x27;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div></li><li><p>Debug your Puppeteer (node) code easily, using <a href="https://github.com/GoogleChromeLabs/ndb" target="_blank" rel="noopener noreferrer">ndb</a></p></li></ol><ul><li><p><code>npm install -g ndb</code> (or even better, use <a href="https://github.com/zkat/npx" target="_blank" rel="noopener noreferrer">npx</a>!)</p></li><li><p>add a <code>debugger</code> to your Puppeteer (node) code</p></li><li><p>add <code>ndb</code> (or <code>npx ndb</code>) before your test command. For example:</p><p><code>ndb jest</code> or <code>ndb mocha</code> (or <code>npx ndb jest</code> / <code>npx ndb mocha</code>)</p></li><li><p>debug your test inside chromium like a boss!</p></li></ul><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="usage-with-typescript"></a>Usage with TypeScript<a class="hash-link" href="#usage-with-typescript" title="Direct link to heading">#</a></h2><p>We have recently completed a migration to move the Puppeteer source code from JavaScript to TypeScript and as of version 7.0.1 we ship our own built-in type definitions.</p><p>If you are on a version older than 7, we recommend installing the Puppeteer type definitions from the <a href="https://definitelytyped.org/" target="_blank" rel="noopener noreferrer">DefinitelyTyped</a> repository:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> --save-dev @types/puppeteer</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>The types that you&#x27;ll see appearing in the Puppeteer source code are based off the great work of those who have contributed to the <code>@types/puppeteer</code> package. We really appreciate the hard work those people put in to providing high quality TypeScript definitions for Puppeteer&#x27;s users.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="contributing-to-puppeteer"></a>Contributing to Puppeteer<a class="hash-link" href="#contributing-to-puppeteer" title="Direct link to heading">#</a></h2><p>Check out <a href="https://github.com/puppeteer/puppeteer/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">contributing guide</a> to get an overview of Puppeteer development.</p><header><h1 class="h1Heading_27L5">FAQ</h1></header><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-who-maintains-puppeteer"></a>Q: Who maintains Puppeteer?<a class="hash-link" href="#q-who-maintains-puppeteer" title="Direct link to heading">#</a></h4><p>The Chrome DevTools team maintains the library, but we&#x27;d love your help and expertise on the project!
See <a href="https://github.com/puppeteer/puppeteer/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer">Contributing</a>.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-what-is-the-status-of-cross-browser-support"></a>Q: What is the status of cross-browser support?<a class="hash-link" href="#q-what-is-the-status-of-cross-browser-support" title="Direct link to heading">#</a></h4><p>Official Firefox support is currently experimental. The ongoing collaboration with Mozilla aims to support common end-to-end testing use cases, for which developers expect cross-browser coverage. The Puppeteer team needs input from users to stabilize Firefox support and to bring missing APIs to our attention.</p><p>From Puppeteer v2.1.0 onwards you can specify <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#puppeteerlaunchoptions" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch({product: &#x27;firefox&#x27;})</code></a> to run your Puppeteer scripts in Firefox Nightly, without any additional custom patches. While <a href="https://www.npmjs.com/package/puppeteer-firefox" target="_blank" rel="noopener noreferrer">an older experiment</a> required a patched version of Firefox, <a href="https://wiki.mozilla.org/Remote" target="_blank" rel="noopener noreferrer">the current approach</a> works with “stock” Firefox.</p><p>We will continue to collaborate with other browser vendors to bring Puppeteer support to browsers such as Safari.
This effort includes exploration of a standard for executing cross-browser commands (instead of relying on the non-standard DevTools Protocol used by Chrome).</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-what-are-puppeteers-goals-and-principles"></a>Q: What are Puppeteer’s goals and principles?<a class="hash-link" href="#q-what-are-puppeteers-goals-and-principles" title="Direct link to heading">#</a></h4><p>The goals of the project are:</p><ul><li>Provide a slim, canonical library that highlights the capabilities of the <a href="https://chromedevtools.github.io/devtools-protocol/" target="_blank" rel="noopener noreferrer">DevTools Protocol</a>.</li><li>Provide a reference implementation for similar testing libraries. Eventually, these other frameworks could adopt Puppeteer as their foundational layer.</li><li>Grow the adoption of headless/automated browser testing.</li><li>Help dogfood new DevTools Protocol features...and catch bugs!</li><li>Learn more about the pain points of automated browser testing and help fill those gaps.</li></ul><p>We adapt <a href="https://www.chromium.org/developers/core-principles" target="_blank" rel="noopener noreferrer">Chromium principles</a> to help us drive product decisions:</p><ul><li><strong>Speed</strong>: Puppeteer has almost zero performance overhead over an automated page.</li><li><strong>Security</strong>: Puppeteer operates off-process with respect to Chromium, making it safe to automate potentially malicious pages.</li><li><strong>Stability</strong>: Puppeteer should not be flaky and should not leak memory.</li><li><strong>Simplicity</strong>: Puppeteer provides a high-level API that’s easy to use, understand, and debug.</li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-is-puppeteer-replacing-seleniumwebdriver"></a>Q: Is Puppeteer replacing Selenium/WebDriver?<a class="hash-link" href="#q-is-puppeteer-replacing-seleniumwebdriver" title="Direct link to heading">#</a></h4><p><strong>No</strong>. Both projects are valuable for very different reasons:</p><ul><li>Selenium/WebDriver focuses on cross-browser automation; its value proposition is a single standard API that works across all major browsers.</li><li>Puppeteer focuses on Chromium; its value proposition is richer functionality and higher reliability.</li></ul><p>That said, you <strong>can</strong> use Puppeteer to run tests against Chromium, e.g. using the community-driven <a href="https://github.com/smooth-code/jest-puppeteer" target="_blank" rel="noopener noreferrer">jest-puppeteer</a>. While this probably shouldn’t be your only testing solution, it does have a few good points compared to WebDriver:</p><ul><li>Puppeteer requires zero setup and comes bundled with the Chromium version it works best with, making it <a href="https://github.com/puppeteer/puppeteer/#getting-started" target="_blank" rel="noopener noreferrer">very easy to start with</a>. At the end of the day, it’s better to have a few tests running chromium-only, than no tests at all.</li><li>Puppeteer has event-driven architecture, which removes a lot of potential flakiness. There’s no need for evil “sleep(1000)” calls in puppeteer scripts.</li><li>Puppeteer runs headless by default, which makes it fast to run. Puppeteer v1.5.0 also exposes browser contexts, making it possible to efficiently parallelize test execution.</li><li>Puppeteer shines when it comes to debugging: flip the “headless” bit to false, add “slowMo”, and you’ll see what the browser is doing. You can even open Chrome DevTools to inspect the test environment.</li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-why-doesnt-puppeteer-vxxx-work-with-chromium-vyyy"></a>Q: Why doesn’t Puppeteer v.XXX work with Chromium v.YYY?<a class="hash-link" href="#q-why-doesnt-puppeteer-vxxx-work-with-chromium-vyyy" title="Direct link to heading">#</a></h4><p>We see Puppeteer as an <strong>indivisible entity</strong> with Chromium. Each version of Puppeteer bundles a specific version of Chromium – <strong>the only</strong> version it is guaranteed to work with.</p><p>This is not an artificial constraint: A lot of work on Puppeteer is actually taking place in the Chromium repository. Here’s a typical story:</p><ul><li>A Puppeteer bug is reported: <a href="https://github.com/puppeteer/puppeteer/issues/2709" target="_blank" rel="noopener noreferrer">https://github.com/puppeteer/puppeteer/issues/2709</a></li><li>It turned out this is an issue with the DevTools protocol, so we’re fixing it in Chromium: <a href="https://chromium-review.googlesource.com/c/chromium/src/+/1102154" target="_blank" rel="noopener noreferrer">https://chromium-review.googlesource.com/c/chromium/src/+/1102154</a></li><li>Once the upstream fix is landed, we roll updated Chromium into Puppeteer: <a href="https://github.com/puppeteer/puppeteer/pull/2769" target="_blank" rel="noopener noreferrer">https://github.com/puppeteer/puppeteer/pull/2769</a></li></ul><p>However, oftentimes it is desirable to use Puppeteer with the official Google Chrome rather than Chromium. For this to work, you should install a <code>puppeteer-core</code> version that corresponds to the Chrome version.</p><p>For example, in order to drive Chrome 71 with puppeteer-core, use <code>chrome-71</code> npm tag:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><span class="token plain"> puppeteer-core@chrome-71</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-which-chromium-version-does-puppeteer-use"></a>Q: Which Chromium version does Puppeteer use?<a class="hash-link" href="#q-which-chromium-version-does-puppeteer-use" title="Direct link to heading">#</a></h4><p>Look for the <code>chromium</code> entry in <a href="https://github.com/puppeteer/puppeteer/blob/main/src/revisions.ts" target="_blank" rel="noopener noreferrer">revisions.ts</a>. To find the corresponding Chromium commit and version number, search for the revision prefixed by an <code>r</code> in <a href="https://omahaproxy.appspot.com/" target="_blank" rel="noopener noreferrer">OmahaProxy</a>&#x27;s &quot;Find Releases&quot; section.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-which-firefox-version-does-puppeteer-use"></a>Q: Which Firefox version does Puppeteer use?<a class="hash-link" href="#q-which-firefox-version-does-puppeteer-use" title="Direct link to heading">#</a></h4><p>Since Firefox support is experimental, Puppeteer downloads the latest <a href="https://wiki.mozilla.org/Nightly" target="_blank" rel="noopener noreferrer">Firefox Nightly</a> when the <code>PUPPETEER_PRODUCT</code> environment variable is set to <code>firefox</code>. That&#x27;s also why the value of <code>firefox</code> in <a href="https://github.com/puppeteer/puppeteer/blob/main/src/revisions.ts" target="_blank" rel="noopener noreferrer">revisions.ts</a> is <code>latest</code> -- Puppeteer isn&#x27;t tied to a particular Firefox version.</p><p>To fetch Firefox Nightly as part of Puppeteer installation:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token assign-left variable" style="color:#36acaa">PUPPETEER_PRODUCT</span><span class="token operator" style="color:#393A34">=</span><span class="token plain">firefox </span><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i puppeteer</span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or &quot;yarn add puppeteer&quot;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-whats-considered-a-navigation"></a>Q: What’s considered a “Navigation”?<a class="hash-link" href="#q-whats-considered-a-navigation" title="Direct link to heading">#</a></h4><p>From Puppeteer’s standpoint, <strong>“navigation” is anything that changes a page’s URL</strong>.
Aside from regular navigation where the browser hits the network to fetch a new document from the web server, this includes <a href="https://www.w3.org/TR/html5/single-page.html#scroll-to-fragid" target="_blank" rel="noopener noreferrer">anchor navigations</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API" target="_blank" rel="noopener noreferrer">History API</a> usage.</p><p>With this definition of “navigation,” <strong>Puppeteer works seamlessly with single-page applications.</strong></p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-whats-the-difference-between-a-trusted-and-untrusted-input-event"></a>Q: What’s the difference between a “trusted&quot; and &quot;untrusted&quot; input event?<a class="hash-link" href="#q-whats-the-difference-between-a-trusted-and-untrusted-input-event" title="Direct link to heading">#</a></h4><p>In browsers, input events could be divided into two big groups: trusted vs. untrusted.</p><ul><li><strong>Trusted events</strong>: events generated by users interacting with the page, e.g. using a mouse or keyboard.</li><li><strong>Untrusted event</strong>: events generated by Web APIs, e.g. <code>document.createEvent</code> or <code>element.click()</code> methods.</li></ul><p>Websites can distinguish between these two groups:</p><ul><li>using an <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted" target="_blank" rel="noopener noreferrer"><code>Event.isTrusted</code></a> event flag</li><li>sniffing for accompanying events. For example, every trusted <code>&#x27;click&#x27;</code> event is preceded by <code>&#x27;mousedown&#x27;</code> and <code>&#x27;mouseup&#x27;</code> events.</li></ul><p>For automation purposes it’s important to generate trusted events. <strong>All input events generated with Puppeteer are trusted and fire proper accompanying events.</strong> If, for some reason, one needs an untrusted event, it’s always possible to hop into a page context with <code>page.evaluate</code> and generate a fake event:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly js"><pre tabindex="0" class="prism-code language-js codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token keyword control-flow" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">evaluate</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:#393A34">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token dom variable" style="color:#36acaa">document</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">querySelector</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;button[type=submit]&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">.</span><span class="token method function property-access" style="color:#d73a49">click</span><span class="token punctuation" style="color:#393A34">(</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><span class="token plain"></span></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-what-features-does-puppeteer-not-support"></a>Q: What features does Puppeteer not support?<a class="hash-link" href="#q-what-features-does-puppeteer-not-support" title="Direct link to heading">#</a></h4><p>You may find that Puppeteer does not behave as expected when controlling pages that incorporate audio and video. (For example, <a href="https://github.com/puppeteer/puppeteer/issues/291" target="_blank" rel="noopener noreferrer">video playback/screenshots is likely to fail</a>.) There are two reasons for this:</p><ul><li>Puppeteer is bundled with Chromium — not Chrome — and so by default, it inherits all of <a href="https://www.chromium.org/audio-video" target="_blank" rel="noopener noreferrer">Chromium&#x27;s media-related limitations</a>. 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 <a href="https://github.com/puppeteer/puppeteer/blob/v10.0.0/docs/api.md#puppeteerlaunchoptions" target="_blank" rel="noopener noreferrer"><code>executablePath</code> option to <code>puppeteer.launch</code></a>. You should only use this configuration if you need an official release of Chrome that supports these media formats.)</li><li>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 <a href="https://caniuse.com/#feat=http-live-streaming" target="_blank" rel="noopener noreferrer">does not support HTTP Live Streaming (HLS)</a>.</li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-i-am-having-trouble-installing--running-puppeteer-in-my-test-environment-where-should-i-look-for-help"></a>Q: I am having trouble installing / running Puppeteer in my test environment. Where should I look for help?<a class="hash-link" href="#q-i-am-having-trouble-installing--running-puppeteer-in-my-test-environment-where-should-i-look-for-help" title="Direct link to heading">#</a></h4><p>We have a <a href="https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">troubleshooting</a> guide for various operating systems that lists the required dependencies.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-how-do-i-trytest-a-prerelease-version-of-puppeteer"></a>Q: How do I try/test a prerelease version of Puppeteer?<a class="hash-link" href="#q-how-do-i-trytest-a-prerelease-version-of-puppeteer" title="Direct link to heading">#</a></h4><p>You can check out this repo or install the latest prerelease from npm:</p><div class="codeBlockContainer_K1bP"><div class="codeBlockContent_hGly bash"><pre tabindex="0" class="prism-code language-bash codeBlock_23N8 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_39YC"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i --save puppeteer@next</span></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_Ue-o clean-btn">Copy</button></div></div><p>Please note that prerelease may be unstable and contain bugs.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="q-i-have-more-questions-where-do-i-ask"></a>Q: I have more questions! Where do I ask?<a class="hash-link" href="#q-i-have-more-questions-where-do-i-ask" title="Direct link to heading">#</a></h4><p>There are many ways to get help on Puppeteer:</p><ul><li><a href="https://github.com/puppeteer/puppeteer/issues" target="_blank" rel="noopener noreferrer">bugtracker</a></li><li><a href="https://stackoverflow.com/questions/tagged/puppeteer" target="_blank" rel="noopener noreferrer">Stack Overflow</a></li></ul><p>Make sure to search these channels before posting your question.</p></div><div class="col col--2"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link">Getting Started</a><ul><li><a href="#installation" class="table-of-contents__link">Installation</a></li><li><a href="#puppeteer-core" class="table-of-contents__link">puppeteer-core</a></li><li><a href="#usage" class="table-of-contents__link">Usage</a></li></ul></li><li><a href="#default-runtime-settings" class="table-of-contents__link">Default runtime settings</a></li><li><a href="#resources" class="table-of-contents__link">Resources</a></li><li><a href="#debugging-tips" class="table-of-contents__link">Debugging tips</a></li><li><a href="#usage-with-typescript" class="table-of-contents__link">Usage with TypeScript</a></li><li><a href="#contributing-to-puppeteer" class="table-of-contents__link">Contributing to Puppeteer</a></li></ul></div></div></div></main></div><footer class="footer footer--dark"><div class="container"><div class="footer__bottom text--center"></div></div></footer></div>
<script src="/puppeteer/assets/js/runtime~main.57e71b8c.js"></script>
<script src="/puppeteer/assets/js/main.9ee296b0.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink