Триггер кукловода для вкладок навигации

Question

У меня есть страница, которая выглядит следующим образом:

Я хотел бы сделать скриншот с кукловодом, который должен работать следующим образом:

1. Веб-страница, скрипт вводит дату в поле ввода диапазона дат и нажимает кнопку, после чего отображаются данные.

2. Есть несколько вкладок вНа этой странице (как видно из красной линии на рисунке) каждая вкладка имеет ссылку на таблицу, в которой отображаются данные. Одна вкладка на таблицу.

3. Содержимое снимка экрана - это вся страница, одна из вкладок и таблица.

4. Нажмите на другую вкладку, чтобы плавно изменить содержимое таблицы. проблема в том, что я не знаю, когда это изменение будет сделано? Есть ли триггер, предоставляемый кукловодом?

исходный код:

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. оцените , чтобы манипулировать таблицами на вкладках, чтобы добавить атрибут id, который можно использовать для page.waitForSelector .

Если необходимо выполнить запрос HTTP, вы можетеслушайте ответ события и ищите эти HTTP-запросы.

Другое (грязное) решение, о котором я могу подумать, - это неоднократно проверять, является ли innerHTML этой таблицы изменилась.