mirror of
https://github.com/puppeteer/puppeteer
synced 2024-06-14 14:02:48 +00:00
32 lines
92 KiB
HTML
32 lines
92 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en" dir="ltr" class="docs-wrapper docs-doc-page docs-version-16.0.0 plugin-docs plugin-id-default docs-doc-id-index">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|||
|
|
<meta name="generator" content="Docusaurus v2.0.0-beta.21">
|
|||
|
|
<title data-rh="true">Puppeteer | Puppeteer</title><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pptr.dev/16.0.0/"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="16.0.0"><meta data-rh="true" name="docusaurus_tag" content="docs-default-16.0.0"><meta data-rh="true" name="docsearch:version" content="16.0.0"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-16.0.0"><meta data-rh="true" property="og:title" content="Puppeteer | Puppeteer"><meta data-rh="true" name="description" content="Build status npm puppeteer package"><meta data-rh="true" property="og:description" content="Build status npm puppeteer package"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pptr.dev/16.0.0/"><link data-rh="true" rel="alternate" href="https://pptr.dev/16.0.0/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pptr.dev/16.0.0/" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.39576fb3.css">
|
|||
|
|
<link rel="preload" href="/assets/js/runtime~main.1a7f52b4.js" as="script">
|
|||
|
|
<link rel="preload" href="/assets/js/main.7793deb0.js" as="script">
|
|||
|
|
</head>
|
|||
|
|
<body class="navigation-with-keyboard">
|
|||
|
|
<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 role="region"><a href="#" class="skipToContent_fXgn">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><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="/"><div class="navbar__logo"><img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt="Puppeteer Logo" class="themedImage_ToTc themedImage--light_HNdA"><img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt="Puppeteer Logo" class="themedImage_ToTc themedImage--dark_i4oU"></div><b class="navbar__title text--truncate">Puppeteer</b></a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a aria-current="page" class="navbar__link active" aria-haspopup="true" aria-expanded="false" role="button" href="/16.0.0/">16.0.0</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/next/">Next</a></li><li><a class="dropdown__link" href="/">16.1.0</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/16.0.0/">16.0.0</a></li><li><a class="dropdown__link" href="/15.5.0/">15.5.0</a></li><li><a class="dropdown__link" href="/15.4.2/">15.4.2</a></li><li><a class="dropdown__link" href="/15.4.1/">15.4.1</a></li><li><a class="dropdown__link" href="/15.4.0/">15.4.0</a></li><li><a class="dropdown__link" href="/15.3.2/">15.3.2</a></li><li><a class="dropdown__link" href="/15.3.1/">15.3.1</a></li><li><a class="dropdown__link" href="/15.3.0/">15.3.0</a></li></ul></div><div class="searchBox_ZlJk"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div><div class="searchHintContainer_Pkmr"><kbd class="searchHint_iIMx">ctrl</kbd><kbd class="searchHint_iIMx">K</kbd></div></div></div><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-
|
|||
|
|
If Puppeteer doesn't find them in the environment during the installation step, a lowercased variant of these variables will be used from the <a href="https://docs.npmjs.com/cli/config" target="_blank" rel="noopener noreferrer">npm config</a>.</p><ul><li><code>HTTP_PROXY</code>, <code>HTTPS_PROXY</code>, <code>NO_PROXY</code> - defines HTTP proxy settings that are used to download and run the browser.</li><li><code>PUPPETEER_SKIP_CHROMIUM_DOWNLOAD</code> - do not download bundled Chromium during installation step.</li><li><code>PUPPETEER_TMP_DIR</code> - defines the directory to be used by Puppeteer for creating temporary files. Defaults to <a href="https://nodejs.org/api/os.html#os_os_tmpdir" target="_blank" rel="noopener noreferrer"><code>os.tmpdir()</code></a>.</li><li><code>PUPPETEER_DOWNLOAD_HOST</code> - overwrite URL prefix that is used to download Chromium. Note: this includes protocol and might even include path prefix. Defaults to <code>https://storage.googleapis.com</code>.</li><li><code>PUPPETEER_DOWNLOAD_PATH</code> - overwrite the path for the downloads folder. Defaults to <code><root>/.local-chromium</code>, where <code><root></code> is Puppeteer's package root.</li><li><code>PUPPETEER_CHROMIUM_REVISION</code> - specify a certain version of Chromium you'd like Puppeteer to use. See <a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch</code></a> on how executable path is inferred.</li><li><code>PUPPETEER_EXECUTABLE_PATH</code> - specify an executable path to be used in <a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch</code></a>.</li><li><code>PUPPETEER_PRODUCT</code> - specify which browser you'd like Puppeteer to use. Must be one of <code>chrome</code> or <code>firefox</code>. This can also be used during installation to fetch the recommended browser binary. Setting <code>product</code> programmatically in <a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch</code></a> supersedes this environment variable. The product is exposed in <a href="https://pptr.dev/api/puppeteer.product" target="_blank" rel="noopener noreferrer"><code>puppeteer.product</code></a></li><li><code>PUPPETEER_EXPERIMENTAL_CHROMIUM_MAC_ARM</code> — specify Puppeteer download Chromium for Apple M1. On Apple M1 devices Puppeteer by default downloads the version for Intel's processor which runs via Rosetta. It works without any problems, however, with this option, you should get more efficient resource usage (CPU and RAM) that could lead to a faster execution time.</li></ul><div class="admonition admonition-danger alert alert--danger"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>danger</h5></div><div class="admonition-content"><p>Puppeteer is only <a href="https://pptr.dev/faq#q-why-doesnt-puppeteer-vxxx-work-with-chromium-vyyy" target="_blank" rel="noopener noreferrer">guaranteed to work</a> with the bundled Chromium, use at your own risk.</p></div></div><div class="admonition admonition-caution alert alert--warning"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893
|
|||
|
|
Chromium, which it then drives using <code>puppeteer-core</code>. Being an end-user product, <code>puppeteer</code> supports a bunch of convenient <code>PUPPETEER_*</code> env variables to tweak its behavior.</p><p><code>puppeteer-core</code> is a <em>library</em> to help drive anything that supports DevTools protocol. <code>puppeteer-core</code> doesn't download Chromium when installed. Being a library, <code>puppeteer-core</code> is fully driven
|
|||
|
|
through its programmatic interface and disregards all the <code>PUPPETEER_*</code> env variables.</p><p>To sum up, the only differences between <code>puppeteer-core</code> and <code>puppeteer</code> are:</p><ul><li><code>puppeteer-core</code> doesn't automatically download Chromium when installed.</li><li><code>puppeteer-core</code> ignores all <code>PUPPETEER_*</code> env variables.</li></ul><p>In most cases, you'll be fine using the <code>puppeteer</code> package.</p><p>However, you should use <code>puppeteer-core</code> if:</p><ul><li>you're building another end-user product or library atop of DevTools protocol. For example, one might build a PDF generator using <code>puppeteer-core</code> and write a custom <code>install.js</code> script that downloads <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md" target="_blank" rel="noopener noreferrer"><code>headless_shell</code></a> instead of Chromium to save disk space.</li><li>you're bundling Puppeteer to use in Chrome Extension / browser with the DevTools protocol where downloading an additional Chromium binary is unnecessary.</li><li>you're building a set of tools where <code>puppeteer-core</code> is one of the ingredients and you want to postpone <code>install.js</code> script execution until Chromium is about to be used.</li></ul><p>When using <code>puppeteer-core</code>, remember to change the <em>include</em> line:</p><div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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 keyword" style="color:#00009f">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">'puppeteer-core'</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>You will then need to call <a href="https://pptr.dev/api/puppeteer.puppeteer.connect" target="_blank" rel="noopener noreferrer"><code>puppeteer.connect</code></a> or <a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch</code></a> with an explicit <code>executablePath</code> or <code>channel</code> option.</p><h3 class="anchor anchorWithStickyNavbar_LWe7" id="usage">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>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://pptr.dev/api" 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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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 keyword" style="color:#00009f">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><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></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 operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></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" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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><br></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" style="color:#00009f">await</span><span class="token plain"> browser</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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
|
|||
|
|
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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>You can also use Puppeteer with Firefox Nightly (experimental support). See <a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" 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/+/refs/heads/main/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 class="anchor anchorWithStickyNavbar_LWe7" id="resources">Resources<a class="hash-link" href="#resources" title="Direct link to heading"></a></h2><ul><li><a href="https://pptr.dev/api" 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 class="anchor anchorWithStickyNavbar_LWe7" id="debugging-tips">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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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><br></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><br></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><br></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><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain">page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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"> msg </span><span class="token operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 function" 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><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token builtin">console</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBo
|
|||
|
|
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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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" style="color:#00009f">await</span><span class="token plain"> puppeteer</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">)</span><span class="token punctuation" style="color:#393A34">;</span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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 operator" style="color:#393A34">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></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><br></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><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard"
|
|||
|
|
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="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><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><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">await</span><span class="token plain"> page</span><span class="token punctuation" style="color:#393A34">.</span><span class="token function" 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><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></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_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token plain"> # Basic verbose logging</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> env DEBUG="puppeteer:*" node script.js</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></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><br></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><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg class="copyButtonIcon_y97N" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg class="copyButtonSuccessIcon_LjdS" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></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 class="anchor anchorWithStickyNavbar_LWe7" id="contributing">Contributing<a class="hash-link" href="#contributing" title="Direct link to heading"></a></h2><p>Check out our <a href="https://pptr.dev/contributing" target="_blank" rel="noopener noreferrer">contributing guide</a> to get an overview of Puppeteer development.</p><h2 class="anchor anchorWithStickyNavbar_LWe7" id="faq">FAQ<a class="hash-link" href="#faq" title="Direct link to heading"></a></h2><p>Our <a href="https://pptr.dev/faq" target="_blank" rel="noopener noreferrer">FAQ</a> has migrated to <a href="https://pptr.dev/faq" target="_blank" rel="noopener noreferrer">our site</a>.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--next" href="/16.0.0/faq"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">FAQ</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#getting-started" class="table-of-contents__link toc-highlight">Getting Started</a><ul><li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li><li><a href="#working-with-chrome-extensions" class="table-of-contents__link toc-highlight">Working with Chrome Extensions</a></li></ul></li><li><a href="#default-runtime-settings" class="table-of-contents__link toc-highlight">Default runtime s
|
|||
|
|
<script src="/assets/js/runtime~main.1a7f52b4.js"></script>
|
|||
|
|
<script src="/assets/js/main.7793deb0.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|