Puppeteer自动化：深度解析页面内容变化后元素点击失效与异步处理

// ... 其他 Puppeteer 操作 ...

// 首次点击“继续”按钮
await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB');
const continueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
await continueBtn.click();

// 预期在此处等待页面加载或UI更新，但遗漏了 'await'
this.delay(5000); // 问题所在：没有 'await'

// 尝试点击第二个“继续”按钮
// 由于上方没有等待，脚本会立即执行到这里，此时页面可能还未准备好
const confirmBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
await confirmBtn.click(); // 可能会失败

// ... 其他 Puppeteer 操作 ...

// 首次点击“继续”按钮
await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB');
const continueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
await continueBtn.click();

// 关键修复：添加 'await' 关键字
await this.delay(5000); // 现在脚本会暂停5秒，等待页面加载和UI更新

// 尝试点击第二个“继续”按钮
// 此时页面已准备就绪，操作成功
const confirmBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
await confirmBtn.click(); // 成功

import Puppeteer from 'puppeteer';

class AutomationController {
  // 自定义延迟函数
  private delay(time: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, time));
  }

  public async CreateProfile(): Promise<void> {
    const browser = await Puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    try {
      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 }
      );
      console.log('Page loaded.');

      // 1. 点击 'Create Temporary ID' 按钮
      await page.waitForSelector('#VC_OA_LOGIN_WRK_REGISTER', { visible: true });
      await page.click('#VC_OA_LOGIN_WRK_REGISTER');
      console.log('Clicked "Create Temporary ID".');

      // 显式等待一些UI过渡，或者等待新的表单元素出现
      await page.waitForSelector('#VC_OA_LOGIN_WRK_NATIONAL_ID', { visible: true });
      await this.delay(1000); // 额外短暂停留，确保UI稳定

      // 2. 模拟表单填写 (此处省略详细填写逻辑，仅作示意)
      // await page.type('#VC_OA_LOGIN_WRK_NATIONAL_ID', '1234567890');
      // ... 更多表单字段填写 ...
      console.log('Form fields simulated to be filled.');
      await this.delay(2000); // 模拟用户填写时间

      // 3. 点击第一个“继续”按钮
      // 每次点击可能导致页面局部更新，因此重新等待和查询元素是良好实践
      await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB', { visible: true });
      const firstContinueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      if (firstContinueBtn) {
        await firstContinueBtn.click();
        console.log('First "Continue" button clicked.');
      } else {
        console.error('First "Continue" button not found.');
        return;
      }

      // 4. 关键的异步等待：等待页面内容更新或UI过渡完成
      // 这里使用自定义延迟，但实际项目中应优先考虑 page.waitForSelector 或 page.waitForNavigation
      await this.delay(5000); // 确保等待足够长时间，让页面进入下一个状态
      console.log('Waited for page content to update.');

      // 5. 点击第二个“继续”按钮（在页面内容变化后）
      // 再次等待元素出现，确保获取到的是新的、可交互的DOM元素引用
      await page.waitForSelector('#VC_OA_LOGIN_WRK_CONTINUE_PB', { visible: true });
      const secondContinueBtn = await page.$('#VC_OA_LOGIN_WRK_CONTINUE_PB');
      if (secondContinueBtn) {
        await secondContinueBtn.click();
        console.log('Second "Continue" button clicked successfully!');
      } else {
        console.error('Second "Continue" button not found after page content change.');
      }

      console.log('Automation process completed.');

    } catch (error) {
      console.error('Automation failed:', error);
    } finally {
      await browser.close();
      console.log('Browser closed.');
    }
  }
}

// 运行自动化
const automation = new AutomationController();
automation.CreateProfile();