Question

我试图在我用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解决方案。

Answer 1

我终于从How to scrape that web page with Node.js and puppeteer 得到了提示这有助于我了解Puppeteer page.evaluate函数可让您直接访问刚在Puppeteer中启动的页面的DOM。要使以下代码正常工作，您应该知道我正在Jest中运行此测试。另外，您需要一个合适的URL，该URL指向一个带有ID为table元素的页面。显然，您可以更改页面和要尝试的jQuery函数的详细信息。我当时在jQuery Datatables项目的中间，因此我需要确保我有一个table元素并且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令我发疯，因为它的行为有点像浏览器，但是在我用来测试应用程序的关键点上却有所不同。

如何在puppeteer上使用jQuery页面？

1 个答案: