Pull the wires of Chrome with Puppeteer


Pull the wires of Chrome with Puppeteer

(Updated: )
Puppeteer
, , ,

Everybody knows that , Chrome is market leader and its developer tools are better than other browsers’.It is useful for software developers and software testers.Honestly ; I’m using Mozilla Firefox more than 10 years ,but Chrome is heading straight for the top every day.

Last year , Chrome Team announced headless mode. Headless mode allows to us , running Chrome without GUI.Before that , everybody was using PhantomJs for headless test automation.Now we have got the powerful alternative to test and create automations , Puppeteer is an official tool for Chrome Headless by Google Chrome team.With Puppeteer you can use many features of Chrome Dev Tools with Chrome Headless.If it is not tl;dr for you , you can learn more on puppeteer’s GitHub page. Now , let’s get install puppeteer on our machine.

What we need :

Node 8+
Cup of Coffeé

Yes we just need node, cus puppeteer includes its own -latest- chromium.Create a directory where you want to work.All steps are working on Mac and Windows10(use powershell).(I didn’t try on Linux :) )

1
2
$ mkdir puppeteerworkspace
$ cd puppeteerworkspace

Then install Puppeteer with npm.

1
npm i --save puppeteer

It’s time to roll up our sleeves.Let’s try to take screenshot of my page.As a default , puppeteer taking screenshot of the whole page.If we write “fullPage:false” in our script ,it will get just visible part of page.

1
2
3
4
5
6
7
8
9
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://volkanozdamar.com');
  await page.screenshot({path: 'mainpage.png',fullPage:false});
  await browser.close();
})();

However, how we decide our screen size?Using setViewPort() function we can change our screen size.Additionally, we export the page as pdf.

1
2
3
4
5
6
7
8
9
10
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({width:1920,height:1080});
  await page.goto('http://volkanozdamar.com');
  await page.pdf({path: 'homepage.pdf', format: 'A4'});
  await browser.close();
})();

Mobile Screen Sizes

What if we want to emulate mobile page?How we will memorize all screen sizes for all devices?Don’t worry, puppeteer has predefined device sizes inside.You can find those devices in “DeviceDescriptors.js”.Also you can create your own devices.Below code ; sample for iphone6.

1
2
3
4
5
6
7
8
9
10
11
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com');
  await page.screenshot({path: 'mainpage.png',fullPage:false});
  await browser.close();
});

Beside all these, if you don’t want to as a headless , just write these lines,

const browser = await puppeteer.launch({headless: false}); // default is true

Interacting with WebElements

To interact with a web element, Puppeteer using queryselector.I create a script making a Google Search.

1
2
3
4
5
6
7
8
9
10
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await page.type('#lst-ib','Puppeteer');
  await page.click('input[name="btnK"]');
  await browser.close();
})();

These are short notes and my first look for Puppeteer -also first English post on my blog 🍺 — .I will write another post about puppeteer in the following times.Until that time EOF.(End of FUN!)