我遇到了一个问题,我遇到了一个相当简单的 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 机器和 Node 版本 9,Puppeteer 版本 1.0.0 上使用命令行。
你可以在屏幕之前这样做
await page.evaluate(() => {
let dom = document.querySelector('#id');
dom.innerHTML = "change to something"
});
除了上面的出色答案之外,重要的是要注意,您无法像通常在评估函数中期望的那样访问变量。 换句话说,这是行不通的:
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]);
page.$eval((
在截屏之前,您可以使用page.$eval()
更改元素的innerText
:
await page.$eval('#example', element => element.innerText = 'Hello, world!');
await page.screenshot({
path: 'google.png',
});