Pull the wires of Chrome with 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 🙂 )

Then install Puppeteer with npm.

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.

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

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.

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

Interacting with WebElements

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


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!)

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *