angularjs 이외의 웹사이트에서 어떻게 Extractor를 사용하는가?

angularjs 이외의 웹사이트에서 어떻게 Extractor를 사용하는가?

Angular용으로 만들어진 Protractor 프레임워크를 찾았습니다.JS 웹 어플리케이션

AngularJS를 사용하지 않는 웹사이트에서 어떻게 Protractor를 사용할 수 있습니까?

첫 번째 테스트를 작성했는데 프로젝터가 다음 메시지를 트리거합니다.

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded

또 다른 접근법은browser.ignoreSynchronization = true browser.get(...)보다 앞에 표시됩니다.각도 로딩이 대기하지 않으므로 일반 요소(...) 구문을 사용할 수 있습니다.

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();

테스트가 각도가 아닌 페이지와 상호작용해야 하는 경우 웹 드라이버인스턴스에 직접 접속합니다.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();

이제 사용되지 않는 ignoreSynchronization 속성 대신 waitForAngular를 사용해야 합니다.

다음 waitForAngular 지침은 시간 초과에 대해 Protractor 문서에서 인용한 것입니다.

Angular 대기 비활성화 방법

Angular를 사용하지 않는 페이지로 이동해야 할 경우 'browser'를 설정하여 Angular 대기 기능을 해제할 수 있습니다.wait For Angular Enabled(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');

잊어버려ignoreSynchronization!!!! 더 이상 연장기에서 시작하는 연장기에 존재하지 않습니다.5.3.0

browser.waitForAngularEnabled(false)대신 사용해야 합니다.

사용방법 단계별 설명

각도 조절 기능이 내장되어 있기 때문에 각도 조절이 가능합니다.단, 페이지가 각도 연장기가 아닌 경우 타임아웃오류가 발생할 때까지 정지하기 때문에 각도 이외의 페이지를 테스트하려면 해당 기능을 비활성화해야 합니다.페이지가 각진 경우에도 모서리 케이스가 있지만, 이 기능은 여전히 돌출기 오류를 발생시킵니다.아래 단계를 수행하여 각도 대기 중인 프로젝터를 비활성화하는 시기를 확인합니다.

1. 페이지가 Angular인지 확인: 브라우저와 'console' 탭 실행 명령어 내에서 개발 콘솔을 엽니다.

getAllAngularTestabilities()

출력이 다음과 같은 경우getAllAngularTestabilities is not defined페이지가 각이지지 않으면 마지막 단계로 이동하여 내장 대기 기능을 비활성화합니다.

2. 콘솔에서 다음 명령을 실행합니다.

getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks
getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks

이들 중 하나가 반환되면true(마이크로 태스크 또는 매크로 태스크가 보류 중인 경우) 마지막 단계로 이동합니다.전부라면false축하하네, 각도 조절을 위해 내장된 절단기를 사용할 수 있어.그러나 내가 좋아하지 않는 경우 마지막 단계를 읽고 비활성화하는 방법에 대해 알아보십시오.

3. 위에서 언급한 명령을 실행합니다. 그러나! 이 명령어는 약속을 반환합니다. 처리되어야 하며, 가능하면 다음을 사용합니다.await(키워드)

await browser.waitForAngularEnabled(false)

할 수 .「 」 it 「」, 「」의beforeAll 의 경우, 「」onPrepare를 참조해 주세요..await 블록을 async

beforeAll(async () => await browser.waitForAngularEnabled(false))

비각 부위에서 테스트하려면 동기화를 제거해야 합니다.그 경우는, 다음과 같이 사용합니다.

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 Recommended로 config.js 파일에 추가합니다.

exports.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.isElementPresent를 사용하여 대기했지만 어느 것도 만족스럽지 않았습니다.

protractor가 onPrepare 메서드에서 Promise를 반환한 것은 무엇입니까?

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에서 영감을 받았습니다.

다음 스니펫을 .disc 스펙파일에 추가합니다.

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});

conf.js 파일에 다음 코드를 추가합니다.

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }

각도가 없는 어플리케이션에 대해서는, 다음의 스니펫을 추가해 주세요.

app- browser.ignoreSynchronization = true;

각도가 아닌 어플리케이션의 경우 config.js 파일에서 다음 스니펫을 사용합니다.

browser.ignoreSynchronization = true;

각도 적용의 경우 -

browser.ignoreSynchronization = false;

저는 Angular, React와 유사한 FE 프레임워크인 aurelia web-app을 만들고 있습니다.여기서는 자동화를 위해 프로젝터를 사용하고 있습니다.

Tech Stack 프로젝트:

• 프로젝터
• 타이프 스크립트
• 페이지 오브젝트모달
• 오이
• 차이
• 노드
• npm
• VS 코드(IDE)

주요 변경은 컨피규레이션파일에서만 발생합니다.이것이 도움이 된다면 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);
    },
};

e2e 테스트에 프로젝터 대신 를 사용할 수 있습니다.

• ES2016 구문
• 의존관계, 구성 및 브라우저 플러그인 추가 불필요
• 플렉시블 셀렉터
• 간단한 셋업

언급URL : https://stackoverflow.com/questions/20927652/how-to-use-protractor-on-non-angularjs-website