Angular 7，量角器，随机错误“angularJS 可测试性和角度可测试性都未定义”答案

【问题标题】：Angular 7, Protractor, randomly error "both angularJS testability and angular testability are undefined"Angular 7，量角器，随机错误“angularJS 可测试性和角度可测试性都未定义”
【发布时间】：2019-06-11 12:09:12
【问题描述】：

我随机收到错误：

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

运行

$ ng e2e --webdriverUpdate=false --devServerTarget=

在我的 spec.ts 文件中，我有以下 2 个测试，第一个始终有效，第二个 随机失败并出现上述错误。

  beforeEach(async () => {
    myPage = new MyPage();
    browser.get('my-page');
  });

  it('should work', async () => {
    console.log('should work');
    expect(true).toBeTruthy();
  });

  it('should display the title', async () => {
    const title = await $('my-title-selector').getText();
    expect(title).toEqual('My-Title');
  });

这是我的页面页面对象：

import { $, $$ } from 'protractor';

export class MyPage {
  title = $('my-title-selector');
}

这是我的 protractor.conf.js

  // Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  SELENIUM_PROMISE_MANAGER: false,
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
};

你有什么想法吗？

【问题讨论】：

标签： angular protractor

【解决方案1】：

如果您正在使用 async / await（您就是这样！），您将需要等待所有承诺。所以我的猜测是你的beforeEach 承诺加载页面没有完成，你正在寻找一个可能没有被 Protractor 正确引导的 web 元素。

beforeEach(async () => {
  myPage = new MyPage();
  await browser.get('my-page');   // browser.get returns a webdriver.promise.Promise
});

it('should work', async () => {
  console.log('should work');
  expect(true).toBeTruthy();
});

it('should display the title', async () => {
  const title = await $('my-title-selector').getText();  // <-- this is right, getText returns a webdriver.promise.Promise<string>
  expect(title).toEqual('My-Title');
});

如果您使用 Protractor 5.4，它仍然使用 selenium-webdriver 控制流/promise 库而不是原生 Promises。所以 webdriver.promise.Promise 来自 selenium-webdriver 类型，promise 命名空间，Promise 对象。在 Protractor 6 中（当它退出测试版时），这将切换到原生 Promises。

希望对您有所帮助。

【讨论】：

嗨，谢谢，我在 protractor.conf.js 中添加了 SELENIUM_PROMISE_MANAGER: false 以禁用控制流/承诺管理器
是的，看来您在 browser.get 周围缺少一个 await 语句
我试过了，不行，11秒后所有测试都超时了
你只有一个规格吗？如果是这样，您的页面对象是什么样的。
是的，我只有一个规范，我编辑了我的问题，添加了 pageObject 文件

【解决方案2】：

您的第一个测试将始终通过，因为它不与应用程序交互，因此不检查角度站点的可测试性。但是，您的第二个测试确实尝试与应用程序交互，但似乎超时，因为该页面在该阶段尚未变得可测试。这也是为什么您的测试在 waitForAngularEnabled(false) 时通过的原因，因为它们不再检查可测试性。

如果您的 Angular 代码以特定方式使用 $interval 或 $timeouts，您的页面设置可能会出现问题。查看下面链接中主要问题的更新，看看它们是否适用于您的项目。

How to debug timed out waiting for asynchronous Angular tasks? Failure to find elements on angular page occurring

【讨论】：

【解决方案3】：

您可能会在此处概述的 Testabilities API 中遇到竞争条件错误：https://github.com/angular/angular/issues/15743

TL/DR 是——如果你注入了一个异步的 APP_INITIALIZER——比如加载一个配置文件——量角器有可能在 angular 报告它存在之前“检查 angular”。解决方法不是等待 Angular，而是等待由完整 Angular 应用程序呈现的 DOM 元素的存在。

这里有一些示例代码：

await browser.wait(ExpectedConditions.urlContains(this.baseUrl));
await browser.waitForAngularEnabled(false);
await browser.wait(ExpectedConditions.visibilityOf($('.main-app-content'), 10000);
await browser.waitForAngularEnabled(true);

【讨论】：