Protractor测试Okta登录后Angular页面等待超时问题排查

我之前帮团队解决过一模一样的问题，核心原因是你在处理Okta非Angular登录页时禁用了Angular等待，但跳转回自己的Angular应用后，没有及时重新启用并等待Angular加载完成，导致Protractor不知道要等Angular的异步操作，最终超时。

给你几个可行的解决方案，按优先级来：

方案1：跳转后重新启用Angular等待并验证目标页面 #

这是最直接的解决方式，步骤很清晰：

1. 完成Okta登录操作后，先等待页面跳转到你的Angular应用域名/目标路径（确保已经离开Okta页面）
2. 重新启用browser.waitForAngularEnabled(true)
3. 显式等待Angular完全稳定后再继续操作

修改后的代码示例：

fit('My Test', () => {
  // 处理Okta登录（非Angular页面，禁用Angular等待）
  browser.waitForAngularEnabled(false);
  browser.get('/');

  // 输入账号密码
  signInPage.setUserName('MyUserName');
  signInPage.setPassword('MyPassword');
  
  // 点击登录按钮（替换成你实际的登录按钮选择器）
  const loginBtn = element(by.css('[data-se-for-name="sign-in"]'));
  loginBtn.click();

  // 关键：等待跳转到你的Angular应用页面，比如通过URL匹配
  const appUrlRegex = /your-app-domain\.com\/home/; // 替换成你的应用实际URL规则
  browser.wait(() => {
    return browser.getCurrentUrl().then(url => appUrlRegex.test(url));
  }, 15000, '超时警告：未成功跳转到Angular应用页面');

  // 回到Angular测试模式
  browser.waitForAngularEnabled(true);
  // 等待Angular的所有异步操作完成（比如API请求、组件渲染）
  browser.waitForAngular();

  // 接下来就可以正常操作Angular页面元素了
  expect(element(by.css('.welcome-message')).getText()).toBe('Welcome back!');
});

方案2：额外等待页面加载完成 #

如果方案1还是偶尔超时，可能是Okta跳转后页面的静态资源还没加载完，可以在启用Angular等待前，先等页面的document.readyState变为complete：

// 在browser.waitForAngularEnabled(true)之前加上这段
browser.wait(() => {
  return browser.executeScript('return document.readyState').then(state => state === 'complete');
}, 10000, '超时：页面静态资源未加载完成');

方案3：检查Protractor配置的全局设置 #

确保你没有在protractor.conf.js里全局设置waitForAngularEnabled(false)，全局禁用会导致所有Angular页面的测试都跳过等待，必然超时。配置里应该只在需要处理非Angular页面时临时禁用，用完立刻恢复。

为什么会出现这个问题？ #

Protractor默认会等待Angular的$http和$timeout完成后才执行下一步，但Okta登录页是非Angular页面，所以你必须禁用这个等待。但登录完成跳回自己的Angular应用后，如果你不重新启用等待，Protractor会当作非Angular页面来处理，不会等Angular的异步操作，直接执行后续代码，这时候页面还没渲染好，自然就超时了。

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