jak korzystać z Protractor w witrynie innej niż angularjs?

82

Znalazłem framework Protractor, który jest stworzony dla aplikacji internetowych AngularJS.

Jak mogę używać Protractora w witrynie, która nie korzysta z AngularJS?

Napisałem swój pierwszy test i Protractor uruchamia ten komunikat:

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
Abdelkrim
źródło

Odpowiedzi:

75

Jeśli test wymaga interakcji ze stroną inną niż kątowa, uzyskaj dostęp do instancji webdrivera bezpośrednio za pomocą browser.driver.

Przykład z dokumentacji Protractor

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
źródło
2
tylko głupie pytanie, by.idzmieniło się na By.id?
Val
7
@Val - global.by = global.By = protractor.By; (źródło - github.com/angular/protractor/commit/… )
Eitan Peer
Jak znaleźć element według klasy i innymi środkami witryn innych niż kątowe?
Easwaramoorthy K
@EaswaramoorthyK by.className. Zapoznaj się z dokumentacją
Murali KG
130

Innym podejściem jest ustawienie browser.ignoreSynchronization = true przed browser.get (...). Protractor nie czekałby na załadowanie Angulara i można by użyć zwykłej składni elementu (...).

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
źródło
5
Podobało mi się takie podejście do zachowania spójności kodu w całym zestawie testowym.
radość
4
Jest to zdecydowanie najlepsze podejście do pracy z kątomierzem na nie-kątowym. Jest na ten temat post na blogu, który wyjaśnia więcej rzeczy. Dla tych, którzy szukają E2E, jest również nightwatch.js , intern , casperjs , webdriver
Ciro Costa.
1
@Andrei A co z pageObjects. kiedy deklaruję elementy poza blokiem funkcjonalnym i próbuję uruchomić, wyświetla mi się fragment kodu NoSuchElementError: this.buttonOnLeftSide = browser.driver.findElement (by.className ('leftbutton')); this.iframe = 'emulatorFrame'; this.clickPlusSignOnTemplateEditor = function () {browser.driver.ignoreSynchronization = true; console.log ('hej'); browser.driver.switchTo (). frame (this.iframe); console.log ('wewnątrz iframe'); browser.sleep (3000); buttonOnLeftSide.click (); };
Nick
Po prostu umieść to tutaj na wypadek, gdyby ktoś miał taki sam problem jak mój. Miej świadomość tego podejścia, jest dobre, ale jeśli chcesz mieć szybkie niepowodzenie . W niektórych przypadkach / środowiskach test może trwać wiecznie, chociaż testy kończą się niepowodzeniem.
Linh Pham
mam jasmine.DEFAULT_TIMEOUT_INTERVAL po kliknięciu przycisku przesyłania. dowolny pomysł?
ji-ruh
16

waitForAngular powinno być teraz używane zamiast przestarzałej właściwości ignoreSynchronization.

Poniższe wskazówki waitForAngular są pobierane z dokumentacji Protractor dla limitów czasu:

Jak wyłączyć oczekiwanie na Angular

Jeśli chcesz przejść do strony, która nie używa Angular, możesz wyłączyć oczekiwanie na Angular, ustawiając `browser.waitForAngularEnabled (false). Na przykład:

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
źródło
jego zachowanie jest buggy
Muneem Habib
2

Aby przetestować w witrynie innej niż kątowa, należy usunąć synchronizację. w tym celu:

browser.ignoreSynchronisation = true;
browser.get('url');
losowa osoba
źródło
2

W niektórych przypadkach, aby uniknąć błędów, należy dodać obie wartości.

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

Możesz je dodać w pliku spec.js.

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

Lub zgodnie z sugestią @Mridul dodaj je w pliku config.js.

exports.config = {directConnect: true, framework: '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  
       },
Sameera De Silva
źródło
W drugim podejściu załóżmy, że nie masz tylko skryptów kątowych.
Sameera De Silva
1

Osobiście nie odniosłem sukcesu z proponowanymi rozwiązaniami, ponieważ elementy DOM nie zostały poprawnie załadowane na czas.

Wypróbowałem wiele sposobów radzenia sobie z tym asynchronicznym zachowaniem, w tym browser.wait z browser.isElementPresent, ale żaden z nich nie był satysfakcjonujący.

Na czym polega sztuczka polegająca na tym, że Protractor zwrócił Promises z jego metod w 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);
},

Zainspirował mnie https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

Matthieu Dsprz
źródło
1
Czy nie powinno to być browser.waitForAngularEnabled (false) zamiast true?
onluiz
1

dodaj poniższy fragment kodu do pliku specyfikacji .js

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});
Anil Kumar
źródło
1

Dodaj następujący fragment kodu w pliku conf.js.

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }
Mridul
źródło
1

Dodaj poniższy fragment kodu dla aplikacji innych niż kątowe:

app- browser.ignoreSynchronization = true;
Muhammad Irfan
źródło
0

Użyj poniższego fragmentu kodu w pliku config.js dla aplikacji innych niż kątowe:

browser.ignoreSynchronization = true;

i do zastosowań kątowych -

browser.ignoreSynchronization = false;
Muhammad Irfan
źródło
0

Pracuję nad aplikacją internetową aurelia, która jest frameworkiem FE podobnym do Angular, React. W tym używam Protractor do automatyzacji.

Tech Stack, który z mojego projektu: -

  • Kątomierz
  • Maszynopis
  • Obiekt strony modalny
  • Ogórek
  • Chai
  • węzeł
  • npm
  • Kod VS (IDE)

Główna zmiana zachodzi tylko w pliku konfiguracyjnym, mogę dodać kod na githubie, jeśli to pomogłoby, oto plik konfiguracyjny, którego używam w moim projekcie, który działa idealnie dla mnie. Opublikowałem również kilka blogów w moim WordPressie , mam nadzieję, że to może być pomocne.

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
źródło
-5

Zamiast Kątomierz możesz użyć do testowania e2e Testcafe .
Plusy:

  • Składnia ES2016
  • nie potrzeba dodatkowych zależności, konfiguracji i wtyczek przeglądarki
  • elastyczne selektory
  • łatwe ustawienie
mlosev
źródło
6
drogi @mlosev, to nie odpowiada bezpośrednio na pytanie. pytanie brzmi „jak używać protektora…”, a nie „jakiej biblioteki użyć zamiast Protektora” :-)
Abdelkrim