Wie benutzt man Protractor auf einer Website ohne Winkel?

Ich habe ein Winkelmesser-Framework gefunden, das für AngularJS-Webanwendungen entwickelt wurde.

Wie kann ich Protractor auf einer Website verwenden, auf der AngularJS nicht verwendet wird?

Ich habe meinen ersten Test geschrieben und der Winkelmesser löst diese Meldung aus:

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

Wenn Ihr Test mit einer nicht eckigen Seite interagieren muss, greifen Sie direkt mit auf die Webdriver-Instanz zu browser.driver.

Beispiel aus Winkelmesser-Dokumenten

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

Ein anderer Ansatz besteht darin, browser.ignoreSynchronization = true vor browser.get (...) zu setzen. Der Winkelmesser würde nicht auf das Laden von Angular warten und Sie könnten die übliche Elementsyntax (...) verwenden.

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 sollte jetzt anstelle der veralteten Eigenschaft ignoreSynchronization verwendet werden.

Die folgenden waitForAngular-Anleitungen stammen aus den Winkelmesser-Dokumenten für Zeitüberschreitungen:

So deaktivieren Sie das Warten auf Angular

Wenn Sie zu einer Seite navigieren müssen, die Angular nicht verwendet, können Sie das Warten auf Angular deaktivieren, indem Sie `browser.waitForAngularEnabled (false) festlegen. Zum Beispiel:

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

Um an einer nicht eckigen Stelle zu testen, sollten Sie die Synchronisation entfernen. Verwenden Sie dazu Folgendes:

browser.ignoreSynchronisation = true;
browser.get('url');

In einigen Fällen müssen zur Vermeidung von Fehlern beide Werte hinzugefügt werden.

 browser.driver.ignoreSynchronization = true;
 browser.waitForAngularEnabled(false); 

Sie können sie in der Datei spec.js hinzufügen.

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);

Oder fügen Sie sie wie von @Mridul vorgeschlagen in die Datei config.js ein.

exports.config = {directConnect: true, Framework: 'Jasmin',

  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  
       },

Persönlich hatte ich mit den vorgeschlagenen Lösungen keinen Erfolg, da die DOM-Elemente nicht rechtzeitig geladen wurden.

Ich habe viele Möglichkeiten ausprobiert, mit diesem asynchronen Verhalten umzugehen, einschließlich browser.wait mit browser.isElementPresent, aber keine davon war zufriedenstellend.

Was hat der Trick getan, ist die Verwendung von Protractor zurückgegebenen Versprechen von seinen Methoden in 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);
},

Ich wurde von https://github.com/angular/protractor/blob/master/spec/withLoginConf.js inspiriert

Fügen Sie das folgende Snippet in Ihre .js-Spezifikationsdatei ein

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

Fügen Sie der Datei conf.js den folgenden Code hinzu

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

Fügen Sie das folgende Snippet für nicht eckige Anwendungen hinzu:

app- browser.ignoreSynchronization = true;

Verwenden Sie das folgende Snippet in Ihrer config.js-Datei für nicht eckige Anwendungen.

browser.ignoreSynchronization = true;

und für eckige Anwendung -

browser.ignoreSynchronization = false;

Ich arbeite an Aurelia Web-App, einem FE-Framework ähnlich Angular, React. Hier verwende ich Winkelmesser für die Automatisierung.

Tech Stack welches meiner Projekte: -

• Winkelmesser
• Typoskript
• Seitenobjekt Modal
• Gurke
• Chai
• Knoten
• npm
• VS-Code (IDE)

Die Hauptänderung erfolgt nur in der Konfigurationsdatei. Ich kann Code in Github hinzufügen, wenn dies hilfreich ist. Hier ist die Konfigurationsdatei, die ich in meinem Projekt verwende und die perfekt für mich funktioniert. Habe auch einige Blogs in meinem WordPress gepostet , hoffe das kann hilfreich sein.

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);
    },
};

Anstelle von Winkelmesser können Sie das Testcafe zum Testen von e2e verwenden .
Vorteile:

• ES2016-Syntax
• Keine zusätzlichen Abhängigkeiten, Konfigurationen und Browser-Plugins erforderlich
• flexible Selektoren
• Einfache Einstellung