Znalazłem framework Protractor, który jest stworzony dla aplikacji internetowych AngularJS.
Jak mogę używać Protractora w witrynie, która nie korzysta z AngularJS?
Napisałem swój pierwszy test i Protractor uruchamia ten komunikat:
Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Odpowiedzi:
Jeśli test wymaga interakcji ze stroną inną niż kątowa, uzyskaj dostęp do instancji webdrivera bezpośrednio za pomocą browser.driver.
Przykład z dokumentacji Protractor
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.className. Zapoznaj się z dokumentacją
Innym podejściem jest ustawienie browser.ignoreSynchronization = true przed browser.get (...). Protractor nie czekałby na załadowanie Angulara i można by użyć zwykłej składni elementu (...).
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 powinno być teraz używane zamiast przestarzałej właściwości ignoreSynchronization.
Poniższe wskazówki waitForAngular są pobierane z dokumentacji Protractor dla limitów czasu:
Jak wyłączyć oczekiwanie na Angular
Jeśli chcesz przejść do strony, która nie używa Angular, możesz wyłączyć oczekiwanie na Angular, ustawiając `browser.waitForAngularEnabled (false). Na przykład:
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');
Aby przetestować w witrynie innej niż kątowa, należy usunąć synchronizację. w tym celu:
browser.ignoreSynchronisation = true;
browser.get('url');
W niektórych przypadkach, aby uniknąć błędów, należy dodać obie wartości.
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
Możesz je dodać w pliku spec.js.
describe('My first non angular class', function() {
it ('My function', function() {
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
Lub zgodnie z sugestią @Mridul dodaj je w pliku config.js.
exports.config = {directConnect: true, framework: 'jasmine',
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
},
Osobiście nie odniosłem sukcesu z proponowanymi rozwiązaniami, ponieważ elementy DOM nie zostały poprawnie załadowane na czas.
Wypróbowałem wiele sposobów radzenia sobie z tym asynchronicznym zachowaniem, w tym browser.wait z browser.isElementPresent, ale żaden z nich nie był satysfakcjonujący.
Na czym polega sztuczka polegająca na tym, że Protractor zwrócił Promises z jego metod w 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);
},
Zainspirował mnie https://github.com/angular/protractor/blob/master/spec/withLoginConf.js
dodaj poniższy fragment kodu do pliku specyfikacji .js
beforeAll(function() {
browser.waitForAngularEnabled(false);
});
Dodaj poniższy fragment kodu dla aplikacji innych niż kątowe:
app- browser.ignoreSynchronization = true;
Użyj poniższego fragmentu kodu w pliku config.js dla aplikacji innych niż kątowe:
browser.ignoreSynchronization = true;
i do zastosowań kątowych -
browser.ignoreSynchronization = false;
Pracuję nad aplikacją internetową aurelia, która jest frameworkiem FE podobnym do Angular, React. W tym używam Protractor do automatyzacji.
Tech Stack, który z mojego projektu: -
Główna zmiana zachodzi tylko w pliku konfiguracyjnym, mogę dodać kod na githubie, jeśli to pomogłoby, oto plik konfiguracyjny, którego używam w moim projekcie, który działa idealnie dla mnie. Opublikowałem również kilka blogów w moim WordPressie , mam nadzieję, że to może być pomocne.
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);
},
};
Zamiast Kątomierz możesz użyć do testowania e2e Testcafe .
Plusy:
by.idzmieniło się naBy.id?