是否可以在创建屏幕截图之前使用 Puppeteer 修改 DOM 中的元素？

Question

我运行遇到了一个问题，我创建了一个相当简单的 Node 进程来捕获屏幕截图。是否可以在获取屏幕截图之前使用 Puppeteer 更改 HTML 元素的 innerText？

我已经成功地使用 Puppeteer 在身份验证字段中键入文本并登录到站点，但我想知道是否有类似的方法可以让我更改特定元素中的文本（使用 id 或class姓名）。

我正在使用的屏幕捕获代码示例：

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()
 })()

在这个例子中，我想知道我是否可以更改元素的文本内容，例如 ID 为 'lga' 的 div ... 添加文本字符串.

Puppeteer 可以吗？

否则，效果很好。我只需要在我正在执行屏幕截图的页面中插入一些文本。我仅在 Ubuntu 16.04 机器和 Node 版本 9，Puppeteer 版本 1.0.0.

上使用命令行

Answer 1

你可以在屏幕前这样做

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

Answer 2

page.$eval()

您可以在截图前使用元素的page.$eval() to change the innerText：

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

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

Answer 3

除了上面的出色答案之外，重要的是要注意您不能像通常在求值函数中期望的那样访问变量。换句话说，这行不通：

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

您可以通过将变量传递给求值函数来解决这个问题。例如：

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

在上面的例子中我使用了s作为参数，但是传入了存储在selector中的值。那些可以是相同的变量名，但我想说明的是，外部变量不是直接使用的。

如果需要传入多个值，使用数组：

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

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

是否可以在创建屏幕截图之前使用 Puppeteer 修改 DOM 中的元素？

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

javascript

linux

ubuntu

node.js

puppeteer

page.$eval()