执行量角器测试时“失败：等待量角器与页面同步时出错”

Question

我尝试在包含 Angular 和非 Angular 组件的 Web 应用程序上执行一些量角器测试。 我的代码如下所示：

describe("Test Name", function() {
  it("Test case", function() {
    // first execute steps on a non-Angular component
    browser.waitForAngularEnabled(false);
    // some test steps

    // then execute tests on an Angular component, which opens in a new browser tab
    browser.waitForAngularEnabled(true);
    // some more test steps
    });
});

问题是运行上述测试后，浏览器启动并立即关闭并出现以下错误：

失败：等待 Protractor 与页面同步时出错：“angularJS 可测试性和 Angular 可测试性都未定义。这可能是因为这是一个非 Angular 页面，也可能是因为您的测试 涉及客户端导航，这可能会干扰 Protractor 的引导。详情见https://github.com/angular/protractor/issues/2643”

当我从代码中删除browser.waitForAngularEnabled(true);时，非Angular组件的步骤成功执行，然后在新的浏览器选项卡中打开应用程序的Angular组件，10秒内没有任何反应（没有执行任何步骤) 并且浏览器关闭并出现以下错误：

失败：等待 10007 毫秒后超时

Answer 1

在与非 Angular 用户界面交互时使用 browser.ignoreSynchronization = true;，因为它使量角器不等待 Angular 承诺

和 browser.ignoreSynchronization = false; 后跟 browser.waitForAngular(); 与 Angular ui 交互时

Answer 2

您可能应该考虑异步代码并等待承诺解决。另外，在测试函数中添加Jasmine's done parameter，让 selenium 知道测试何时结束。

可能导致此问题的另一件事是在您实际进入角度页面之前激活waitForAngularEnabled。我建议您在该调用前加上一个调用，以检查页面上的某些内容是否已经加载，这样您就知道 Angular 在等待 Angular 活动之前已准备好被量角器挂钩。

重要的是要注意，量角器会等待waitForAngularEnabled(true) 之后的下一个操作来触发检查，如果以后有人更改代码，依赖它可能会使问题不清楚。

describe("Test Name", function() {
  it("Test case", function(done) {
    // first execute steps on a non-Angular component
    browser.waitForAngularEnabled(false)
      .then(() => /* step1 */)
      .then(() => /* step2 */)
      // ...
      // ? this one is very important to make sure
      // we're in an angular page ?
      .then(() => ensurePageTitleIsVisible())
      .then(() => browser.waitForAngularEnabled(true))
      .then(() => done())
      .catch((err) => done.fail(err));
  });
});

function ensurePageTitleIsVisible() {
  return browser.wait(ExpectedConditions.visibilityOf(PAGE_TITLE_SELECTOR), jasmine.DEFAULT_TIMEOUT_INTERVAL, 'Title does not exist after timeout');
}

这也可能会为您提供更好的错误消息。

当然，你也可以用 async \ await 语法做同样的事情。

describe("Test Name", function() {
  it("Test case", function(done) {
    try {
      // first execute steps on a non-Angular component
      await browser.waitForAngularEnabled(false)
      await step1();
      await step2();
      // ...
      await browser.waitForAngularEnabled(true);
      done();
    } catch(err) {
      done.fail(err);
    }
  });
});

基本上，出现问题是因为您在 browser.waitForAngularEnabled 函数实际完成之前继续执行测试步骤。