Run your first Puppeteer with recorder

  1. 1. Install puppeteer
  2. 2. Write some basic script
  3. 3. Write your own interaction with Puppeteer Recorder
  4. Reference

This blog wanna give you some introduction on how to write and run your first puppeteer script.

I love puppeteer over selenium cause it could use js to interact with browser in almost all ways. It’s super easy to write some scripts to free you from repetive browser work (click, save, blabla…). I learnt this merely cause I don’t want to waste too much of my time on ops work. I believe you guys have the thought with me :)

1. Install puppeteer

In your command line tool, run

npm i puppeteer 

It will show you if you have succeeded install puppeteer there.

2. Write some basic script

Let’s write some basic code to interact with one page:

> vim firstPuppeteer.js

// in the js file, input 

// Require the node module, our pre installed puppeteer 
const puppeteer = require('puppeteer');

(async () => {

  // launch a browser 
  const browser = await puppeteer.launch();

  // launch a page 
  const page = await browser.newPage();

  // Go to some link you wanna go
  await page.goto('');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio

  console.log('Dimensions:', dimensions);

  await browser.close();

Well, this start script could get the dimension of the page you want. To execute it, run command node firstPuppeteer.js

The output would be : Dimensions: { width: 800, height: 600, deviceScaleFactor: 1 }

3. Write your own interaction with Puppeteer Recorder

Here, I wanna introduce you a chrome extension named: Puppeteer Recorder. Basically, you could start your interaction with browser and this extension can record all your behavior.

  • It uses ES6 syntax to await for your selected component to be available
  • With recorder, it comes to be super easy to write puppeteer scripts, no more need to inspect all elements in browser and tracing down one by one!

Still using my blog as an example, I start record when I’m at the home page, and look around, click on the puppeteer turorial link and then try to leave some comments there, the auto generated script are shown below:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  let frames = await page.frames()
  const frame_35 = frames.find(f => f.url() === '')
  const navigationPromise = page.waitForNavigation()

  await page.goto('')

  await page.setViewport({ width: 1080, height: 1809 })

  await page.waitForSelector('.row > .col-lg-8 > .post-preview:nth-child(17) > a > .post-title')
  await'.row > .col-lg-8 > .post-preview:nth-child(17) > a > .post-title')

  await navigationPromise

  await frame_35.waitForSelector('.postbox > .textarea-outer-wrapper > .textarea-wrapper > div > .placeholder')
  await'.postbox > .textarea-outer-wrapper > .textarea-wrapper > div > .placeholder')

  await frame_35.waitForSelector('div #view27_display_name')
  await'div #view27_display_name')

  await browser.close()

As you see, it auto generates the code we need, usually we could some modifications and put it on our existing scripts.




文章标题:Run your first Puppeteer with recorder


本文作者:Leilei Chen

发布时间:2020-01-31, 15:16:31

最后更新:2020-02-02, 14:06:57


版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。