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
javascript
asp.net
angularjs
testing
protractor
Abdelkrim
źródło
źródło
by.id
zmieniło się naBy.id
?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();
źródło
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:
źródło
Aby przetestować w witrynie innej niż kątowa, należy usunąć synchronizację. w tym celu:
browser.ignoreSynchronisation = true; browser.get('url');
źródło
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 },
źródło
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
źródło
dodaj poniższy fragment kodu do pliku specyfikacji .js
beforeAll(function() { browser.waitForAngularEnabled(false); });
źródło
Dodaj następujący fragment kodu w pliku conf.js.
onPrepare: function () { browser.ignoreSynchronization = true; }
źródło
Dodaj poniższy fragment kodu dla aplikacji innych niż kątowe:
app- browser.ignoreSynchronization = true;
źródło
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;
źródło
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); }, };
źródło
Zamiast Kątomierz możesz użyć do testowania e2e Testcafe .
Plusy:
źródło