如何用Protractor测试带非Angular登录页的AngularJS应用

兄弟，我太懂你这种Protractor踩坑的痛苦了！你的问题核心就是Protractor默认会强制等待Angular页面初始化完成，但你的登录页是非Angular的，直接导致Protractor在登录阶段卡壳，没法正确执行登录操作，自然跳不到后续的Angular应用页面。手动操作正常是因为浏览器不会搞这套“等Angular”的逻辑，流程顺畅得很。

下面给你一套亲测有效的解决方案：

1. 先在onPrepare里搞定登录（关键是关闭Angular等待） #

修改你的onPrepare函数，先告诉Protractor“现在我要操作非Angular页面，别瞎等”，登录完成跳转后再切回Angular模式：

onPrepare: function() {
  // 第一步：禁用Angular等待，因为登录页是非Angular的
  browser.waitForAngularEnabled(false);
  
  // 访问你的登录页
  browser.driver.get('http://localhost:3000/login'); // 补全你的实际URL
  
  // 执行登录操作：注意要用browser.driver.findElement，不能用element()（那是给Angular用的）
  browser.driver.findElement(by.id('username')).sendKeys('你的测试用户名');
  browser.driver.findElement(by.id('password')).sendKeys('你的测试密码');
  browser.driver.findElement(by.id('login-btn')).click(); // 替换成你登录按钮的定位器
  
  // 第二步：等待登录成功跳转到Angular应用页面，别用sleep！用wait监听URL变化
  return browser.driver.wait(function() {
    return browser.driver.getCurrentUrl().then(function(currentUrl) {
      // 这里替换成你的Angular应用首页的URL特征，比如包含/dashboard或者你的路由前缀
      return currentUrl.includes('/dashboard');
    });
  }, 10000).then(function() {
    // 回到Angular页面了，重新启用Angular等待
    browser.waitForAngularEnabled(true);
  });
}

2. 几个必须避开的坑 #

• 元素定位别搞错：非Angular页面绝对不能用Protractor的element()方法，必须用browser.driver.findElement()，不然会报错找不到Angular的$injector
• 别用硬编码sleep：用browser.driver.wait()监听URL或者元素出现才是靠谱的，sleep会因为网络/加载速度不稳定导致测试失败
• 确认跳转后的页面是Angular：如果登录后有个过渡页（也是非Angular），那要继续保持waitForAngularEnabled(false)，直到真正进入Angular应用页面再切换回来

3. 单个测试用例里的临时切换 #

如果你的测试用例中途需要回到非Angular页面操作，也可以临时切换状态：

it('应该能访问登录后的受保护页面', function() {
  // 临时禁用Angular等待（比如要操作某个非Angular弹窗）
  browser.waitForAngularEnabled(false);
  // 做非Angular操作...
  browser.waitForAngularEnabled(true);
  
  // 正常操作Angular元素
  element(by.css('.dashboard-title')).getText().then(function(title) {
    expect(title).toEqual('欢迎回来');
  });
});

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