In this article, I am going to talk about how to take a screenshot with Puppeteer.
Pre-requisites
To use Puppeteer to take screenshots of web pages, you have to follow these steps:
First, you need to install nodejs and npm.
Before getting any further, please check the official documentation to check your version compatibility.
How to take a screenshot with Puppeteer?
- Create a browser instance and a new page.
- Adjust the viewport height to take a screenshot of the page.
- Declare a variable for the website URL we want to take a screenshot.
- To navigate our URL, use the
goto()
method from the page instance. - To capture a screenshot, call the screenshot method from the page instance by mentioning the output path.
- As the screenshot is captured, as a final step, close the browser instance.
The source code for capturing a screenshot:
const puppeteer = require('puppeteer');
(async () => {
// Creating a browser instance
const browser = await puppeteer.launch();
// Creating a new page
const page = await browser.newPage();
// Adjusting width and height of the viewport
await page.setViewport({ width: 1200, height: 600 });
const url = 'https://dev.to/makepad/use-emojis-in-your-commit-messages-1lag';
// Open URL in current page
await page.goto(url);
// Capture screenshot
await page.screenshot({
path: 'demo.png',
});
// Close the browser instance
await browser.close();
})();
You can execute the code by running node index.js
in your command line and your output will be similar to this:
This is fine if you want to take a screenshot of the websites with nothing to scroll because the code takes a screenshot of the page as it is displayed.
How can we modify our code to take a full-page screenshot?
To capture a full page, we need to add a fullPage:true
option for page.screenshot()
await page.screenshot({
path: 'demo.png',
fullPage: true
});
After updating our code, the output should be similar to the following:
How to take a screenshot of a particular HTML element?
Right-click any part of the page and choose Inspect. Clicking a specific page element will open that element in the inspector view. After finding the HTML element, you want to take a screenshot of, right-click the highlighted HTML code and click Copy > Copy Selector.
In this example this is the selector that I copied: #main-title > div.crayons-article__header__meta
Let's modify our code !
First, we need to declare a variable for the selector. Then, we will ask the page to wait for our selector. Lastly, as we want to take a screenshot of the element, we need to change await page.screenshot
to await html_element.screenshot
.
The source code for capturing a screenshot of an HTML element:
const puppeteer = require('puppeteer');
// Declaring a variable for the selector that we copied
const selector = `#main-title > div.crayons-article__header__meta`;
(async () => {
// Creating a browser instance
const browser = await puppeteer.launch();
// Creating a new page
const page = await browser.newPage();
// Adjusting width and height of the viewport
await page.setViewport({ width: 1200, height: 600 });
const url = 'https://dev.to/makepad/use-emojis-in-your-commit-messages-1lag';
// Open URL in current page
await page.goto(url);
await page.waitForSelector(selector);
//We will ask the page to wait our selector
const html_element = await page.$(selector);
// Capture screenshot
await html_element.screenshot({
path: 'demo.png',
});
// Close the browser instance
await browser.close();
})();
After updating our code, the output should be similar to to the following:
Conclusion
I explained few Puppeteer screenshot examples, and I hope I helped you solve your screenshot problems with Puppeteer.
Top comments (0)