Uzyskiwanie błędu: Błąd podczas oczekiwania na kątomierz zsynchronizować ze stroną: {}

Question

Mój plik e2e.conf.coffee jest:

exports.config = 
    baseUrl: 'http://localhost:9001' 
    specs: [ 
    'e2e/**/*.coffee' 
    ] 

    framework: 'jasmine' 

mam pracę i nasłuchuje na porcie 9001. węzeł projektu

Mój test jest :

describe 'Happy Path', -> 
    it 'should show the login page', -> 
    console.log browser 

    expect(browser.getLocationAbsUrl()).toMatch("/view1"); 
    it 'should fail to login', -> 
    setTimeout -> 
     console.log "FAIL!" 
    , 1200 

i błąd, który pojawia się:

Failures: 

    1) Happy Path should show the login page 
    Message: 
    Error: Error while waiting for Protractor to sync with the page: {} 
    Stacktrace: 
    Error: Error while waiting for Protractor to sync with the page: {} 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
==== async task ==== 
WebDriver.executeScript() 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
==== async task ==== 
Asynchronous test function: it("should show the login page") 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous> 
    at <anonymous>==== async task ==== 

Co robię źle?

Answer 1

(bardzo) krótka wersja: użyj browser.driver.get zamiast browser.get.

Dłuższa wersja: Kątomierz to w zasadzie otoki wokół Selenium i kodu Javascript WebDriver. Protractor dodaje kod, aby poczekać, aż Angular osiągnie "ustalenie" (tj. Zakończyć przeglądanie pętli $ digest) przed kontynuowaniem kodu testowego. Jeśli jednak twoja strona nie ma na niej Angula, to Kątomierz będzie czekał "na zawsze" (właściwie tylko do czasu, kiedy upłynie limit czasu), czekając na rozstrzygnięcie Angulara.

Przedmiotem browser że kątomierz naraża do testu jest instancją kątomierz (to znaczy, jeśli widzisz stare odpowiedzi na przepełnienie stosu z var ptor = protractor.getInstance(); ptor.doSomething(), a następnie można wymienić ptor z browser w tych starych odpowiedzi). Kątomierz ujawnia również zapakowany interfejs Selenium WebDriver API jako browser.driver. Więc jeśli zadzwonisz pod numer browser.get, używasz Kątomierza (i będzie czekać na ustabilizowanie się Angular), ale jeśli zadzwonisz pod numer browser.driver.get, używasz Selenium (który nie wie o Angular).

W większości przypadków będziesz testować strony Angular, więc będziesz chciał użyć browser.get, aby uzyskać korzyści z Kątomierza. Ale jeśli twoja strona logowania w ogóle nie używa Angulara, powinieneś używać browser.driver.get zamiast browser.get w testach testujących twoją stronę logowania. Pamiętaj, że w pozostałej części testu będziesz musiał użyć interfejsu API Selenium, a nie API protaratora: na przykład, jeśli masz gdzieś na stronie element wejściowy HTML o id = "nazwa użytkownika", będziesz chciał aby uzyskać do niego dostęp za pomocą browser.driver.findElement(by.id('username')) zamiast element(by.model('username')).

Aby uzyskać więcej przykładów, zobacz this example z zestawu testów kątomierza (lub spróbuj this link, jeśli poprzednie znikną). Zobacz także the Protractor docs które stwierdzają:

Protractor will fail when it cannot find the Angular library on a page. If your test needs to interact with a non-angular page, access the webdriver instance directly with browser.driver .

Przykład kodu: W próbie logowania powyżej, co chcesz zrobić coś takiego:

describe 'Logging in', -> 
    it 'should show the login page', -> 
    browser.driver.get "http://my.site/login.html" 
    // Wait for a specific element to appear before moving on 
    browser.driver.wait -> 
     browser.driver.isElementPresent(by.id("username")) 
    , 1200 
    expect(browser.driver.getCurrentUrl()).toMatch("/login.html"); 
    it 'should login', -> 
    // We're still on the login page after running the previous test 
    browser.driver.findElement(by.id("username")).sendKeys("some_username") 
    browser.driver.findElement(by.id("password")).sendKeys("some_password") 
    browser.driver.findElement(by.xpath('//input[@type="submit"]')).click() 

(jedno zastrzeżenie: nie robiłem dużo kodu CoffeeScript i jest to całkowicie możliwe, że popełniłem błąd składni CoffeeScript w powyższym kodzie.Możesz chcieć sprawdzić jego składnię przed ślepym skopiowaniem i wklejeniem.I am, jednak pewny w logice, ponieważ jest to skopiowane i wklejone prawie dosłownie z mojego kodu Javascript th przy testowaniu nieagresywnej strony logowania.)

Answer 2

Jeśli potrzebujesz przeglądarki.otrzymujemy i otrzymujemy ten błąd, najprawdopodobniej jest to właściwość rootElement w pliku konfiguracyjnym kątomierza.

Domyślnie kątomierz zakłada, że ​​deklaracja ng-app znajduje się na elemencie BODY. Jednak w naszym przypadku może zostać zadeklarowany gdzie indziej w DOM. Więc musimy przypisać selektor tego elementu do nieruchomości rootElement:

// rootElement: 'body', // default, but does not work in my case 
rootElement: '.my-app', // or whatever selector the ng-app element has 

Odpowiednie HTML:

<div ng-app="myApp" class="my-app"> 

skopiowane odpowiedź od http://www.tomgreuter.nl/tech/2014/03/timing-errors-with-angular-protractor-testing/

Answer 3

mam ten błąd, zbyt, ale w moim przypadku moje testy działały i ten błąd wystąpił po ich rozszerzeniu.

Okazuje się, że ten błąd może wystąpić, jeśli spróbujesz wywołać metodę getText() w bloku opisu zamiast w testach. Moja konfiguracja była następująca:

describe('Test Edit Functionality', function() { 
    var testEntry = $$('.list-entry').first(), 
     testEntryOldName = testEntry.getText(); 

    it('Should keep old name if edit is aborted', [...]); 
}); 

To spowodowało błąd Error while waiting for Protractor to sync with the page: {}.

Naprawiłem go, przesuwając assigment w beforeEach bloku

describe('Test Delete Functionality', function() { 
    var testEntry = $$('.list-entry').first(), 
     testEntryOldName; 

    beforeEach(function() { 
     testEntryOldName = testEntry.getText(); 
    }); 
}); 

Albo, może być lepiej, przypisać go w szczególnych przypadkach testowania trzeba tę wartość (jeśli nie trzeba go w ogóle).

Answer 4

Nie wiem gdzie wziąłem kawałki, które wystawią tę odpowiedź w tym momencie, ale to, co działa dla mnie:

1. Dodaj class='ng-app' do elementu, który zawiera aplikację.

<div ng-app="myApp" ng-controller="myController" class="ng-app"></div> 

2. Dodaj rootElement do protractor.conf.

exports.config = { 
    specs: ['your-spec.js'], 
    rootElement: ".ng-app" 
}; 

3. Zastosowanie browser.driver.get nie browser.get.

describe('foobar element', function() { 
    it('should be "baz" after view is initialized', function() { 
    browser.driver.get('http://localhost/view'); 

    var inputBox = $('input[name=foobar]'); 
    expect(inputBox.getAttribute('value')).toEqual("baz"); 
    }); 
});