angularjs e2e - unit - Se produce un error mientras se espera que el transportador se sincronice con la página con la prueba básica del transportador
unit test angular 4 (8)
describe(''my homepage'', function() {
var ptor = protractor.getInstance();
beforeEach(function(){
// ptor.ignoreSynchronization = true;
ptor.get(''http://localhost/myApp/home.html'');
// ptor.sleep(5000);
})
describe(''login'', function(){
var email = element.all(protractor.By.id(''email''))
, pass = ptor.findElement(protractor.By.id(''password''))
, loginBtn = ptor.findElement(protractor.By.css(''#login button''))
;
it(''should input and login'', function(){
// email.then(function(obj){
// console.log(''email'', obj)
// })
email.sendKeys(''[email protected]'');
pass.sendKeys(''shakalakabam'');
loginBtn.click();
})
})
});
devuelve el código anterior
Error: Error while waiting for Protractor to sync with the page: {}
y no tengo idea de por qué esto es, ptor cargar la página correctamente, parece ser la selección de los elementos que falla.
A SSHMSH:
Gracias, casi tiene razón, y me dio la filosofía correcta, así que la clave es ptor.sleep (3000) para que cada página espere hasta que ptor esté sincronizado con el proyecto.
El rootElement del objeto rootElement definido en su archivo de configuración del transportador debe coincidir con el elemento que contiene su directiva ng-app . Esto no tiene que ser una identificación única del elemento: ''div'' es suficiente si la directiva está en un div , como en mi caso.
Desde referenceConf.js :
// Selector for the element housing the angular app - this defaults to
// body, but is necessary if ng-app is on a descendant of <body>
rootElement: ''div'',
Comencé con Protractor observando la excelente conferencia de egghead.io , donde utiliza un exports.config condensado. exports.config . Dado que rootElement predeterminado en el body , no hay ninguna pista sobre qué es lo que está mal en su configuración si no comienza con una copia de la configuración de referencia proporcionada, e incluso entonces
Error al esperar que el Transportador se sincronice con la página: {}
El mensaje no da mucho de una pista.
En mi caso, encontré el error con el siguiente código:
describe("application", function() {
it("should set the title", function() {
browser.getTitle().then(function(title) {
expect(title).toEqual("Welcome");
});
});
});
Arreglado haciendo esto:
describe("application", function() {
it("should set the title", function() {
browser.get("#/home").then(function() {
return browser.getTitle();
}).then(function(title) {
expect(title).toEqual("Welcome");
});
});
});
En otras palabras, me estaba olvidando de navegar a la página que quería probar, por lo que Protractor tenía problemas para encontrar Angular. D''oh!
Estaba recibiendo este error:
Falló: Error al esperar que el Transportador se sincronice con la página: "window.angular no está definido. Esto podría deberse a que esta no sea una página angular o porque su prueba involucra la navegación del lado del cliente, que puede interferir con el arranque del Transportador. Ver http://git.io/v4gXM para más detalles "
La solución fue llamar a page.navigateTo() antes de page.getTitle() .
Antes de:
import { AppPage } from ''./app.po'';
describe(''App'', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it(''should have the correct title'', () => {
expect(page.getTitle()).toEqual(''...'');
})
});
Después:
import { AppPage } from ''./app.po'';
describe(''App'', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
page.navigateTo();
});
it(''should have the correct title'', () => {
expect(page.getTitle()).toEqual(''...'');
})
});
Estoy usando ChromeDriver y el error anterior generalmente ocurre en la primera prueba. Me las he arreglado para evitarlo así:
ptor.ignoreSynchronization = true;
ptor.get(targetUrl);
ptor.wait(
function() {
return ptor.driver.getCurrentUrl().then(
function(url) {
return targetUrl == url;
});
}, 2000, ''It/'s taking too long to load '' + targetUrl + ''!''
);
Esencialmente, está esperando que la URL actual del navegador se convierta en lo que pidió y permita que 2s ocurra esto. Probablemente quiera cambiar ignoreSynchronization = false después, posiblemente envolviéndolo en un ptor.wait(...) . Solo preguntándome, sería descomentar el ptor.sleep(5000); ¿no ayuda?
EDITAR: Después de alguna experiencia con Promise / Deferred me he dado cuenta de que la forma correcta de hacer esto sería:
loginBtn.click().then(function () {
ptor.getCurrentUrl(targetUrl).then(function (newURL){
expect(newURL).toBe(whatItShouldBe);
});
});
Tenga en cuenta que si está cambiando la URL (es decir, al pasar de la página activada de AngularJS actual a otra, lo que implica que la biblioteca de AngularJS necesita recargarse e iniciarse), al menos en mi experiencia, no hay manera de evitar al ptor.sleep(...) llamada. Lo anterior solo funcionará si te quedas en la misma página Angular, pero cambiando la parte de la URL después del hashtag.
Recibí el mismo mensaje de error (Angular 1.2.13). Mis pruebas se iniciaron demasiado pronto y Protractor no pareció esperar a que se cargara Angular.
Parecía que había mal configurado el archivo de configuración del transportador. Cuando la directiva ng-app no está definida en el elemento BODY, sino en un descendiente, debe ajustar la propiedad rootElement en su archivo de configuración del transportador al selector que define su elemento raíz angular, por ejemplo:
// protractor-conf.js
rootElement: ''.my-app'',
cuando su HTML es:
<div ng-app="myApp" class="my-app">
Si estas usando
browser.restart ()
en su especificación algunas veces, arroja el mismo error. Tratar de usar
aguarda browser.restart ()
Tuve que dejar de hacer esto:
describe(''navigation'', function(){
browser.get('''');
var navbar = element(by.css(''#nav''));
it(''should have a link to home in the navbar'', function(){
//validate
});
it(''should have a link to search in the navbar'', function(){
//validate
});
});
para hacer esto:
describe(''navigation'', function(){
beforeEach(function(){
browser.get('''');
});
var navbar = element(by.css(''#nav''));
it(''should have a link to home in the navbar'', function(){
//validate
});
it(''should have a link to search in the navbar'', function(){
//validate
});
});
La clave es ser:
beforeEach(function(){
browser.get('''');
});
Espero que esto pueda ayudar a alguien.
ng-app debería inicializarse con una etiqueta HTML y no con una etiqueta de cuerpo. Comenzó a funcionar una vez que reemplacé "ng-app" de la etiqueta DIV a la etiqueta HTML.