使用click()时选择第二个jQuery匹配

Question

我正在尝试web抓取，但我遇到了这个小问题。我想要抓取的网站有两个按钮，都有相同的类。使用Puppeteer，我想单击第二个按钮。问题是，当我必须在jQuery函数中执行字符串单击时，我不知道如何选择第二个元素。

page.click('.ws-collapsable-block__heading')

上面的代码行对于单击第一个按钮非常有效，但正如我所说的，我正在尝试单击第二个按钮。我试过了：

page.click('.ws-collapsable-block__heading:eq(1)')
page.click('.ws-collapsable-block__heading').eq(1)
page.click('.ws-collapsable-block__heading'.eq(1))
page.click('.ws-collapsable-block__heading'[1])
page.click('.ws-collapsable-block__heading')[1]

不过，它们都不起作用。

我的第二个解决方案是使用传统的jQuery DOM搜索，如下所示：

document.querySelector('.ws-collapsable-block__heading')

但是我不能访问页面评估之外的“文档”，也不能访问评估内部的页面。

下面是完整的脚本：

const puppeteer = require('puppeteer')

async function get_info(code) {

    let url = 'https://joker.no/sok?query=' + code

    let browser = await puppeteer.launch()
    let page = await browser.newPage()

    await page.goto(url, { waitUntil: 'networkidle2' })

    let get_link = await page.evaluate(() => document.querySelector('.ws-product__title').getAttribute('href') )
    let product_name = await page.evaluate(() => document.querySelector('.ws-product__title').innerText );

    await page.goto('https://joker.no' + get_link)

    // This clicks the first button...
    page.click('.ws-collapsable-block__heading')

    await page.screenshot({path: 'x.png'})    
}

get_info('7311041013663')

编辑:我试着像这样使用第n个

page.click('.ws-collapsable-block__heading:nth-child(2)')

但是它给出了这个错误

(node:5856) UnhandledPromiseRejectionWarning: Error: No node found for selector: .ws-collapsable-block__heading:nth-child(2)
    at assert (E:\Node\KaloriApp\node_modules\puppeteer\lib\helper.js:283:11)
    at DOMWorld.click (E:\Node\KaloriApp\node_modules\puppeteer\lib\DOMWorld.js:366:5)
    at process._tickCallback (internal/process/next_tick.js:68:7)
  -- ASYNC --
    at Frame.<anonymous> (E:\Node\KaloriApp\node_modules\puppeteer\lib\helper.js:111:15)
    at Page.click (E:\Node\KaloriApp\node_modules\puppeteer\lib\Page.js:1067:29)
    at get_info (E:\Node\KaloriApp\app.js:17:10)
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:5856) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:5856) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

如果我在网站上尝试document.querySelectorAll('.ws-collapsable-block__heading:nth-child(1)')，我得到了一个大小为3的点击。不过，我仍然必须执行document.querySelectorAll('.ws-collapsable-block__heading:nth-child(1)')1来获取第二个元素，而这似乎不能在nodeList函数中完成。

Answer 1

您可以使用page.$$方法轻松地获取所有产品，然后单击其中一个。别忘了添加await。

例如：

const [ firstProduct, secondProduct, thirdProduct ] = await page.$$('.ws-panel');

await secondProduct.click(); // click the second button

Answer 2

使用第n个子选择器

page.click('.ws-collapsable-block__heading:nth-child(2)')