时间戳

首页 > 解决方案 > 导航选项卡的 Puppeteer 触发器

node.js - 导航选项卡的 Puppeteer 触发器

问题描述

我有一个看起来像这样的页面： 在此处输入图像描述

我想用 puppetee 做一个截图，它应该如下工作：

  1. 一个网页，脚本会在一个日期范围输入中输入一个日期，然后点击一个按钮，就会显示数据。

  2. 此页面中有几个选项卡（如图中的红线框所示），每个选项卡都有一个指向显示数据的表格的链接。每桌一个标签。

  3. 截图内容是整个页面以及 tabs 和 table 之一。

  4. 单击另一个选项卡会导致表格内容平滑更改。问题是我不知道这个改变什么时候完成？puppeteer 是否提供了任何触发器？

源代码：

private async doScreenShotGlobal(page: puppeteer.Page, dayStartStr: string) {
    const tabs = await page.$$('div.ant-tabs-tab');  // get tabs
    this.logger.info(tabs.length);
for (let j = 1; j <= tabs.length; j++) {  // process each tab

    let activeTab = await page.waitFor(`selector path > div:nth-child(${j})`);

    await activeTab.click(); 

    await page.waitForSelector('.ant-table-row.ant-table-row-level-0', { visible: true, timeout: 30000 }); // wait for table to appear

    await page.waitFor(1000); // i clicked another tab,but active tab does not change yet, so wait for 1000,but not work properly.

    const globalName = await page.$$eval('div.ant-tabs-tab-active.ant-tabs-tab', nodes => nodes.map(n => n.innerHTML));
    this.logger.info(j);
    this.logger.info(globalName);
    const fullName = `${this.saveMainpath}/${globalType}/${globalType}_${globalName}_${dayStartStr}.png`;
    const table = await page.$('div.ant-tabs-tabpane.ant-tabs-tabpane-active');
        if (table && !fs.existsSync(fullName)) {

          await this.shotOnFullPage(table, page, fullName); // to do screenshot

        }
        else {
          // ...
        }
      }

}
  }

和我的依赖：

"dependencies": {
    "@types/node": "12.7.2",
    "log4js": "5.0.0",  
    "moment": "2.24.0",
    "puppeteer-core": "1.19.0",
    "merge-img": "2.1.3"
},
"devDependencies": {
    "@types/puppeteer":"1.19.1",
    "@types/puppeteer-core":"1.9.0",
    "dayjs":"1.8.15",
    "@types/minimist":"1.2.0"
}

标签： node.jstypescriptpuppeteer

解决方案

如果这些选项卡中的数据是静态的，您可以使用page.waitForSelector等待正确的选择器出现。

另一种方法是使用page.evaluate来操作选项卡中的表格以添加id可用于page.waitForSelector的属性。

如果必须完成 HTTP 请求，您可以侦听响应事件并查找这些 HTTP 请求。

我能想到的另一个（脏）解决方案是反复检查该表的innerHTML是否已更改。

推荐阅读