angular - Angular-Protractor-Headless Chromium:使用 APP_INITIALIZE 时,在页面上找不到 Angular
问题描述
我们正在构建一个 Ionic 混合应用程序,并且我们实现了由 CI 系统运行的自动化 E2E 测试。所有这些测试一直正常工作,直到我们在“app.module”中实现APP_INITIALIZE以在初始化之前获取浏览器语言。
这是我们的 APP_INITIALIZE 实现的脏代码:
-app.module.ts
export function configurateLocaleData(dynamicRegisterLocaleService: DynamicRegisterLocaleService): () => Promise<any> {
return () => dynamicRegisterLocaleService.configurateLocaleData();
}
...
providers: [
...
{
provide: APP_INITIALIZER,
useFactory: configurateLocaleData,
deps: [ DynamicRegisterLocaleService ],
multi: true
}
...
-dynamic-register-locale.service.ts
import {Injectable} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {AppConfig} from "../app.constants";
import {DateLocaleService} from "./dateLocale.service";
import {registerLocaleData} from "@angular/common";
@Injectable()
export class DynamicRegisterLocaleService {
constructor(private httpClient: HttpClient) {
}
public configurateLocaleData(): Promise<any> {
let currentLang = DateLocaleService.getLanguage();
return this.httpClient.get("../assets/locales/" + currentLang + ".js", {responseType: "text"}).toPromise()
.then(data => {
const startPos = data.indexOf(AppConfig.EXPORT_DEFAULT);
let localeText = "return " + data.substring(startPos + AppConfig.EXPORT_DEFAULT.length);
registerLocaleData((new Function(localeText))());
});
}
}
这些是我们正在运行的一些量角器黄瓜测试,它的配置:
-cucumber.conf.js
exports.config = {
allScriptsTimeout: 70000,
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
directConnect: true,
restartBrowserBetweenTests: true,
capabilities: {
'browserName': 'chrome',
'chromeOptions': {
'args': ['--disable-web-security', '--headless', '--disable-gpu', '--no-sandbox'],
'perfLoggingPrefs': {
'enableNetwork': true,
'enablePage': false
}
},
loggingPrefs: {
performance: 'ALL',
browser: 'ALL'
}
},
specs: [
'../e2e/cucumber/features/*.feature'
],
cucumberOpts: {
require: ['../e2e/cucumber/steps/*.steps.js'],
strict: true
},
};
-cucumber.steps.js
var TestsCfg = require("./../tests.constants.js");
var SupportFunctions = require("./../support/support-functions.js");
var {defineSupportCode, After} = require("cucumber");
var chai = require("chai").use(require("chai-as-promised"));
var expect = chai.expect;
defineSupportCode(function({setDefaultTimeout, When, Then, Given, And}) {
setDefaultTimeout(TestsCfg.CUCUMBER_STEPS_MAX_TIMEOUT_MS);
After(function() {
return browser.manage().logs().get('browser').then(function(browserLogs) {
console.log("Console logs for this scenario: ");
browserLogs.forEach(function(log){
console.log(log.message);
});
});
});
When("I navigate to App", function() {
return browser.get(TestsCfg.APP_TEST_URL);
});
Then("the title should be {string}", function(title) {
return expect(browser.getTitle()).to.eventually.eql(title);
});
Given("I should be able to login as {string}", function(username) {
var usernameInput = element.all(by.css(".login-input .text-input")).get(0).getWebElement();
var passwordInput = element.all(by.css(".login-input .text-input")).get(1).getWebElement();
var loginButton = element(by.id("loginButton"));
return browser.wait(SupportFunctions.isElementVisible(loginButton)).then(function() {
usernameInput.click();
usernameInput.sendKeys(username);
passwordInput.click();
passwordInput.sendKeys(pass);
return loginButton.click();
});
});
Then("the dashboard should be shown for house {string}", function(house) {
var headerSpan = element(by.css(".header-text"));
return browser.wait(SupportFunctions.isElementVisible(headerSpan)).then(function() {
return expect(headerSpan.getText()).to.eventually.eql(house);
});
});
还有更多测试,但所有测试都以相同的方式工作。我们转到所需的 URL,登录,然后运行特定的测试。由于它是一个 Ionic 应用程序,它们都有 ExpectedConditions 所以它等到一切都正确加载。
问题是,所有这些测试都在本地正常运行,并且在实现 APP_INITIALIZE 之前,它们也在我们的 CI 系统中运行。APP_INITIALIZE 实施后,这些错误开始出现在每个测试中:
我们的 CI 是 Bitbucket Pipelines,运行 Docker 镜像weboaks/node-karma-protractor-chrome:debian-node8
,其中包含 Chromium 版本 64.0.3282.119。我们使用与 Chromium 64 兼容的最新版本 chromedriver 2.37。
这些是我们从测试中得到的事实:
- 我们知道它与 APP_INITIALIZE 有关,因为如果我们删除该实现,一切都会正常工作。
- 我们也知道在没有
"--headless"
标志的情况下运行 Protractor-Cucumber 时它可以正常工作。 - 它在使用 Chromium v66 时也可以工作,甚至是无头的。但它不适用于 Chromium 64.0.3282.119。
有谁知道这是 Angular、Protractor 还是 Chromium 错误?
谢谢!
解决方案
Protractor
有禁用此等待的方法。browser.waitForAngularEnabled(false);
我把它放在我的config
文件onPrepare
中
onPrepare: async () => {
await browser.waitForAngularEnabled(false);
},
您也可以尝试在开始时将其直接放入您的测试中。
推荐阅读
- sql - 类似于数据库中的引用复制
- javascript - JavaScript 代码不适用于多个 HTML 元素
- flutter - 提供者与 InheritedWidget
- javascript - 如何指定运行嵌套 Web 组件构造函数的顺序?
- python - 如何获取嵌套列表或矩阵中所有最大元素的索引?
- javascript - DOM 事件详细信息不会在 Angular Click 事件中增加
- react-native - 如何根据所选语言更改 RN 屏幕内容?
- javascript - 如何在单击时调用工具提示而不是悬停
- c# - 将最后一个值复制到其他单元格,直到我们看到一个填充的单元格
- c - 查找此输出的逻辑