loading...

πŸ“· More on Screenshots with JavaScript in Node.js (emulating devices)

benjaminmock profile image Benjamin Mock ・1 min read

Super useful puppeteer snippets πŸ’­πŸ’­πŸ’­ (8 Part Series)

1) πŸ“· How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) πŸ“· More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) πŸ“· More on Screenshots with JavaScript in Node.js (creating PDFs) 4) πŸ—„οΈ The easiest way to scrape a website with Javascript (in Node.js) 5) πŸͺ Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) πŸ‘Ÿ Executing JavaScript in the page context of puppeteer 8) πŸš€ Performance measuring of a webpage with JavaScript in Node.js using puppeteer

In my last post I showed how to create a screenshot with puppeteer. In the example, I set the height and width of the viewport myself. But there's another option: you can emulate devices with puppeteer. So you can create screenshots as if they were taken on a device. Setting the device not only sets the correct viewport, but also uses the userAgent of this device. So you'll fetch a webpage as if you were on that device.

const puppeteer = require('puppeteer');

// get the full list of available devices.
console.log(puppeteer.devices);

// ...

// let's emulate an iPhone 6
await page.emulate(puppeteer.devices['iPhone 6']);

// there are also devices in landscape mode
await page.emulate(puppeteer.devices['Pixel 2 landscape']);

Here's the complete code with device emulation

// npm i puppeteer
const puppeteer = require('puppeteer');

// we're using async/await - so we need an async function, that we can run
const run = async () => {
  // open the browser and prepare a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // it's better to emulate before going to the page, because otherwise a resize would happen
  await page.emulate(puppeteer.devices['iPhone 6']);

  await page.goto('https://codesnacks.net/');
  await page.screenshot({
    path: 'codesnacks.png',
    fullPage: true,
  });

  // close the browser
  await browser.close();
};

// run the async function
run();

Super useful puppeteer snippets πŸ’­πŸ’­πŸ’­ (8 Part Series)

1) πŸ“· How to take a screenshot of a webpage with JavaScript in Node.js (using puppeteer) 2) πŸ“· More on Screenshots with JavaScript in Node.js (emulating devices) 3 ... 6 3) πŸ“· More on Screenshots with JavaScript in Node.js (creating PDFs) 4) πŸ—„οΈ The easiest way to scrape a website with Javascript (in Node.js) 5) πŸͺ Screenshot or scrape webpages behind a login with JavaScript (in Node.js) 6) 🧭 Programmatically taking Screenshots while navigating & searching on webpages using JavaScript (puppeteer) 7) πŸ‘Ÿ Executing JavaScript in the page context of puppeteer 8) πŸš€ Performance measuring of a webpage with JavaScript in Node.js using puppeteer

Posted on by:

benjaminmock profile

Benjamin Mock

@benjaminmock

I'm Ben, a Frontend Developer from Germany working at ebay

Discussion

markdown guide