我找到了为 AngularJS Web 应用程序设计的 Protractor 框架。
如何在不使用 AngularJS 的网站上使用 Protractor？
我写了我的第一个测试，Protractor 触发了这条消息：
Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
【问题讨论】：
标签： javascript asp.net angularjs testing protractor
另一种方法是设置browser.ignoreSynchronization = true before browser.get(...)。 Protractor 不会等待 Angular 加载，您可以使用通常的 element(...) 语法。
browser.ignoreSynchronization = true;
browser.get('http://localhost:8000/login.html');
element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();
【讨论】：
如果您的测试需要与非角度页面交互，请直接使用 browser.driver 访问 webdriver 实例。
来自Protractor docs的示例
browser.driver.get('http://localhost:8000/login.html');
browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();
【讨论】：
by.id 是否已更改为 By.id？
by.className 。参考docs
现在应该使用waitForAngular 而不是弃用的ignoreSynchronization 属性。
以下 waitForAngular 指南摘自 Protractor 文档以了解超时：
如何禁用等待 Angular
如果您需要导航到不使用 Angular 的页面，您可以通过设置 `browser.waitForAngularEnabled(false) 来关闭等待 Angular。例如：
browser.waitForAngularEnabled(false); browser.get('/non-angular-login-page.html'); element(by.id('username')).sendKeys('Jane'); element(by.id('password')).sendKeys('1234'); element(by.id('clickme')).click(); browser.waitForAngularEnabled(true); browser.get('/page-containing-angular.html');
【讨论】：
要在非角度站点上进行测试，您应该删除同步。为此使用以下内容：
browser.ignoreSynchronisation = true;
browser.get('url');
【讨论】：
忘记ignoreSynchronization!!!从量角器5.3.0开始，它不再存在于量角器中
应该改用browser.waitForAngularEnabled(false)
Protractor 内置了等待角度的处理，这就是它与众不同的原因。但是，如果页面不是角度量角器，则会挂起，直到遇到超时错误，因此您需要禁用该功能才能测试非角度页面。还有一个边缘情况，当页面有角度时，但这个功能仍然会导致量角器错误。执行以下步骤，找出何时禁用量角器等待角度
getAllAngularTestabilities()
如果输出是getAllAngularTestabilities is not defined，那么你的页面不是有角度的，去最后一步禁用内置等待
getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks
getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks
如果其中任何一个返回true（如果有微任务或宏任务待处理），则转到最后一步。如果都是false，恭喜，你可以使用内置量角器的等待角。但是，如果您不喜欢它，我不喜欢它，请阅读最后一步以了解如何禁用它
await关键字await browser.waitForAngularEnabled(false)
此命令可以在任何地方运行：在it 块中、beforeAll 或onPrepare 中的配置。只要确保，如果您使用await 来制作相应的块async
beforeAll(async () => await browser.waitForAngularEnabled(false))
【讨论】：
在某些情况下，为避免错误需要同时添加两个值。
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
您可以将它们添加到 spec.js 文件中。
describe('My first non angular class', function() {
it ('My function', function() {
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
或者按照@Mridul 的建议，将它们添加到 config.js 文件中。
exports.config = { 直接连接：真， 框架：'茉莉花'，
onPrepare: function () {
browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false
browser.waitForAngularEnabled(false); // for non-angular set false. default value is true
},
【讨论】：
就我个人而言，由于 DOM 元素没有及时正确加载，我提出的解决方案没有取得任何成功。
我尝试了很多方法来处理这种异步行为，包括 browser.wait 和 browser.isElementPresent，但没有一个是令人满意的。
诀窍是在 onPrepare 中使用 Protractor 从其方法返回的 Promises ：
onPrepare: () => {
browser.manage().window().maximize();
browser.waitForAngularEnabled(true).then(function () {
return browser.driver.get(baseUrl + '/auth/');
}).then(function () {
return browser.driver.findElement(by.name('login')).sendKeys('login');
}).then(function () {
return browser.driver.findElement(by.name('password')).sendKeys('password');
}).then(function () {
return browser.driver.findElement(by.name('submit')).click();
}).then(function () {
return true;
});
return browser.driver.wait(function () {
return browser.driver.getCurrentUrl().then(function (url) {
return /application/.test(url);
});
}, 10000);
},
我的灵感来自https://github.com/angular/protractor/blob/master/spec/withLoginConf.js
【讨论】：
在您的 .js 规范文件中添加以下 sn-p
beforeAll(function() {
browser.waitForAngularEnabled(false);
});
【讨论】：
在 conf.js 文件中添加以下代码
onPrepare: function () {
browser.ignoreSynchronization = true;
}
【讨论】：
在sn-p下面添加非角度应用：
app- browser.ignoreSynchronization = true;
【讨论】：
在你的 config.js 文件中使用下面的 sn-p 用于非 Angular 应用程序-
browser.ignoreSynchronization = true;
对于角度应用 -
browser.ignoreSynchronization = false;
【讨论】：
我正在开发aurelia web-app，这是一个类似于 Angular、React 的 FE 框架。在这个我使用量角器进行自动化。
Tech Stack 我的哪个项目：-
主要更改仅发生在配置文件中，如果有帮助，我可以在github 中添加代码，这是我在项目中使用的配置文件，非常适合我。 在我的wordpress 也发了一些博客，希望能有所帮助。
const reporter = require('cucumber-html-reporter');
exports.config = {
SELENIUM_PROMISE_MANAGER: false,
directConnect: true,
specs: ["./e2e/features/*/EndToEnd.feature"],
format: 'json:cucumberReport.json',
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
cucumberOpts: {
strict: true,
format: 'json:cucumberReport.json',
keepAlive: false,
require: [
'./e2e/hooks/*.ts',
'./e2e/stepDefinition/*/*.ts',
],
tags: '@Regression'
},
beforeLaunch: function () {
require('ts-node/register')
},
onPrepare: async () => {
await browser.waitForAngularEnabled(false);
await browser.ignoreSynchronization == true;
await browser.manage().window().maximize();
await browser.manage().timeouts().implicitlyWait(10000);
},
onComplete: async () => {
var options = {
theme: 'bootstrap',
jsonFile: './reports/cucumberReport.json',
output: './reports/cucumberReport.html',
reportSuiteAsScenarios: true,
launchReport: false,
screenshotsDirectory: './reports/screenshots',
storeScreenshots: true,
metadata: {
"Test Environment": "SAND-DEV-1",
"Platform": "Windows 10",
}
};
reporter.generate(options);
},
};
【讨论】：
您可以使用Testcafe 代替量角器进行e2e 测试。
优点：
【讨论】：