使用Playwright/Puppeteer自动化PayPal支付流程的等待逻辑异常问题

• 现有代码没有等待PayPal支付提交的异步流程完成，点击提交后直接执行后续动作，触发上下文丢失导致用例异常中断。
• 核心异常点：手动主动关闭PayPal窗口page1的时机错误：PayPal提交成功后会自动触发窗口关闭，手动close会打断支付回调链路，导致原业务页面无法弹出支付处理模态框。
• 原页面的元素操作没有加前置等待逻辑：直接点击尚未渲染的异步元素，触发超时错误导致用例结束。

修正后的逻辑要求 #

• 点击PayPal最终提交按钮后，等待PayPal窗口自动关闭事件，而非主动手动关闭：窗口关闭事件触发时，代表PayPal已经完成支付校验、成功回调了原业务页面。
• 切回原业务页面后，先等待目标元素渲染完成，再执行后续操作，避免未等待元素就直接点击。
• 避免硬编码页面索引的方式获取PayPal窗口，尽量在跳转时同步监听新页面事件，绑定正确的上下文。

修正后可直接复用的代码 #

// 保留原有PayPal窗口的操作逻辑，仅补充等待逻辑
// 首次点击提交跳转登录的步骤
const firstSubmitBtn = page1.locator('button[data-testid="submit-button-initial"]');
await firstSubmitBtn.waitFor({ state: 'visible' });
await firstSubmitBtn.click();

// 等待登录按钮出现再点击，避免元素未渲染
await page1.getByText('Log In').waitFor({ state: 'visible' });
await page1.getByText('Log In').click();

// 登录完成后，等待最终提交按钮出现再点击
const finalSubmitBtn = page1.locator('button[data-testid="submit-button-initial"]');
await finalSubmitBtn.waitFor({ state: 'visible', timeout: 10000 });
await finalSubmitBtn.click();

// 核心调整：删除手动主动关闭逻辑，等待PayPal窗口自动关闭
await page1.waitForEvent('close', { timeout: 30000 });

// 切回原业务页面，先等待元素渲染完成再操作
await page.waitForSelector('text="Payment Processing"', { state: 'visible' });
await page.waitForSelector('text=/.*Your payment confirmation and .*/', { state: 'visible' });
await page.waitForSelector('text=/.*My Applications.*/', { state: 'visible' });

• 不要硬编码使用context.pages()[1]这类索引获取PayPal窗口，建议在点击原页面PayPal跳转链接时，通过context.waitForEvent('page')同步等待新窗口弹出，确保绑定的上下文准确。
• 如果支付接口响应较慢，可以适当延长waitForEvent和waitForSelector的超时时间，避免默认30s超时误判失败。
• 如果原页面的支付模态框是通过postMessage回调触发的，可监听页面的page.on('console')事件辅助排查回调是否正常执行，定位是否是前端回调逻辑的问题。

内容的提问来源于stack exchange，提问作者Russell