Is it possible to modify an element in the DOM with Puppeteer before creating a screenshot?

Question

I ran into an issue where I nave a fairly simple Node process that captures a screenshot. Is it possible to change the innerText of an HTML element using Puppeteer, just before the screen capture is acquired?

I have had success with using Puppeteer to type text in authentication fields and with logging into a site, but I was wondering if there is a similar method that would let me change the text in a specific element (using id or class name).

Example of the screen capture code I'm using:

const puppeteer = require('puppeteer');
 (async () => {
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.goto('https://google.com')
    await page.screenshot({path: 'google.png'})
    await browser.close()
 })()

In this example, I would be interested in knowing if I can change the text content of an element such as the div with the ID 'lga' ... adding a text string for example.

Is that possible with Puppeteer?

Otherwise, it works great. I just need to insert some text into the page I'm performing a screenshot of. I'm using the command-line only on a Ubuntu 16.04 machine, and Node version 9, Puppeteer version 1.0.0.

Solution 1

you can do that before screen

 await page.evaluate(() => {
    let dom = document.querySelector('#id');
    dom.innerHTML = "change to something"
 });

Solution 2

page.$eval()

You can use page.$eval() to change the innerText of an element before taking a screenshot:

await page.$eval('#example', element => element.innerText = 'Hello, world!');

await page.screenshot({
  path: 'google.png',
});

Solution 3

In addition to the excellent answer above, it is important to note that you can't access variables as you normally would expect in the evaluate function. In other words, this won't work:

 const selector = '#id'
 await page.evaluate(() => {
    let dom = document.querySelector(selector)
    dom.innerHTML = "change to something"
 });

You can solve this problem by passing variables to the evaluate function. For example:

 const selector = '#id'
 await page.evaluate((s) => {
    let dom = document.querySelector(s)
    dom.innerHTML = "change to something"
 }, selector);

In the above example I used s as the parameter, but passed in the value stored in selector. Those could be the same variable name, but I wanted to illustrate that the outer variable is not directly used.

If you need to pass in multiple values, use an array:

 const selector = '#id'
 const newInnerHTML = "change to something"

 await page.evaluate(([selector, newInnerHTML]) => {
    let dom = document.querySelector(selector)
    dom.innerHTML = newInnerHTML
 }, [selector, newInnerHTML]);