Cucumber Protractor：Angular与非Angular应用页面超时问题排查

问题背景：我们正采用BDD方法并使用Protractor开展测试，被测应用同时包含Angular和非Angular页面，登录页为非Angular页面，首页为Angular页面。脚本在登录页运行正常，但进入首页（Angular页面）后无任何操作执行，请问可能是什么问题？

附上提供的代码片段：

Given(/^User lands on Login$/, function () { 
  var appUrl = properties.get('appUrl'); 
  return browser.driver.get('appUrl'); 
  browser.ignoreSynchronizati...

嘿，这个问题我之前碰到好多次了，核心问题基本都出在Protractor的Angular同步机制没切换到位上，咱们一步步拆解：

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

Protractor是基于Selenium封装的测试工具，针对Angular应用做了专属优化——默认情况下，它会自动等待Angular的$digest循环完成、所有$http请求结束，才会执行下一条命令。但这个逻辑只适用于Angular页面，非Angular页面完全不需要这个等待。

你的场景是先访问非Angular的登录页，再跳转到Angular首页：

1. 如果登录页没关闭同步，Protractor会傻等Angular加载（但登录页根本不是Angular的），不过你说登录页运行正常，可能是之前在别的地方关了同步；
2. 但登录后进入Angular首页时，如果你没重新开启同步，Protractor就不会等待Angular页面就绪，直接跑后续命令——此时页面可能还在加载，或者Angular的定位器（比如by.model、by.binding）无法正常工作，看起来就像“什么操作都没执行”。

再看你的代码片段，还有两个明显的小问题：

• 你用了browser.driver.get（原生Selenium方法），而不是browser.get（Protractor封装的方法），后者才会配合同步机制工作；
• browser.ignoreSynchronization的代码写在了return之后，根本不会执行到！

具体修复步骤 #

1. 登录页（非Angular）：提前关闭同步

在访问登录页之前，先关闭Angular同步，确保Protractor不会做无用的等待：

Given(/^User lands on Login$/, function () { 
  var appUrl = properties.get('appUrl'); 
  // 新版本Protractor用这个，替代老版本的ignoreSynchronization
  browser.waitForAngularEnabled(false); 
  // 老版本Protractor请用：browser.ignoreSynchronization = true;
  // 用browser.get而非driver.get，让Protractor处理页面加载逻辑
  return browser.get(appUrl); 
});

2. 登录完成后：重新开启同步

登录操作完成、即将跳转到Angular首页时，一定要把同步重新打开，这样Protractor才能正常等待Angular页面就绪：

When(/^User logs in with valid credentials$/, async function () {
  // 执行登录操作（这里建议用async/await更清晰，避免回调地狱）
  await element(by.id('username')).sendKeys('testuser');
  await element(by.id('password')).sendKeys('testpass');
  await element(by.id('loginBtn')).click();
  
  // 跳转前开启Angular同步，适配首页
  await browser.waitForAngularEnabled(true);
  // 老版本请用：browser.ignoreSynchronization = false;
});

3. 首页验证：加显式等待（可选但推荐）

有时候即使开启了同步，页面跳转可能有延迟，建议在验证首页时加个显式等待，确保标志性元素加载完成：

Then(/^User should see the home page$/, async function () {
  const EC = protractor.ExpectedConditions;
  // 等待首页标题可见，超时时间10秒
  await browser.wait(EC.visibilityOf(element(by.css('h1.home-title'))), 10000);
  // 验证标题文本
  const titleText = await element(by.css('h1.home-title')).getText();
  expect(titleText).toEqual('Welcome Home');
});

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