Я знайшов фреймворк Protractor, який створений для веб-додатків AngularJS.
Як я можу використовувати Protractor на веб-сайті, який не використовує AngularJS?
Я написав свій перший тест, і транспортир запускає це повідомлення:
Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Відповіді:
Якщо тесту потрібно взаємодіяти з некутовою сторінкою, зверніться безпосередньо до екземпляра webdriver за допомогою browser.driver.
Приклад із документації транспортира
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();
Інший підхід - встановити browser.ignoreSynchronization = true перед browser.get (...). Транспортер не буде чекати завантаження Angular, і ви можете використовувати звичайний синтаксис елемента (...).
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();
waitForAngular тепер слід використовувати замість застарілого властивості ignoreSynchronization.
Наступні вказівки waitForAngular взяті з документів транспортира для таймаутів:
Як вимкнути очікування Angular
Якщо вам потрібно перейти на сторінку, яка не використовує Angular, ви можете вимкнути очікування Angular, встановивши `browser.waitForAngularEnabled (false). Наприклад:
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');
У деяких випадках, щоб уникнути помилок, потрібно додати обидва значення.
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.
export.config = {directConnect: true, framework: 'жасмин',
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:
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
beforeAll(function() {
browser.waitForAngularEnabled(false);
});
Додайте нижче фрагмент для некутових додатків:
app- browser.ignoreSynchronization = true;
Використовуйте фрагмент нижче у вашому файлі config.js для некутових програм-
browser.ignoreSynchronization = true;
а для кутового застосування -
browser.ignoreSynchronization = false;
Я працюю над веб-додатком aurelia, який є фреймворком FE, подібним до Angular, React. У цьому я використовую транспортир для автоматизації.
Технічний стек, який з мого проекту: -
Основна зміна відбувається лише у файлі конфігурації, я можу додати код у 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);
},
};
Замість транспортира ви можете використовувати для тестування e2e Testcafe .
Плюси:
by.idзмінилося наBy.id?