답변:
테스트가 각도가 아닌 페이지와 상호 작용해야하는 경우 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.get (...) browser.ignoreSynchronization = true 전에 설정하는 것 입니다. 각도기는 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();
이제 더 이상 사용되지 않는 ignoreSynchronization 속성 대신 waitForAngular를 사용해야합니다.
다음 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.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 Suggested로 config.js 파일에 추가하십시오.
exports.config = {directConnect : true, 프레임 워크 : '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
},
개인적으로 DOM 요소가 제때 제대로로드되지 않았기 때문에 제안 된 솔루션으로 성공하지 못했습니다.
browser.isElementPresent를 사용하는 browser.wait를 포함하여 비동기 동작을 처리하는 많은 방법을 시도했지만 만족스럽지 않았습니다.
트릭은 Protractor를 사용하여 onPrepare의 메서드에서 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 에서 영감을 얻었습니다.
Angular, React와 유사한 FE 프레임 워크 인 aurelia 웹 앱 에서 작업 중입니다. 여기에서는 자동화를 위해 각도기를 사용하고 있습니다.
내 프로젝트의 Tech Stack :-
주요 변경 사항은 구성 파일에서만 발생하며 도움이 될 경우 github 에 코드를 추가 할 수 있습니다 . 여기에 제 프로젝트에서 사용중인 구성 파일이 있습니다. 내 워드 프레스 에 블로그도 게시했습니다 . 도움이 되길 바랍니다.
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);
},
};
by.id변경되었습니다By.id.