内容更改后，Puppeteer 无法第二次单击具有相同 id 的标签

Question

在 Puppeteer 上工作来学习，所以我正在尝试填写这个网站

脚本的作用是什么

• 转到上面的链接
• 点击“创建临时 ID”
• 填写表格
• 单击继续
• 内容变更
• 再次单击继续（这是与第一个“继续”按钮具有相同 ID 值的同一个按钮

问题

• 当我第二次单击“继续”按钮时，该按钮与第一次工作的 ID 相同，但它失败了

脚本

import tesseract from 'node-tesseract-ocr';
import Puppeteer from 'puppeteer';

const config = {
  lang: 'eng', // default
  oem: 3,
  psm: 13,
};

export class AutomationController {
  public async CreateProfile(data: any) {
    try {
      const _data = {
        nationality: 'BRA',
        id: '0508228690083',
        title: 'Mr',
        firstName: 'Shaun',
        middleName: 'Maxwell',
        surname: 'Smith',
        dob: '15062001',
        gender: 'M',
        email: 'shaun@gmail.com',
        countryCode: '+27',
        mobileNumber: '0832567890',
      };

      const browser = await Puppeteer.launch({ headless: false });
      const page = await browser.newPage();
      await page.goto(
        'https://self-service.wits.ac.za/psc/csprodonl/UW_SELF_SERVICE/SA/c/VC_OA_LOGIN_MENU.VC_OA_LOGIN_FL.GBL',
        { waitUntil: 'networkidle2', timeout: 0 }
      );

      // Click create temp id button
      await page.waitForSelector('#VC_OA_LOGIN_WRK_REGISTER');
      await page.click('#VC_OA_LOGIN_WRK_REGISTER');

      // Nationality field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_COUNTRY');
      // await page.select('select[id="VC_OA_LOGIN_WRK_COUNTRY"]', 'AUS');

      // ID number field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_NATIONAL_ID');
      const idInput = await page.$('#VC_OA_LOGIN_WRK_NATIONAL_ID');
      await idInput?.type(_data.id);
      await this.delay(4000);

      // Name Title field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_NAME_PREFIX');
      await page.select(
        'select[id="VC_OA_LOGIN_WRK_NAME_PREFIX"]',
        _data.title
      );
      await this.delay(4000);

      // First name field
      await page.waitForSelector(
        '#win0divVC_OA_LOGIN_WRK_FIRST_NAMEctrl > #VC_OA_LOGIN_WRK_FIRST_NAME'
      ); // VC_OA_LOGIN_WRK_FIRST_NAME
      const firstNameInput = await page.$('#VC_OA_LOGIN_WRK_FIRST_NAME');
      await firstNameInput?.type(_data.firstName);
      await this.delay(4000);

      // Middle name field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_MIDDLE_NAME');
      const middleNameInput = await page.$('#VC_OA_LOGIN_WRK_MIDDLE_NAME');
      await middleNameInput?.type(_data.middleName);
      await this.delay(4000);

      // Surname field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_LAST_NAME');
      const surnameInput = await page.$('#VC_OA_LOGIN_WRK_LAST_NAME');
      await surnameInput?.type(_data.surname);
      await this.delay(4000);

      // Gender field
      await page.waitForSelector('#VC_OA_LOGIN_WRK_SEX');
      await page.select('select[id="VC_OA_LOGIN_WRK_SEX"]', _data.gender);
      await this.delay(4000);

      // Email field
      await page.waitForSelector(
        '#win0divVC_OA_LOGIN_WRK_EMAIL_ADDRctrl > #VC_OA_LOGIN_WRK_EMAIL_ADDR'
      );
      const emailInput = await page.$(
        '#win0divVC_OA_LOGIN_WRK_EMAIL_ADDRctrl > #VC_OA_LOGIN_WRK_EMAIL_ADDR'
      );
      await emailInput?.type(_data.email);
      await this.delay(4000);

      // Mobile number
      await page.waitForSelector('#VC_OA_LOGIN_WRK_VC_PHONE_CELL_SS');
      const mobileInput = await page.$('#VC_OA_LOGIN_WRK_VC_PHONE_CELL_SS');
      await mobileInput?.type(_data.mobileNumber);
      await this.delay(4000);

      await page.waitForSelector(
        '#win0divVC_SEC_WRK_HTML_AREA_02 > div > div > img'
      );

      // Bypass security check
      const imgs = await page.$$eval(
        '#win0divVC_SEC_WRK_HTML_AREA_02 > div > div > img',
        (imgs) => imgs.map((img) => img.getAttribute('src'))
      );
      const securityPassword = this.getCharacterAfterSecondUnderscore(imgs);

      await page.waitForSelector('#VC_OA_LOGIN_WRK_VC_SEC_CODE');
      const securityField = await page.$('#VC_OA_LOGIN_WRK_VC_SEC_CODE');
      await securityField?.type(securityPassword);

      await this.delay(4000);

      // Continue button
      await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      const continueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      await continueBtn.click();

      this.delay(5000);
      // TODO - HANDLE IF SECURITY CHECK FAILED

      //THIS THE BUTTON THAT FAILS TO CLICK SECOND TIME
      // CONFIRM Details button
      const confirmBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB'); 
      await confirmBtn.click();
      console.log(`Automation.controller - 136`, 'DONE');

      await this.delay(4000);
    } catch (error) {
      console.log(`Automation.controller - 137`, error);
    }
  }

  private delay(time) {
    return new Promise(function (resolve) {
      setTimeout(resolve, time);
    });
  }

  private getCharacterAfterSecondUnderscore(strings: string[]): string {
    const results: string[] = [];

    for (const string of strings) {
      const splittedString = string.split('_');
      results.push(splittedString[2]);
    }

    return results.join('');
  }
}

Answer 1

await我在我的机器上尝试过这个，你的问题的答案很简单，你只是忘记在行首添加关键字this.delay(5000);：

...
      // Continue button
      await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      const continueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      await continueBtn.click();

      await this.delay(5000); // YOU FORGOT TO ADD await HERE
      // TODO - HANDLE IF SECURITY CHECK FAILED

      //THIS THE BUTTON THAT FAILS TO CLICK SECOND TIME
      // CONFIRM Details button
      const confirmBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB'); 
      await confirmBtn.click();
...