AngularJS web uygulamaları için yapılmış Açıölçer çerçevesi buldum.
AngularJS kullanmayan bir web sitesinde Protractor'ı nasıl kullanabilirim?
İlk testimi yazdım ve Açıölçer bu mesajı tetikliyor:
Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Yanıtlar:
Testinizin açısal olmayan bir sayfayla etkileşime girmesi gerekiyorsa, webdriver örneğine doğrudan ile erişin browser.driver.
İletki belgelerinden örnek
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();
Diğer bir yaklaşım, browser.get (...) 'den browser.ignoreSynchronization = true önce ayarlamaktır . İletki Açısal yüklemeyi beklemez ve olağan öğe (...) sözdizimini kullanabilirsiniz.
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();
Kullanımdan kaldırılan ignoreSynchronization özelliği yerine waitForAngular artık kullanılmalıdır.
Aşağıdaki waitForAngular kılavuzu, zaman aşımları için İletki belgelerinden alınır:
Angular için beklemeyi devre dışı bırakma
Angular kullanmayan bir sayfaya gitmeniz gerekirse, `browser.waitForAngularEnabled (false) ayarını yaparak Angular'ı beklemeyi kapatabilirsiniz. Örneğin:
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');
Açısal olmayan sitede test etmek için senkronizasyonu kaldırmalısınız. bunun için aşağıdakileri kullanın:
browser.ignoreSynchronisation = true;
browser.get('url');
Bazı durumlarda, hataları önlemek için her iki değeri de eklemeniz gerekir.
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
Bunları spec.js dosyasına ekleyebilirsiniz.
describe('My first non angular class', function() {
it ('My function', function() {
browser.driver.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);
Veya @Mridul'un Önerdiği olarak bunları config.js dosyasına ekleyin.
export.config = {directConnect: true, çerçeve: 'yasemin',
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
},
Kişisel olarak, DOM öğeleri zamanında düzgün bir şekilde yüklenmediğinden önerilen çözümlerle herhangi bir başarı elde edemedim.
Bu eşzamansız davranışı ele almak için browser.wait with browser.isElementPresent dahil birçok yolu denedim, ancak hiçbiri tatmin edici değildi.
Açığa vurmanın püf noktası ne oldu?
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'den ilham aldım
.js spec dosyanıza aşağıdaki pasajı ekleyin
beforeAll(function() {
browser.waitForAngularEnabled(false);
});
Açısal olmayan uygulamalar için aşağıdaki pasajı ekleyin:
app- browser.ignoreSynchronization = true;
Açısal olmayan uygulamalar için config.js dosyanızda aşağıdaki pasajı kullanın-
browser.ignoreSynchronization = true;
ve açısal uygulama için -
browser.ignoreSynchronization = false;
Angular , React'e benzer bir FE çerçevesi olan aurelia web uygulaması üzerinde çalışıyorum . Bunda otomasyon için Açıölçer kullanıyorum.
Tech Stack projemden hangisi: -
Ana değişiklik sadece yapılandırma dosyasında gerçekleşir, yardımcı olursa github'a kod ekleyebilirim , işte benim için mükemmel çalışan projemde kullandığım yapılandırma dosyası. Benim wordpress'imde de bazı bloglar yayınladım , bunun yardımcı olabileceğini umuyorum.
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);
},
};
İletki yerine, Testcafe'i test etmek için e2e'yi kullanabilirsiniz .
Artıları:
by.idolarakBy.idmı değişti ?