如何使用 puppeteer 单击 HTML 选项卡 item/filter？

Question

我正在为一个网站创建一个 web-scraping 应用程序，该应用程序使用 header 选项卡来过滤 table 中显示的信息。在从 table 中提取数据之前，我需要 select 一个特定的过滤器，但是我没有任何运气点击选项卡项目，而我能够点击一个按钮。

我在此应用程序中使用了 puppeteer 和 cheerio，并且我已成功导航到相关页面并在提取数据之前单击了一个按钮，但选项卡 header 似乎没有以同样的方式做出反应，尽管它也需要人类用户点击才能 select 它。

这是我的代码片段：

const page = await browser.newPage();
await page.goto('https://na.op.gg/summoner/champions/userName=' + 'TheJackal666');

const html = await page.content();
const $ = cheerio.load(html);

//This is the troublesome line
await page.click('#SummonerLayoutContent > div.tabItem.Content.SummonerLayoutContent.summonerLayout-champions > div > div > div.Content.tabItems > div.tabItem.season-13 > div > div.stats-filter > div > div:nth-child(2)');
//The scraping function follows

我希望在执行剩余的抓取功能时，得到与 "Ranked Solo" 选项卡 header 处于活动状态时显示的信息一致的结果。相反，它目前无法激活 select 或者，并且会抓取默认 "Total" 选项卡 header 处于活动状态时显示的数据。

非常感谢你们提出的所有建议 <3!

Answer 1

it currently fails to activate that selector

目标网站似乎很重，所以给它一些时间来加载和执行脚本：

await page.goto('https://na.op.gg/summoner/champions/userName=TheJackal666', { waitUntil : "domcontentloaded" });

const selector = "#SummonerLayoutContent > div.tabItem.Content.SummonerLayoutContent.summonerLayout-champions > div > div > div.Content.tabItems > div.tabItem.season-13 > div > div.stats-filter > div > div:nth-child(2)";

// Wait fo the tab selector to be present
await page.waitFor(selector);

await page.click(selector);

另外，您将用户名当作变量而不是字符串来使用：

await page.goto('https://na.op.gg/summoner/champions/userName=' + TheJackal666);

如果之前的任何地方都没有定义它会导致错误。

最后，在开发此类脚本时首先考虑使用 headful 模式（使用可见的 Chromium 浏览器）：

const browser = await puppeteer.launch({ headless: false});

这将使您首先更好地了解抓取过程中发生的事情。

如何使用 puppeteer 单击 HTML 选项卡 item/filter？

How do I click on an HTML tab item/filter using puppeteer?

javascript

web-scraping

headless-browser

puppeteer