Playwright弹窗Promise未解析问题：点击发送请求报错

核心问题 #

1. 未等待异步操作完成：点击"Send Upload Request"按钮时未加await，导致后续操作在弹窗未完全渲染时就执行，引发元素定位错误，进而让popupPromise因超时或上下文异常失败。
2. Promise监听时机过早：提前创建的popupPromise会持续等待弹窗事件，但实际触发新窗口的是弹窗内的"Send Request"按钮，过早监听易导致超时，或因中间操作干扰无法正确捕获事件。

修复后的代码 #

test('Send upload jee', async ({ page, browser }) => {
  await Login(page);
  await page.getByText('Projects', { exact: true }).click();
  await page.locator('[id="0"]').click(); // 简化转义字符，避免混淆
  await page.getByLabel('').nth(1).fill('Project Test');
  await page.getByText('Create', { exact: true }).click();

  // 等待上传请求弹窗加载完成
  await page.getByRole('button', { name: 'Send Upload Request' }).click();
  
  // 操作弹窗内的输入字段
  await page.getByLabel('').nth(1).click();
  await page.getByLabel('').nth(1).fill('adfbadfb');
  await page.getByLabel('').nth(1).press('Tab');
  await page.getByLabel('').nth(2).fill('some@mailinator.com');

  // 触发新窗口前再创建popupPromise，精准监听事件
  const popupPromise = page.waitForEvent('popup');
  await page.getByRole('button', { name: 'Send Request' }).click();
  
  // 等待新窗口加载完成
  const popup = await popupPromise;
  await popup.waitForLoadState();
});

额外优化建议 #

• 替换不稳定定位器：page.getByLabel('').nth(1)这类依赖索引的定位方式极易受页面结构变化影响，建议改用元素的placeholder、id或data-testid属性定位，示例：

  // 按placeholder定位
  await page.getByPlaceholder('输入请求名称').fill('adfbadfb');
  // 按测试ID定位
  await page.getByTestId('request-email-input').fill('some@mailinator.com');
  

• 自定义超时时间（可选）：若新窗口加载较慢，可给waitForEvent设置超时阈值：

  const popupPromise = page.waitForEvent('popup', { timeout: 10000 }); // 10秒超时
  

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