如何正确跨文件传输 DOM 元素？

Question

我有一个函数，它接受标签名称和文本作为输入，并返回由包含给定文本的给定标签组成的所有元素作为输出（我得到一个包含所有具有匹配文本的元素的数组）。

我将在多个函数中使用此函数，因此我想我可以将其保存在另一个文件中，并将该函数导入我可能需要的所有其他文件中，但我无法传输该元素。我正在使用 puppeteer 打开浏览器并获取所需的文件。

我要导入的代码：

commonFunctions.js:
module.exports = {
    matchTagAndTextContents: async function matchTagAndTextContents(page, selector, text) {
        const ele = await page.evaluate((selector,text) => {
            function matchTagAndText(sel, txt) {
                var elements = document.querySelectorAll(selector);
                return Array.prototype.filter.call(elements, function(element){
                    return RegExp(text).test(element.textContent);
                });
            }
            const matchedElements = matchTagAndText(selector,text);
            return matchedElements;
        },selector,text);
        return ele;
    }
}

我尝试使用导入函数的另一个文件：

foo.js:
const commonFunctions = require('./commonFunctions');
const puppeteer = require('puppeteer');

let browser = null;
browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});

(async () => {
    let page = await browser.newPage();
    await page.goto("https://www.google.com");
    let elem = null; 
    await commonFunctions.matchTagAndTextContents(page,'h1','Google').then( res => {
        elem = res;
    });
    await page.evaluate((elem) => {
        elem.forEach( el => {
            el.click();
        })
    },elem);
})();

在 foo.js 中，我不断得到 el.click() 不是一个函数，但是如果我在 commonFunctions.js 中实现 forEach，例如：

matchedElements.forEach( el => {
    el.click();
});

它起作用并且元素被点击。我做错了什么？

Answer 1

这是因为 elem 在您的执行中为空，并且在评估范围内将其分配给 elem。

尝试改变

    let elem = null; 
await commonFunctions.matchTagAndTextContents(page,'h1','Google').then( res => {
    elem = res;
});
await page.evaluate((elem) => {
    elem.forEach( el => {
        el.click();
    })
},elem);

何去何从

var elem = null; 
elem = await commonFunctions.matchTagAndTextContents(page,'h1','Google');
await page.evaluate((elem) => {
    elem.forEach( el => {
        el.click();
    })
},elem);