mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
46 lines
84 KiB
HTML
46 lines
84 KiB
HTML
|
<!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
|
|||
|
|
a version of Puppeteer that doesn'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 "yarn add puppeteer-core"</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'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">'puppeteer'</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">=></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">'https://example.com'</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">'example.png'</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">'puppeteer'</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">=></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">'https://news.ycombinator.com'</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">'networkidle2'</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><spa
|
|||
|
|
</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">'puppeteer'</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">=></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">'https://example.com'</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 "viewport" 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">=></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">'Dimensions:'</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-lab
|
|||
|
|
is guaranteed to work out of the box. To use Puppeteer with a different version of Chrome or Chromium,
|
|||
|
|
pass in the executable'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">'/path/to/Chrome'</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'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's another way to help see what'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">'console'</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">=></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">'PAGE LOG:'</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">=></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't forget to change test to use <a href="https://stackoverflow.com/a/23492442" target="_blank" rel="noopener noreferrer">function and not '=>'</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">=></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't be able to run
|
|||
|
|
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">'a[target=_blank]'</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="puppeteer:*" 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="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'</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'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'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'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: 'firefox'})</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> versio
|
|||
|
|
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" and "untrusted" 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>'click'</code> event is preceded by <code>'mousedown'</code> and <code>'mouseup'</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">=></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">'button[type=submit]'</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" st
|
|||
|
|
<script src="/puppeteer/assets/js/runtime~main.57e71b8c.js"></script>
|
|||
|
|
<script src="/puppeteer/assets/js/main.9ee296b0.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|