How to use createPropertyFromJSON method in Puppeteer

You can use the pdf-parse node module, like this:

const fs = require('fs');
const pdf = require('pdf-parse');

let dataBuffer = fs.readFileSync('path to PDF file...');

pdf(dataBuffer).then(function(data) {

    // number of pages
    console.log(data.numpages);
});

Your code would become something like:

const pdf = require('pdf-parse');
try {
      const generatedPdfFilePath = `${directory}/feedback-${requestId}.pdf`;
      const htmlFilePath = `${directory}/report-${requestId}.html`;
      const htmlTemplate =
        fs.readFileSync(path.join(process.cwd(), '/data/feedback-template.hbs'), 'utf-8');
      const template = handlebars.compile(htmlTemplate);
      const htmlFile = minify(template(data), {
        collapseWhitespace: true,
      });
      fs.writeFileSync(htmlFilePath , htmlFile);
      const options = {
        format: 'A4',
        printBackground: true,
        path: generatedPdfFilePath ,
      };
      const browser = await puppeteer.launch({
        args: ['--no-sandbox'],
        headless: true,
      });
      const page = await browser.newPage();
      await page.goto(`file://${htmlFilePath}`, {
        waitUntil: 'networkidle0',
        timeout: 300000,
      });
      await page.pdf(options);
      // Do something here to find number of pages in this pdf
      let dataBuffer = fs.readFileSync(htmlFilePath);
      const pdfInfo = await pdf(dataBuffer);
      const numPages = pdfInfo.numpages;

      await browser.close();
      resolve({ file: generatedPdfFilePath });
    } catch (error) {
      console.log(error);
      reject(error);
    }

There isn't really a "proper" way to do it.

What I've done is made a somewhat clean way you should be able to use. It essentially involves creating your own game controller management code to use in puppeteer, and injecting the controller state into a page using the puppeteer evaluate API call.

Essentially we hijack the global scope navigator.getGamepads function and inject our own implementation.

We start out by modelling a game controller in code. The most basic part of a controller is a button. So lets do that.

class Button {
  constructor() {
    this.value = 0.0
    this.pressed = false
  }
  press() {
    this.value = 1.0
    this.pressed = true
  }
  unpress() {
    this.value = 0.0
    this.pressed = false
  }
  toObject() {
    return {
      value: this.value,
      pressed: this.pressed,
    }
  }
}

Next, according to the W3C Gamepad Specification a gamepad has two analog sticks, so we'll model those.

class AnalogStick {
  constructor() {
    this.button = new Button()
    this.xAxis = 0.0
    this.yAxis = 0.0
  }

  setXAxis(value) {
    this.xAxis = value
  }

  setYAxis(value) {
    this.yAxis = value
  }
}

Finally, let's create a class to represent a game pad. This class will have a helper function that translates the controllers internal state to match the W3C Gamepad Interface signature.

class GamePad {
  constructor(index = 0) {
    this.id = 'Standard Gamepad'
    this.displayId = null // this is used for VR
    this.connected = true
    this.index = index
    this.mapping = 'standard'

    this.dPad = {
      up: new Button(),
      right: new Button(),
      down: new Button(),
      left: new Button(),
    }

    this.select = new Button()
    this.home = new Button()
    this.start = new Button()

    this.actions = {
      top: new Button(),
      right: new Button(),
      bottom: new Button(),
      left: new Button(),
    }

    this.leftStick = new AnalogStick()
    this.rightStick = new AnalogStick()

    this.lButton = new Button()
    this.lTrigger = new Button()

    this.rButton = new Button()
    this.rTrigger = new Button()
  }

  getState() {
    return {
      axes: [
        this.leftStick.xAxis,
        this.leftStick.yAxis,
        this.rightStick.xAxis,
        this.rightStick.yAxis,
      ],
      buttons: [
        this.actions.bottom.toObject(),
        this.actions.right.toObject(),
        this.actions.left.toObject(),
        this.actions.top.toObject(),

        this.lButton.toObject(),
        this.rButton.toObject(),

        this.lTrigger.toObject(),
        this.rTrigger.toObject(),

        this.select.toObject(),
        this.start.toObject(),

        this.leftStick.button.toObject(),
        this.rightStick.button.toObject(),

        this.dPad.up.toObject(),
        this.dPad.down.toObject(),
        this.dPad.left.toObject(),
        this.dPad.right.toObject(),

        this.home.toObject(),
      ],
      connected: this.connected,
      displayId: this.displayId,
      id: this.id,
      index: this.index,
      mapping: this.mapping,
    }
  }
}

Now we have a convenient way of representing a gamecontroller and its state in code, we can hijack navigator.getGamepads and replace it with our own function that returns the state of our virtual controllers.

Now we'll define a couple of helper functions. One that sets the gamepads state that navigator.getGamepads will return.

const setGamepadsState = async (page, gamepads) => {
  const result = await page.evaluate((controllers) => {
    navigator.getGamepads = () => controllers
  }, gamepads)
  return result
}

Now that we've done that, we need a way to trigger the gamepadconnected event. We can do that using the puppeteer page.emit function call.

const connectGamepad = async (page, gamepad) => {
  const connectedEvent = {
    gamepad,
  }
  page.emit('gamepadconnected', connectedEvent)
}

We now have all the building blocks to simulate a controller using puppeteer! Example usage is below:

;(async () => {
  const controller1 = new GamePad(0)
  const controller2 = new GamePad(1)
  const browser = await puppeteer.launch()
  const page = await browser.newPage()

  await page.goTo('https://www.yourgamepadpage.com')

  // Set the current gamepad state for both controllers in the puppeteer page.
  // We need to call this each time we change a controllers state
  await setGamepadsState(page, [controller1.getState(), controller2.getState()])

  // fires a 'gamepadconnected' event in the page for controller1
  await connectGamepad(page, controller1.getState())
  // fires a 'gamepadconnected' event in the page for controller2
  await connectGamepad(page, controller2.getState())

  // toggles the state of the bottom action button to pressed on controller1, 'X' on a playstation pad or 'A' on an xbox pad
  controller1.actions.bottom.press()
  await setGamepadsState(page, [controller1.getState(), controller2.getState()]) // passes controller1's current state into puppeteer's 'page.evaluate'

  // do a check here in your puppeteer based test!
  console.log('this should be whatever test code you need!')

  controller1.actions.bottom.unpress() // untoggles the state of the bottom action button on controller1

  // now lets simulate an analog stick axis shift, e.g. left analog stick on the horizontal axis all the way to the left.
  controller1.leftStick.setXAxis(-1.0)
  await setGamepadsState(page, [controller1.getState(), controller2.getState()]) // and now we pass it to the page context!

  await browser.close()
})()

Hopefully this should point you in the right direction. If you have any questions feel free to follow up here :)

Add the following line

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');

to send a header indicating you're using a desktop based browser.

Also don't forget to await the page.setViewport statement and It should work.

Here's a sample snippet to get you started:

const puppeteer = require('puppeteer')

const PAGE_URL = 'https://www.105.net/'; 

(async function () {
    const browser = await puppeteer.launch({
        headless: true,
        executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
        args: ['--disable-gpu','--disable-extensions']});        

    const device_width = 1920;
    const device_height = 1080;

    const page = await browser.newPage();

    await page.setCacheEnabled(false);
    await page.setViewport({width: device_width, height: device_height})
    await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');

    await page.goto(PAGE_URL, {
        timeout: 60000
    })

    await page.screenshot({
        path: './screenshot.jpg'
    })

    await page.close()
    await browser.close()

})()

You can use Puppeteer to open the browser, resize it, and take a screenshot! Here is the code:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
      // Change this with the size you need
      defaultViewport: {width: 1920, height: 1080}
  });
  const page = await browser.newPage();
  await page.goto('https://stackoverflow.com/', {waitUntil: 'domcontentloaded'});
  // Wait until page has loaded completely
  // Make a screenshot
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
})();

I hope it helps!

Here is the Puppeteer repository for more info: https://github.com/puppeteer/puppeteer

You're close!

The description arrow function is passed to your page.$eval mock function so you can use mockFn.mock.calls to retrieve it.

Once you've retrieved it, you can call it directly to test it and get full code coverage:

test("Should return description", async () => {
  expect(await checkDescription(page)).toBe("Value");  // Success!
  expect(page.$eval).toHaveBeenCalled();  // Success!

  const description = page.$eval.mock.calls[0][1];  // <= get the description arrow function
  const getAttributeMock = jest.fn(() => 'mock content');
  expect(description({ getAttribute: getAttributeMock })).toBe('mock content');  // Success!
  expect(getAttributeMock).toHaveBeenCalledWith('content');  // Success!
  // Success!  checkDescription now has full code coverage
});

What I've found works for setting the browser size (but not the viewport size) is to set the following chrome command line switch when you're launching puppeteer:

await puppeteer.launch({
  headless: false,
  args: [
    '--window-size=X,Y'
  ]
});

All you have to do is substitute whatever resolution settings you want into the code instead of the X (width) and Y (height).

Update:
I've since located the following issue in which someone, rather helpfully, has provided their own resizeWindow() function which, apparently, does what you need. I've not tried it out so can't vouch for whether it works or not but it might be worth a try!

https://github.com/Codeception/CodeceptJS/issues/973

You can use the targetcreated event emitted by the browser.

One important thing for you to know is that, although a new target will be created, a PDF will be open by the PDF viewer (if available). You won't be able to evaluate, screenshot, or pdf that target.

const browser =  await puppeteer.launch({ headless: false});
const page = await browser.newPage();

browser.on('targetcreated', e => {
    console.log(e.url());
});

await page.goto("https://codepen.io/hardkoded/pen/gOYmVww");
const frameEl = await page.$("#result");
const frame = await frameEl.contentFrame();
await frame.click("a");

Here is a simplified example. The script opens https://time.is/ and logs the time to the console on each change of the site clock element. It uses page.exposeFunction() and MutationObserver.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

try {
  const [page] = await browser.pages();

  await page.goto('https://time.is/');
  await page.exposeFunction('updateTime', updateTime);

  await page.evaluate(() => {
    const clock = document.querySelector('#clock0_bg');

    const config = { subtree: true, childList: true, attributes: true, characterData: true };
    const callback = function () { window.updateTime(clock.innerText); };
    const observer = new MutationObserver(callback);
    observer.observe(clock, config);
  });
} catch (err) { console.error(err); }

function updateTime(time) {
  console.log(time);
}

This worked for me

Use Puppeteer v0.13.0. As of writing this comment, the latest version of Puppeteer is not compatible with chromium in Alpine linux.

PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true" will skip downloading the default version of Chromium when installing Puppeteer.

Dockerfile:

FROM node:11-alpine

ENV CHROME_BIN="/usr/bin/chromium-browser"\
    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"

RUN set -x \
  && apk update \
  && apk upgrade \
  # replacing default repositories with edge ones
  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" > /etc/apk/repositories \
  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories \
  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" >> /etc/apk/repositories \
  \
  # Add the packages
  && apk add --no-cache dumb-init curl make gcc g++ python linux-headers binutils-gold gnupg libstdc++ nss chromium \
  \
  && npm install puppeteer@0.13.0 \
  \
  # Do some cleanup
  && apk del --no-cache make gcc g++ python binutils-gold gnupg libstdc++ \
  && rm -rf /usr/include \
  && rm -rf /var/cache/apk/* /root/.node-gyp /usr/share/man /tmp/* \
  && echo

ENTRYPOINT ["/usr/bin/dumb-init"]

CMD node

NodeJs:

You need to tell Puppeteer to use the installed Chromium version using the following config - executablePath: '/usr/bin/chromium-browser'

const puppeteer = require('puppeteer');

puppeteer
  .launch({
    executablePath: '/usr/bin/chromium-browser',
    args: ['--no-sandbox', '--disable-dev-shm-usage'],
  })
  .then(async (browser) => {
    // your code
  });