导航标签的操纵up触发器

Question

我有一个看起来像这样的页面：

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

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

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

3. 屏幕截图内容是整个页面以及选项卡和表格之一。

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"
}

Answer 1

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

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

如果必须执行HTTP请求，则可以侦听response事件并查找这些HTTP请求。

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