javascript - puppeteer 评估不接受 JSHandles 或 ElementHandles 作为变量的函数

Question

我可以很好地传递 native 对象(字符串、列表、数字等)，但每当我尝试传递 JSHandle 或 ElementHandle 时，我都会收到此错误消息:“TypeError:将循环结构转换为 JSON Are您在 JSON.stringify () 处传递嵌套的 JSHandle？"

这是我的代码:

    async getColumnsNames(id='dashboardGrid') {
    await this.loadObjects();
    const grid = this.table
    const detectedColumns = await this.page.evaluate(({grid}) => {
        //const grid = document.getElementById(id)
        const header = grid.getElementsByClassName('ag-header-viewport')[0]
        const labelRow = header.getElementsByClassName('ag-header-row')[0]
        const cells = labelRow.getElementsByClassName('ag-header-cell-text')
        var children = []
        for(x = 0; x < cells.length; x++) {
             cells[x].innerText.length > 0 ? children.push(cells[x].innerText) : null
        }
        return children
    }, {grid});
    console.log(detectedColumns)
}

因此，如果我传递“id”以获取“grid”元素内部的内容，没有问题(它是一个 CSS 选择器)，但如果我尝试直接传递句柄(网格)，则会收到该错误消息。

所说的句柄正是这样的:

this.table = await this.page.$(this.tableID);

这在其他地方完全可以用于检测相应的 DOM 元素(this.tableID 是'[id="dashboardGrid"]')，所以我知道句柄不是问题。

Answer 1

问题是，当您构建像这样的第一个参数 {grid} 时，生成的对象不是 JSHandle 的实例，因此评估不会处理正确的是。

这应该有效

const detectedColumns = await this.page.evaluate(grid => {
//Some code
}, grid);