Angular E2E多文件顺序测试报错：Protractor无法与页面同步

我来帮你搞定这个报错！这个错误本质是Protractor没法和页面上的Angular应用建立同步，通常有几个常见原因，咱们一步步来排查修复：

1. 先修复skipIntro里的元素判断逻辑 #

你当前的代码里if (_skipBtn)是无效的——因为element(by.css(...))返回的是一个ElementFinder对象，不管元素是否存在，它永远是“真值”，所以这个判断等于没写。正确的做法是用isPresent()来检查元素是否存在：

async skipIntro(): Promise<any> {
  const _skipBtn = element(by.css(this.CSS.SKIP_INTRO));
  console.log("HelperService -> _skipBtn", _skipBtn);
  // 先检查元素是否存在
  const isSkipBtnPresent = await _skipBtn.isPresent();
  if (isSkipBtnPresent) {
    await _skipBtn.click();
    // 如果点击后有跳转或页面变化，最好再加个等待
    await browser.waitForAngular();
  }
}

2. 确保导航后等待Angular稳定 #

你的helperService.navigate方法只是调用了browser.get(path)，但有时候页面加载后Angular还没完成初始化，Protractor就开始执行后续操作了。可以修改navigate方法，加上browser.waitForAngular()：

navigate(path: string): Promise<any> {
  return browser.get(path).then(() => {
    return browser.waitForAngular();
  });
}

或者在beforeAll里显式等待：

beforeAll(async () => {
  homePage = new HomePage();
  helperService = new HelperService();
  await helperService.navigate("/home");
  // 显式等待Angular加载完成
  await browser.waitForAngular();
  await helperService.skipIntro();
});

3. 禁用Protractor的旧Promise管理器（关键！） #

如果你用的是较新的Angular版本，Protractor的内置Promise管理器已经被废弃了，这很容易导致同步问题。在protractor.conf.js里添加配置：

exports.config = {
  // 其他配置...
  SELENIUM_PROMISE_MANAGER: false,
  specs: [ 
    "./src/login/login.component.e2e-spec.ts", 
    "./src/customs-portal/home.component.e2e-spec.ts" 
  ],
  // 其他配置...
}

4. 特殊情况：引导层是非Angular元素 #

如果你的页面引导层（skip按钮所在的部分）是纯静态HTML或者非Angular渲染的，那Protractor的Angular同步会失效，这时候需要临时禁用同步：

async skipIntro(): Promise<any> {
  // 临时禁用Angular同步
  await browser.waitForAngularEnabled(false);
  const _skipBtn = element(by.css(this.CSS.SKIP_INTRO));
  const isSkipBtnPresent = await _skipBtn.isPresent();
  if (isSkipBtnPresent) {
    await _skipBtn.click();
    // 等待页面跳转或变化完成
    await browser.sleep(500); // 或者用更可靠的等待条件，比如等待某个元素出现
  }
  // 重新启用Angular同步
  await browser.waitForAngularEnabled(true);
  await browser.waitForAngular();
}

最后验证你的dummy测试 #

做完上面的调整后，再跑你的测试：

it("dummy test always pass", async () => {
  expect(true).toEqual(true);
});

应该就能正常通过了！

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