1"use strict";(self.webpackChunkpixelpoint_website=self.webpackChunkpixelpoint_website||[]).push([[5516],{2438:function(o,t,e){e.r(t),e.d(t,{Head:function(){return u},default:function(){return g}});var r=e(8453),n=e(6540),s=e(4754);const c={annotations:s.hk,Code:s.Cy},i={staticMediaQuery:"not screen, (max-width: 768px)",lineNumbers:void 0,showCopyButton:!0,themeName:"dark-plus"};function l(o){const t=Object.assign({p:"p",span:"span"},(0,r.RP)(),o.components);return c||p("CH",!1),c.Code||p("CH.Code",!0),n.createElement(n.Fragment,null,n.createElement("style",{dangerouslySetInnerHTML:{__html:'[data-ch-theme="dark-plus"] { --ch-t-colorScheme: var(--ch-0);--ch-t-foreground: var(--shiki-token-embed);--ch-t-background: var(--shiki-background-editor);--ch-t-editor-background: var(--shiki-background-editor);--ch-t-editor-foreground: var(--shiki-token-embed);--ch-t-tab-activeBackground: var(--shiki-background-editor);--ch-t-tab-inactiveBackground: var(--shiki-background-editor);--ch-t-tab-border: var(--shiki-menu-background);--ch-t-tab-activeBorder: var(--shiki-background-editor);--ch-t-editorGroupHeader-tabsBackground: var(--shiki-background-header);--ch-t-input-foreground: var(--shiki-token-embed);--ch-t-sideBar-foreground: var(--shiki-token-embed); }'}}),"\n",n.createElement(t.p,null,"Recently I've been working on an automation task for one of our internal services, trying to make retina quality full-page screenshots of a website. It should've been a trivial problem, but apparently, there are still no web browser testing/automation libraries in 2022 that can help with it."),"\n",n.createElement(t.p,null,"I've tested Playwright, Puppeteer, and Selenium, but each of them has the same set of issues: full-page screenshots made via standard API are either include blank sections (parts of a website where dynamic content resides), or the whole process fails if the page is long enough - like in my case, with a viewport width of 1920px and height exceeding 10,000px."),"\n",n.createElement(t.p,null,"Here is the example of my straightforward approach with the following generic Puppeteer API call:"),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"puppeteer ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'puppeteer'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"url ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'https://stripe.com/'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"screenshot ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" () ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"puppeteer",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"launch",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"newPage",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"setViewport",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1920",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1080",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" deviceScaleFactor: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"2",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"goto",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"url",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" path: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'screenshot.png'",props:{style:{color:"var(--shiki-token-string)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" fullPage: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"true",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"close",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"js"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Which in certain cases results in:"),"\n",n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<figure class="gatsby-resp-image-figure" style="">\n <span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 696px; "\n >
1\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 52.29885057471264%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAYCA//EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHlqjWT6gH/xAAbEAACAQUAAAAAAAAAAAAAAAABAgQAAxQVIP/aAAgBAQABBQLFkUsG4Rr24//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AYj/xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAgEBPwGq/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAEgISIykbL/2gAIAQEABj8Cr0XNIzWof//EABoQAAICAwAAAAAAAAAAAAAAAAERACAhUfH/2gAIAQEAAT8hY0JhqK6OZ11P/9oADAMBAAIAAwAAABBLD//EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/EJQ//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8Qtb//xAAcEAEAAQQDAAAAAAAAAAAAAAABABEgUcEhQfD/2gAIAQEAAT8Qq049pdznd6YuajPWbs//2Q==\'); background-size: cover; display: block;"\n ></span>\n <picture>\n <source\n srcset="/static/35b3e1c9496c6ebc159dcdcd890a3530/09400/broken-screenshot.webp 174w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/3266f/broken-screenshot.webp 348w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/657d2/broken-screenshot.webp 696w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/e644e/broken-screenshot.webp 1044w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/8daba/broken-screenshot.webp 1392w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/3319d/broken-screenshot.webp 2436w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/webp"\n />\n <source\n srcset="/static/35b3e1c9496c6ebc159dcdcd890a3530/f52d2/broken-screenshot.jpg 174w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/14ab8/broken-screenshot.jpg 348w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/a4476/broken-screenshot.jpg 696w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/4ef30/broken-screenshot.jpg 1044w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/16454/broken-screenshot.jpg 1392w,\n/static/35b3e1c9496c6ebc159dcdcd890a3530/a0c16/broken-screenshot.jpg 2436w"\n sizes="(max-width: 696px) 100vw, 696px"\n type="image/jpeg"\n />\n <img\n class="gatsby-resp-image-image"\n src="/static/35b3e1c9496c6ebc159dcdcd890a3530/a4476/broken-screenshot.jpg"\n alt="An example of screenshot taken with default API"\n title=""\n loading="lazy"\n decoding="async"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n />\n </picture>\n </span>\n <figcaption class="gatsby-resp-image-figcaption">An example of screenshot taken with default API</figcaption>\n </figure>'}}),"\n",n.createElement(t.p,null,"After pondering on this for a few hours, I was able to find a workaround: we need to take multiple screenshots of a page and then merge them together. In this article, I am going to show you how to do it using Puppeteer and Sharp library."),"\n",n.createElement(t.p,null,"Let's begin with the installation of Puppeteer and Sharp:"),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"npm ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"install puppeteer sharp",props:{style:{color:"var(--shiki-token-string)"}}}]}],lang:"bash"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Then declare a few constants - we are going to need them later."),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"puppeteer ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'puppeteer'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"fs ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'fs'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"sharp ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'sharp'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]}
1,{tokens:[{content:"// URL of the webpage you want to take screenshot of",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"URL ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'https://tailwindcss.com/'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"// viewport configuration",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1920",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1080",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"2",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"// Chunk height is a value in px that defines",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"// maximum height of each screenshot.",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"// Use a smaller or bigger number based on the tests.",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"6000",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"js"},annotations:[]}]}),"\n",n.createElement(t.p,null,"To calculate properly the total amount of screenshots to take, we need to know the exact height of a page, for this purpose letâs use this function"),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"getHeight ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"evaluate",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"js"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Yet another helper function that will allow us to automatically scroll down the page, triggering all animations and image loading prior to taking a screenshot."),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"async ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"autoScroll",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" try",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"evaluate",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" () ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Scroll to the bottom of the page, so that all the content is visible and loaded",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"new ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"Promise",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"((",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"resolve",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"reject",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"distance ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"100",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"timer ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"setInterval",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"scrollHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" window",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollBy",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"distance",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"+= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"distance",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:">= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" clearInterval",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"timer",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" resolve",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }, ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"50",props:{style:{color:"var(--shiki-token-constant)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Scroll back to the top of the page, so sticky menus will appear at the top",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollTop ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"documentElement",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollTop ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"catch",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"err",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" console",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"log",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"err",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"js"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The last bit is to take a screenshot. Here is a full code snippet with additional comments that might be helpful to achieve the same result."),"\n",n.createElement(c.Code,{codeConfig:i,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"puppeteer ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'puppeteer'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"fs ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'fs'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"sharp ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"require",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'sharp'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"// Puppeteer configuration options",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"URL ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'https://tailwindcss.com/'",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1920",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"1080",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE
1_FACTOR ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"2",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"6000",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"// Helper function, needed for calculating number of chunks",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"getHeight ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"evaluate",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" return ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"// Auto scroll the page to trigger all page animations and image loading",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:"async ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"function ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"autoScroll",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" try",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"evaluate",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" () ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"new ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"Promise",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"((",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"resolve",props:{style:{color:"var(--shiki-color-text)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"reject",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"distance ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"100",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"timer ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"setInterval",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(() ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" var ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"scrollHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" window",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollBy",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"distance",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"+= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"distance",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"totalHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:">= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"scrollHeight",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" clearInterval",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"timer",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" resolve",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }, ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"50",props:{style:{color:"var(--shiki-token-constant)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Scroll back to the top of the page, so sticky menus appears at the right place.",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"body",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollTop ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"document",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"documentElement",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"scrollTop ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"catch",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"err",props:{style:{color:"var(--shiki-color-text)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" console",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"log",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"err",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"}",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"screenshot ",props:{style:{color:"var(--shiki-token-function)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"async",props:{style:{color:"var(--shiki-token-operator)"}}},{content:" () ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=>",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"puppeteer",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"launch",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"newPage",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"setViewport",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" deviceScaleFactor: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"goto",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"URL",props:{style:{color:"var(--shiki-token-operator)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"autoScroll",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"getHeight",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"waitForNetworkIdle",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // If page has height more than 6000px, then split it into the chunks and take screenshots of each chunk",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"> ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const "
1,props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"chunks ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"Math",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"ceil",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"/ ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"chunkCompositeOptions ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"=",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" [];",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" for",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"let ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"i ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:"; ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"i ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"< ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"chunks",props:{style:{color:"var(--shiki-color-text)"}}},{content:"; ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"i",props:{style:{color:"var(--shiki-color-text)"}}},{content:"++",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" let ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Calculate chunk offset top for a screenshot",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"offsetTop ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"i ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"filePath ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"`./screenshot-",props:{style:{color:"var(--shiki-token-string)"}}},{content:"${i}",props:{style:{color:"var(--shiki-color-text)"}}},{content:".png`",props:{style:{color:"var(--shiki-token-string)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" if",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" (",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"- ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"i ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"< ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:") {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"- ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"i",props:{style:{color:"var(--shiki-color-text)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Take a screenshot using clip option passing top offset",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" path: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"filePath",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" clip:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" x: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" y: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"offsetTop",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"- ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"i",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" },",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"else",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:";",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" path: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"filePath",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" clip:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" x: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" y: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"offsetTop",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"CHUNK_HEIGHT",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" },",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Prepare image merge options for sharp library api",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" chunkCompositeOptions",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"push",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" input: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"filePath",props:{style:{color:"var(--shiki-color-text)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" top: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"offsetTop ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" left: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"height ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // An example to find batch of files in the folder",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"files ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"fs",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"readdirSync",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'./'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" const ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"images ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"= ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"files",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"filter",props:{style:{color:"var(--shiki-token-function)"}}},{content:"((",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"file",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=> ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"file",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"includes",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'screenshot'",props:{style:{color:"var(--shiki-token-string)"}}},{content:"));",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Merge images into one",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"sharp",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" create:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" width: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"VIEWPORT_WIDTH ",props:{style:{color:"var(--shiki-token-operator)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" height: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"pageHeight ",props:{style:{color:"var(--shiki-color-text)"}}},{content:"* ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"DEVICE_SCALE_FACTOR",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" channels: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"4",props:{style:{color:"var(--shiki-token-constant)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" background:",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" { ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"r: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"255",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"g: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"255",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"b: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"255",props:{style:{color:"var(--shiki-token-constant)"}}},{content:", ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"alpha: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"0",props:{style:{color:"var(--shiki-token-constant)"}}},{content:" },",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" },",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" })",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" .",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"composite",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"chunkCompositeOptions",props:{style:{color:"var(--shiki-color-text)"}}},{content:")",props:{style:{color:"var(--shiki-token-embed)"}}}]},{to
1kens:[{content:" .",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"toFile",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"'./merged.png'",props:{style:{color:"var(--shiki-token-string)"}}},{content:");",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" // Delete all the screenshots",props:{style:{color:"var(--shiki-token-comment)"}}}]},{tokens:[{content:" images",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"forEach",props:{style:{color:"var(--shiki-token-function)"}}},{content:"((",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"image",props:{style:{color:"var(--shiki-color-text)"}}},{content:") ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"=> ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"fs",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"unlinkSync",props:{style:{color:"var(--shiki-token-function)"}}},{content:"(",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"image",props:{style:{color:"var(--shiki-color-text)"}}},{content:"));",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" } ",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"else",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:" {",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"page",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"({",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" path: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"'./screenshot.png'",props:{style:{color:"var(--shiki-token-string)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" fullPage: ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"true",props:{style:{color:"var(--shiki-token-operator)"}}},{content:",",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" });",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" }",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:" await ",props:{style:{color:"var(--shiki-token-keyword)"}}},{content:"browser",props:{style:{color:"var(--shiki-color-text)"}}},{content:".",props:{style:{color:"var(--shiki-token-embed)"}}},{content:"close",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"};",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"",props:{style:{color:"var(--shiki-token-embed)"}}}]},{tokens:[{content:"screenshot",props:{style:{color:"var(--shiki-token-function)"}}},{content:"();",props:{style:{color:"var(--shiki-token-embed)"}}}]}],lang:"js"},annotations:[]}]}),"\n",n.createElement(t.p,null,"That's about it! Save and use this trick to automatically create beautiful high-quality screenshots of any web page you like."))}var k=function(o){void 0===o&&(o={});const{wrapper:t}=Object.assign({},(0,r.RP)(),o.components);return t?n.createElement(t,o,n.createElement(l,o)):l(o)};function p(o,t){throw new Error("Expected "+(t?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}var a=e(2532),h=e(1021),y=e(545),v=e(9072),d=e(3669),m=e(9063),b=e(352),w=e(84);const A=o=>{let{data:{mdx:{author:t,frontmatter:e,fields:{slug:r}},allMdx:{nodes:s}},location:c,pageContext:{videoCovers:i},children:l}=o;return n.createElement(m.A,{headerTheme:"black",headerShowThemeButton:!0},n.createElement("article",{className:"safe-paddings pt-32 sm:pt-24"},n.createElement("div",{className:"container"},n.createElement("div",{className:"relative mx-auto max-w-[696px] xl:mx-0 xl:flex xl:max-w-none xl:justify-center xl:space-x-20 lg:space-x-8 md:block md:space-x-0"},n.createElement("div",{className:"xl:max-w-[696px] lg:max-w-[626px] md:max-w-none"},n.createElement(y.A,Object.assign({},e,{slug:r})),n.createElement(h.A,{content:l,videoCovers:i})),n.createElement(v.A,{author:t,readMorePosts:s,socialShareUrl:c.href})))),n.createElement(d.A,{withTopMargin:!0}))};function g(o){return n.createElement(A,o,n.createElement(k,o))}const u=o=>{let{data:{mdx:{frontmatter:{title:t,summary:e,ogImage:r}}}}=o;const s=(0,a.d)(r);return n.createElement(b.A,w.A.blogPost({title:t,description:e,ogImage:s}))}}}]); 2//# sourceMappingURL=component---src-templates-blog-post-jsx-content-file-path-content-posts-2022-05-09-taking-automated-web-page-screenshots-with-puppeteer-and-sharp-index-md-c924e8a07e27d2e361b5.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.