Wie benutzt man Protractor auf einer Website ohne Winkel?

82

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
javascript  asp.net  angularjs  testing  protractor 
— Abdelkrim
quelle

Antworten:

75

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();
— Eitan Peer
quelle
2
nur eine dumme frage, hat sich by.idgeändert zu By.id?
— Val
7
@Val - global.by = global.By = Winkelmesser.By; (Quelle - github.com/angular/protractor/commit/… )
— Eitan Peer
Wie finde ich ein Element nach Klasse und anderen Mitteln für nicht eckige Stellen?
— Easwaramoorthy K
@EaswaramoorthyK by.className. Siehe Dokumente
— Murali KG
130

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();
— Andrei Beziazychnyi
quelle
5
Ich mochte diesen Ansatz, um den Code im gesamten Testanzug konsistent zu halten.
— Freude
4
Dies ist definitiv der beste Ansatz, wenn es sich um Winkelmesser handelt, die nicht eckig sind. Es gibt einen Blog-Beitrag dazu, der einige weitere Dinge erklärt. Für diejenigen, die nach E2E suchen, gibt es auch nightwatch.js , Praktikant , casperjs , Webdriver
— Ciro Costa
1
@Andrei Wie wäre es mit pageObjects. Wenn ich Elemente außerhalb des Funktionsblocks deklariere und versuche, sie auszuführen, wird mir ein NoSuchElementError-Code-Snippet angezeigt: this.buttonOnLeftSide = browser.driver.findElement (by.className ('leftbutton')); this.iframe = 'emulatorFrame'; this.clickPlusSignOnTemplateEditor = function () {browser.driver.ignoreSynchronization = true; console.log ('hey'); browser.driver.switchTo (). frame (this.iframe); console.log ('inside iframe'); browser.sleep (3000); buttonOnLeftSide.click (); };
— Nick
Setzen Sie es einfach hier ein, falls jemand das gleiche Problem wie ich hat. Bitte beachten Sie diesen Ansatz, es ist gut, aber wenn Sie schnell versagen möchten . In einigen Fällen / Umgebungen kann der Test für immer ausgeführt werden, obwohl die Tests fehlgeschlagen sind.
— Linh Pham
Ich habe jasmine.DEFAULT_TIMEOUT_INTERVAL, nachdem ich auf die Schaltfläche "Senden" geklickt habe. irgendeine Idee?
— Ji-Ruh
16

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');
— MatthewThomasGB
quelle
sein Verhalten ist
— fehlerhaft
2

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

browser.ignoreSynchronisation = true;
browser.get('url');
— zufälliger Typ
quelle
2

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  
       },
— Sameera De Silva
quelle
Im zweiten Ansatz wird davon ausgegangen, dass Sie nur keine eckigen Skripte haben.
— Sameera De Silva
1

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

— Matthieu Dsprz
quelle
1
Sollte es nicht browser.waitForAngularEnabled (false) statt true sein?
— Onluiz
1

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

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});
— Anil kumar
quelle
1

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

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }
— Mridul
quelle
1

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

app- browser.ignoreSynchronization = true;
— Muhammad Irfan
quelle
0

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;
— Muhammad Irfan
quelle
0

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);
    },
};
— Khyati Sehgal
quelle
-5

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
— mlosev
quelle
6
Lieber @mlosev, dies beantwortet die Frage nicht direkt. Die Frage ist "wie man Protectorrator benutzt ..." und nicht "welche Bibliothek soll ich anstelle von Protector verwenden" :-)
— Abdelkrim
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.