puppeteer/next/index.html

157 lines
104 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-index" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.0.1">
<title data-rh="true">Puppeteer | Puppeteer</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pptr.dev/next/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:counter" content="3"><meta data-rh="true" property="og:title" content="Puppeteer | Puppeteer"><meta data-rh="true" name="description" content="Build status"><meta data-rh="true" property="og:description" content="Build status"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pptr.dev/next/"><link data-rh="true" rel="alternate" href="https://pptr.dev/next/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pptr.dev/next/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://DVKY664LG7-dsn.algolia.net" crossorigin="anonymous"><link rel="search" type="application/opensearchdescription+xml" title="Puppeteer" href="/opensearch.xml">
<script src="/fix-location.js"></script><link rel="stylesheet" href="/assets/css/styles.10908b84.css">
<script src="/assets/js/runtime~main.b26e01cd.js" defer="defer"></script>
<script src="/assets/js/main.5ec27a9c.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><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="themedComponent_mlkZ themedComponent--light_NVdE"><img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" alt="Puppeteer Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Puppeteer</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/next/">Docs</a><a class="navbar__item navbar__link" href="/next/api/puppeteer.puppeteernode">Puppeteer API</a><a class="navbar__item navbar__link" href="/next/browsers-api/">@puppeteer/browsers API</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/next/">Next</a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/next/">Next</a></li><li><a class="dropdown__link" href="/">21.10.0</a></li><li><hr class="dropdown-separator"></li><li class="dropdown-archived-versions"><b>Archived versions</b></li><li><a href="https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.9.0/docs/api/index.md" target="_blank" rel="noopener noreferrer" class="dropdown__link">21.9.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li><li><a href="https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.8.0/docs/api/index.md" target="_blank" rel="noopener noreferrer" class="dropdown__link">21.8.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li><li><a href="https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.7.0/docs/api/index.md" target="_blank" rel="noopener noreferrer" class="dropdown__link">21.7.0<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li><li><a href="https://github.com/puppeteer/puppeteer/blob/puppeteer-v21.6.1/docs/api/index.md" target="_blank" rel="noopener noreferrer" class="dropdown__link">21.6.1<svg width="12" height="12" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828
<p><a href="https://github.com/puppeteer/puppeteer/actions?query=workflow%3ACI" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="https://github.com/puppeteer/puppeteer/workflows/CI/badge.svg" alt="Build status" class="img_ev3q"></a>
<a href="https://npmjs.org/package/puppeteer" target="_blank" rel="noopener noreferrer"><img loading="lazy" src="https://img.shields.io/npm/v/puppeteer.svg" alt="npm puppeteer package" class="img_ev3q"></a></p>
<img src="https://user-images.githubusercontent.com/10379601/29446482-04f7036a-841f-11e7-9872-91d1fc2ea683.png" height="200" align="right">
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="guides--api--faq--contributing--troubleshooting"><a href="https://pptr.dev/category/guides" target="_blank" rel="noopener noreferrer">Guides</a> | <a href="https://pptr.dev/api" target="_blank" rel="noopener noreferrer">API</a> | <a href="https://pptr.dev/faq" target="_blank" rel="noopener noreferrer">FAQ</a> | <a href="https://pptr.dev/contributing" target="_blank" rel="noopener noreferrer">Contributing</a> | <a href="https://pptr.dev/troubleshooting" target="_blank" rel="noopener noreferrer">Troubleshooting</a><a href="#guides--api--faq--contributing--troubleshooting" class="hash-link" aria-label="Direct link to guides--api--faq--contributing--troubleshooting" title="Direct link to guides--api--faq--contributing--troubleshooting"></a></h4>
<blockquote>
<p>Puppeteer is a Node.js library which provides a high-level API to control
Chrome/Chromium over the
<a href="https://chromedevtools.github.io/devtools-protocol/" target="_blank" rel="noopener noreferrer">DevTools Protocol</a>.
Puppeteer runs in
<a href="https://developer.chrome.com/articles/new-headless/" target="_blank" rel="noopener noreferrer">headless</a>
mode by default, but can be configured to run in full (&quot;headful&quot;)
Chrome/Chromium.</p>
</blockquote>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="what-can-i-do">What can I do?<a href="#what-can-i-do" class="hash-link" aria-label="Direct link to What can I do?" title="Direct link to What can I do?"></a></h4>
<p>Most things that you can do manually in the browser can be done using Puppeteer!
Here are a few examples to get you started:</p>
<ul>
<li>Generate screenshots and PDFs of pages.</li>
<li>Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e.
&quot;SSR&quot; (Server-Side Rendering)).</li>
<li>Automate form submission, UI testing, keyboard input, etc.</li>
<li>Create an automated testing environment using the latest JavaScript and
browser features.</li>
<li>Capture a
<a href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference" target="_blank" rel="noopener noreferrer">timeline trace</a>
of your site to help diagnose performance issues.</li>
<li><a href="https://pptr.dev/guides/chrome-extensions" target="_blank" rel="noopener noreferrer">Test Chrome Extensions</a>.</li>
</ul>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="getting-started">Getting Started<a href="#getting-started" class="hash-link" aria-label="Direct link to Getting Started" title="Direct link to Getting Started"></a></h2>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="installation">Installation<a href="#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation"></a></h3>
<p>To use Puppeteer in your project, run:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">npm</span><span class="token plain"> i puppeteer</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or using yarn</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> puppeteer</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># or using pnpm</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token function" style="color:#d73a49">pnpm</span><span class="token plain"> i puppeteer</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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>When you install Puppeteer, it automatically downloads a recent version of
<a href="https://developer.chrome.com/blog/chrome-for-testing/" target="_blank" rel="noopener noreferrer">Chrome for Testing</a> (~170MB macOS, ~282MB Linux, ~280MB Windows) and a <code>chrome-headless-shell</code> binary (starting with Puppeteer v21.6.0) that is <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 Puppeteer. The browser is downloaded to the <code>$HOME/.cache/puppeteer</code> folder
by default (starting with Puppeteer v19.0.0). See <a href="https://pptr.dev/api/puppeteer.configuration" target="_blank" rel="noopener noreferrer">configuration</a> for configuration options and environmental variables to control the download behavor.</p>
<p>If you deploy a project using Puppeteer to a hosting provider, such as Render or
Heroku, you might need to reconfigure the location of the cache to be within
your project folder (see an example below) because not all hosting providers
include <code>$HOME/.cache</code> into the project&#x27;s deployment.</p>
<p>For a version of Puppeteer without the browser installation, see
<a href="#puppeteer-core"><code>puppeteer-core</code></a>.</p>
<p>If used with TypeScript, the minimum supported TypeScript version is <code>4.7.4</code>.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="configuration">Configuration<a href="#configuration" class="hash-link" aria-label="Direct link to Configuration" title="Direct link to Configuration"></a></h4>
<p>Puppeteer uses several defaults that can be customized through configuration
files.</p>
<p>For example, to change the default cache directory Puppeteer uses to install
browsers, you can add a <code>.puppeteerrc.cjs</code> (or <code>puppeteer.config.cjs</code>) at the
root of your application with the contents</p>
<div class="language-js codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-js codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">join</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 function" style="color:#d73a49">require</span><span class="token punctuation" style="color:#393A34">(</span><span class="token string" style="color:#e3116c">&#x27;path&#x27;</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 doc-comment comment" style="color:#999988;font-style:italic">/**</span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> * </span><span class="token doc-comment comment keyword" style="color:#00009f;font-style:italic">@type</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"> </span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">{</span><span class="token doc-comment comment class-name keyword" style="color:#00009f;font-style:italic">import</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">(</span><span class="token doc-comment comment class-name string" style="color:#e3116c;font-style:italic">&quot;puppeteer&quot;</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">)</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">.</span><span class="token doc-comment comment class-name" style="color:#999988;font-style:italic">Configuration</span><span class="token doc-comment comment class-name punctuation" style="color:#393A34;font-style:italic">}</span><span class="token doc-comment comment" style="color:#999988;font-style:italic"></span><br></span><span class="token-line" style="color:#393A34"><span class="token doc-comment comment" style="color:#999988;font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">module</span><span class="token punctuation" style="color:#393A34">.</span><span class="token property-access">exports</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 comment" style="color:#999988;font-style:italic">// Changes the cache location for Puppeteer.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token literal-property property" style="color:#36acaa">cacheDirectory</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">join</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#393A34">,</s
<p>After adding the configuration file, you will need to remove and reinstall
<code>puppeteer</code> for it to take effect.</p>
<p>See the <a href="https://pptr.dev/guides/configuration" target="_blank" rel="noopener noreferrer">configuration guide</a> for more
information.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="puppeteer-core"><code>puppeteer-core</code><a href="#puppeteer-core" class="hash-link" aria-label="Direct link to puppeteer-core" title="Direct link to puppeteer-core"></a></h4>
<p>For every release since v1.7.0 we publish two packages:</p>
<ul>
<li><a href="https://www.npmjs.com/package/puppeteer" target="_blank" rel="noopener noreferrer"><code>puppeteer</code></a></li>
<li><a href="https://www.npmjs.com/package/puppeteer-core" target="_blank" rel="noopener noreferrer"><code>puppeteer-core</code></a></li>
</ul>
<p><code>puppeteer</code> is a <em>product</em> for browser automation. When installed, it downloads
a version of Chrome, which it then drives using <code>puppeteer-core</code>. Being an
end-user product, <code>puppeteer</code> automates several workflows using reasonable
defaults <a href="https://pptr.dev/guides/configuration" target="_blank" rel="noopener noreferrer">that can be customized</a>.</p>
<p><code>puppeteer-core</code> is a <em>library</em> to help drive anything that supports DevTools
protocol. Being a library, <code>puppeteer-core</code> is fully driven through its
programmatic interface implying no defaults are assumed and <code>puppeteer-core</code>
will not download Chrome when installed.</p>
<p>You should use <code>puppeteer-core</code> if you are
<a href="https://pptr.dev/api/puppeteer.puppeteer.connect" target="_blank" rel="noopener noreferrer">connecting to a remote browser</a>
or <a href="https://pptr.dev/browsers-api/" target="_blank" rel="noopener noreferrer">managing browsers yourself</a>.
If you are managing browsers yourself, you will need to call
<a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer"><code>puppeteer.launch</code></a> with
an explicit
<a href="https://pptr.dev/api/puppeteer.launchoptions" target="_blank" rel="noopener noreferrer"><code>executablePath</code></a>
(or <a href="https://pptr.dev/api/puppeteer.launchoptions" target="_blank" rel="noopener noreferrer"><code>channel</code></a> if it&#x27;s
installed in a standard location).</p>
<p>When using <code>puppeteer-core</code>, remember to change the import:</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> puppeteer </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;puppeteer-core&#x27;</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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage"></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
<a href="https://pptr.dev/api/puppeteer.puppeteernode.launch" target="_blank" rel="noopener noreferrer">launch</a>/<a href="https://pptr.dev/api/puppeteer.puppeteernode.connect" target="_blank" rel="noopener noreferrer">connect</a>
a <a href="https://pptr.dev/api/puppeteer.browser" target="_blank" rel="noopener noreferrer">browser</a>,
<a href="https://pptr.dev/api/puppeteer.browser.newpage" target="_blank" rel="noopener noreferrer">create</a> some
<a href="https://pptr.dev/api/puppeteer.page" target="_blank" rel="noopener noreferrer">pages</a>, and then manipulate them with
<a href="https://pptr.dev/api" target="_blank" rel="noopener noreferrer">Puppeteer&#x27;s API</a>.</p>
<p>For more in-depth usage, check our <a href="https://pptr.dev/category/guides" target="_blank" rel="noopener noreferrer">guides</a>
and <a href="https://github.com/puppeteer/puppeteer/tree/main/examples" target="_blank" rel="noopener noreferrer">examples</a>.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example"></a></h4>
<p>The following example searches <a href="https://developer.chrome.com/" target="_blank" rel="noopener noreferrer">developer.chrome.com</a> for blog posts with text &quot;automate beyond recorder&quot;, click on the first result and print the full title of the blog post.</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" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> puppeteer </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&#x27;puppeteer&#x27;</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">=&gt;</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 comment" style="color:#999988;font-style:italic">// Launch the browser and open a new blank page</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" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Navigate the page to a URL</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">&#x27;https://developer.chrome.com/&#x27;</span><span class="token punctuation" style="color:#393A34">)</span><span class="token
<h3 class="anchor anchorWithStickyNavbar_LWe7" id="default-runtime-settings">Default runtime settings<a href="#default-runtime-settings" class="hash-link" aria-label="Direct link to Default runtime settings" title="Direct link to Default runtime settings"></a></h3>
<p><strong>1. Uses Headless mode</strong></p>
<p>By default Puppeteer launches Chrome in
<a href="https://developer.chrome.com/articles/new-headless/" target="_blank" rel="noopener noreferrer">old Headless mode</a>.</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" style="color:#393A34;background-color:#f6f8fa"><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 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 comment" style="color:#999988;font-style:italic">// Equivalent to</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 plain">headless</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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><a href="https://developer.chrome.com/articles/new-headless/" target="_blank" rel="noopener noreferrer">Chrome 112 launched a new Headless mode</a> that might cause some differences in behavior compared to the old Headless implementation.
In the future Puppeteer will start defaulting to new implementation.
We recommend you try it out before the switch:</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" style="color:#393A34;background-color:#f6f8fa"><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 string" style="color:#e3116c">&#x27;new&#x27;</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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p>To launch a &quot;headful&quot; version of Chrome, set the
<a href="https://pptr.dev/api/puppeteer.browserlaunchargumentoptions" target="_blank" rel="noopener noreferrer"><code>headless</code></a> to <code>false</code>
option when launching a browser:</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" style="color:#393A34;background-color:#f6f8fa"><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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div>
<p><strong>2. Runs a bundled version of Chrome</strong></p>
<p>By default, Puppeteer downloads and uses a specific version of Chrome so its
API is guaranteed to work out of the box. To use Puppeteer with a different
version of Chrome or Chromium, pass in the executable&#x27;s path when creating a
<code>Browser</code> instance:</p>
<div class="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" style="color:#393A34;background-color:#f6f8fa"><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">&#x27;/path/to/Chrome&#x27;</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 viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" 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 viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" 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. See
<a href="https://pptr.dev/faq/#q-what-is-the-status-of-cross-browser-support" target="_blank" rel="noopener noreferrer">status of cross-browser support</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>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="using-docker">Using Docker<a href="#using-docker" class="hash-link" aria-label="Direct link to Using Docker" title="Direct link to Using Docker"></a></h4>
<p>See our <a href="https://pptr.dev/guides/docker" target="_blank" rel="noopener noreferrer">Docker guide</a>.</p>
<h4 class="anchor anchorWithStickyNavbar_LWe7" id="using-chrome-extensions">Using Chrome Extensions<a href="#using-chrome-extensions" class="hash-link" aria-label="Direct link to Using Chrome Extensions" title="Direct link to Using Chrome Extensions"></a></h4>
<p>See our <a href="https://pptr.dev/guides/chrome-extensions" target="_blank" rel="noopener noreferrer">Chrome extensions guide</a>.</p>
<h2 class="anchor anchorWithStickyNavbar_LWe7" id="resources">Resources<a href="#resources" class="hash-link" aria-label="Direct link to Resources" title="Direct link to Resources"></a></h2>
<ul>
<li><a href="https://pptr.dev/api" target="_blank" rel="noopener noreferrer">API Documentation</a></li>
<li><a href="https://pptr.dev/category/guides" target="_blank" rel="noopener noreferrer">Guides</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="contributing">Contributing<a href="#contributing" class="hash-link" aria-label="Direct link to Contributing" title="Direct link to Contributing"></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 href="#faq" class="hash-link" aria-label="Direct link to FAQ" title="Direct link to FAQ"></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"><a class="pagination-nav__link pagination-nav__link--next" href="/next/category/guides"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Guides</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="#default-runtime-settings" class="table-of-contents__link toc-highlight">Default runtime settings</a></li></ul></li><li><a href="#resources" class="table-of-contents__link toc-highlight">Resources</a></li><li><a href="#contributing" class="table-of-contents__link toc-highlight">Contributing</a></li><li><a href="#faq" class="table-of-contents__link toc-highlight">FAQ</a></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/puppeteer" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li><li class="footer__item"><a href="https://twitter.com/chromedevtools" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li><li class="footer__item"><a href="https://goo.gle/devtools-youtube" target="_blank" rel="noopener noreferrer" class="footer__link-item">YouTube<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><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></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2024 Google, Inc.</div></div></div></footer></div>
</body>
</html>