如何在Playwright的evaluate执行代码中等待页面加载以完成两步登录表单填写

看起来你遇到了两个核心问题：一是提交第一个表单后，页面（或DOM）还没加载完成就执行了后续代码，导致找不到密码输入框；二是如果表单提交会触发页面跳转，那么同一个evaluate的JS代码无法跨页面执行，因为页面跳转后原执行上下文会被销毁。下面分情况给出解决方案：

情况1：两步登录在同一页面完成（无页面跳转） #

如果你的两步登录是通过AJAX提交，密码表单在当前页面动态加载，那么可以用异步等待元素出现的方式解决。我们可以写一个工具函数，等待密码输入框加载完成后再执行后续操作：

// 定义一个等待元素出现的工具函数，支持超时
function waitForSelector(selector, timeout = 30000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    const checkElement = () => {
      const element = document.querySelector(selector);
      if (element) {
        resolve(element);
      } else if (Date.now() - startTime > timeout) {
        reject(new Error(`等待选择器超时: ${selector}`));
      } else {
        // 用requestAnimationFrame循环检查，性能比setInterval好
        requestAnimationFrame(checkElement);
      }
    };
    checkElement();
  });
}

// 第一步：填写登录名并提交表单
document.querySelector('input[name=login]').value = "admin";
document.querySelector('form').submit();

// 等待密码输入框加载完成，再执行后续操作
waitForSelector('input[name=password]').then(passwordInput => {
  passwordInput.value = "password";
  document.querySelector('form').submit();
});

为什么这个方案可行？ #

Playwright的page.evaluate会自动等待代码返回的Promise完成，所以即使我们用了异步逻辑，Playwright也会等密码填写并提交的操作完成后，才继续执行后续的库代码。

情况2：两步登录触发页面跳转 #

如果提交登录表单后会跳转到新页面输入密码，问题会更棘手：因为页面跳转时，原页面的JS执行上下文会被立即销毁，同一evaluate中的后续代码根本无法在新页面运行。这种情况下，推荐优先尝试以下两种workaround：

方案1：用隐藏iframe监听新页面加载（推荐） #

我们可以把登录表单的提交目标改为一个隐藏的iframe，这样不会跳转主页面，同时监听iframe的加载事件来操作新页面的内容：

// 第一步：填写登录名
const loginInput = document.querySelector('input[name=login]');
loginInput.value = "admin";
const loginForm = document.querySelector('form');

// 创建隐藏iframe作为表单提交目标
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.name = 'loginSubmitTarget';
document.body.appendChild(iframe);

// 修改登录表单的提交目标为这个iframe
loginForm.target = 'loginSubmitTarget';

// 监听iframe的加载事件（新页面加载完成后触发）
iframe.addEventListener('load', () => {
  try {
    // 操作iframe中的密码表单
    const passwordInput = iframe.contentDocument.querySelector('input[name=password]');
    passwordInput.value = "password";
    iframe.contentDocument.querySelector('form').submit();
    
    // 提交完成后，可以把主页面跳转到最终的登录后页面
    window.location.href = iframe.contentWindow.location.href;
  } catch (e) {
    console.error('操作密码表单失败:', e);
  }
});

// 提交登录表单
loginForm.submit();

注意：这个方案的前提是目标网站没有设置X-Frame-Options限制iframe嵌入，否则会加载失败。

方案2：利用本地存储标记+页面加载事件（兼容性有限） #

如果iframe方案不可行，可以尝试在第一个页面设置本地存储标记，然后尝试在页面卸载前注入脚本，让新页面加载后自动执行密码填写操作（这个方法依赖浏览器行为，兼容性可能不好）：

// 第一步：填写登录名并设置本地存储标记
document.querySelector('input[name=login]').value = "admin";
localStorage.setItem('needFillPassword', 'true');
document.querySelector('form').submit();

// 尝试在页面卸载前注入脚本（仅作参考，不一定在所有浏览器生效）
window.addEventListener('beforeunload', () => {
  const script = document.createElement('script');
  script.textContent = `
    window.addEventListener('load', () => {
      if (localStorage.getItem('needFillPassword') === 'true') {
        try {
          document.querySelector('input[name=password]').value = "password";
          document.querySelector('form').submit();
          localStorage.removeItem('needFillPassword');
        } catch (e) {
          console.error('自动填写密码失败:', e);
        }
      }
    });
  `;
  document.head.appendChild(script);
});

最后要提醒的是：如果是页面跳转类型的两步登录，最可靠的解决方案其实是修改Playwright库代码，分两次调用evaluate——第一次提交登录表单，等待页面跳转完成后，第二次调用evaluate填写密码。但既然你无法修改库代码，建议优先尝试iframe方案（如果网站允许），或者确认是否可以通过异步方式实现两步登录（无页面跳转），此时异步等待元素的方案是最稳定的。

备注：内容来源于stack exchange，提问作者azmeuk