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

Question

我是新的木偶操作者,但对javascript和Node.js相当满意,但遇到了一个问题,我发现了一个相当简单的Node进程来捕获截图.在获取屏幕截图之前,是否可以使用puppeteer更改HTML元素的innerText？

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

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

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 ...例如添加文本字符串.

木偶戏有可能吗？

否则,它工作得很好,我只需要在页面中插入一些文本我正在执行截图.我只在ubuntu 16.04机器上使用命令行,而节点版本9,puppeteer版本1.0.0

Answer 1

你可以在屏幕前做到这一点

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

Answer 2

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

 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]);