如何使用 puppeteer 单击 HTML 选项卡项/过滤器？

Question

我正在为一个网站创建一个网络抓取应用程序，该应用程序使用选项卡标题来过滤表格中显示的信息。在从表中提取数据之前，我需要选择一个特定的过滤器，但是我没有任何运气点击选项卡项目，而我可以点击一个按钮。

我在这个应用程序中使用 puppeteer 和 Cheerio，我已经成功导航到相关页面并在提取数据之前单击了一个按钮，但选项卡标题似乎没有以同样的方式做出反应，尽管它也需要人工用户单击以选择它。

这是我的代码的 sn-p：

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

我希望在执行我的其余抓取功能时，获得与“排名独奏”选项卡标题处于活动状态时显示的信息一致的结果。相反，它当前无法激活该选择器，并在默认的“Total”选项卡标题处于活动状态时抓取显示的数据。

非常感谢您提出的所有建议

Answer 1

目前无法激活该选择器

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

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});

这将使您首先更好地了解抓取期间发生的情况。