如何在 puppeteer 上使用 jQuery 和页面？答案

【问题标题】：How do I use jQuery with pages on puppeteer?如何在 puppeteer 上使用 jQuery 和页面？
【发布时间】：2018-08-17 22:34:46
【问题描述】：

我正在尝试在使用 puppeteer 加载的页面上使用 jQuery，我想知道如何做同样的事情？我的代码结构是这样的：

const puppeteer = require('puppeteer');
let browser = null;
async function getSelectors() {
        try{
            browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
            const page = await browser.newPage();
            await page.setViewport({width: 1024, height: 1080});
            await page.goto('https://www.google.com/');
            await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.2.1.min.js'});
            var button = $('h1').text();
            console.log(button);
        } catch (e) {
            console.log(e);
        }
}
getSelectors();

此外，我将导航到 puppeteer 中的许多页面，所以有没有一种方法可以只添加一次 jQuery，然后在整个过程中使用它？本地 jquery 文件实现也会有所帮助。

我尝试实现来自inject jquery into puppeteer page 的答案，但无法让我的代码正常工作。我会做比上图更复杂的事情，所以我需要 jQuery 而不是 vanilla JS 解决方案。

【问题讨论】：

var button = $('h1').text(); 您在 node.js 的上下文中调用它，而不是 puppeteer 中的实例。尝试放入page.evaluate..
@Keith 谢谢，这似乎成功了，有什么办法可以添加 jQuery 的本地副本吗？另外，我怎样才能做到这一点，以便我可以在 puppeteer 中导航到的所有页面上使用 jQuery，而不是将脚本注入每个页面。
不，没有办法注入 jQuery 的“本地”副本，因为代码（在 Puppeteer 的情况下）是在浏览器的上下文中评估的。请参阅 github.com/cheeriojs/cheerio 了解 Node.js 替代方案。
@Keith 抱歉，刚刚意识到您在评论中基本上回答了这个问题。你让我想起了我的数学老师，他跳过了他认为我可以在不被告知的情况下弄清楚的关键行。 page.evaluate 的 Puppeteer 文档对我来说没有意义，您的快速评论不足以帮助我理解这一点。我希望你把它写在答案中。你肯定会得到我的支持。
@DavidHyogo。我经常在手机上回复，所以有时我的回复可能很短。希望我的 cmets 有助于将 OP 推向正确的方向。但如果需要澄清，如果 OP 要求，我通常会提供更多细节。

标签： javascript jquery node.js puppeteer

【解决方案1】：

我终于得到了来自How to scrape that web page with Node.js and puppeteer 的提示这帮助我理解了 Puppeteer page.evaluate 函数让您可以直接访问您刚刚在 Puppeteer 中启动的页面的 DOM。要使以下代码正常工作，您应该知道我正在 Jest 中运行此测试。此外，您需要一个合适的 URL 指向具有带有 ID 的表格元素的页面。显然，您可以更改页面和要试用的 jQuery 函数的详细信息。我在一个 jQuery Datatables 项目的中间，所以我需要确保我有一个表格元素并且 jQuery 可以找到它。这个环境的好处是浏览器只是一个真正的浏览器，所以如果我向实际的 HTML 页面添加一个脚本标签而不是通过 Puppeteer 添加它，它的工作原理是一样的。

test('Check jQuery datatables', async () => {
   const puppeteer = require('puppeteer');
   let browser = await puppeteer.launch();
   let page = await browser.newPage();
   await page.goto('http://localhost/jest/table.html');
   await page.addScriptTag({url: 'https://code.jquery.com/jquery-3.3.1.slim.min.js'});
   const result = await page.evaluate(() => {
       try {
           var table = $("table").attr("id");
           return table;
       } catch (e) {
           return e.message;
       }
   });
   await console.log("result", result);
   await browser.close();
});

我的关键发现：在 page.evaluate 函数中，您的 JavaScript 代码在您刚刚在浏览器中打开的页面的熟悉上下文中运行。我继续为使用 jQuery 插件创建的复杂对象创建测试，并且在 page.evaluate 中它们的行为符合预期。尝试使用 JSDOM 让我发疯，因为它的行为有点像浏览器，但在我用来测试应用程序的关键点方面却有所不同。

【讨论】：