Como ajustar tamaño de window de phantomjs con se-interpreter

Seré lo más breve posible.

Esto gracias a david.lince y a la documentación de se-interpreter.

El problema:

Cuando se corren las pruebas E2E con phantomJS, me generaba error, pues no encontraba ciertos objetos en el DOM. ¿Por qué? Porque la ventana que genera phantomJS era muy pequeña, razón por la cual los sidebars estan ocultos, y por esto, no encontraba los botones que estaban dentro de esos sidebars.

Eso lo logré determinar gracias a que ejecuté las pruebas sobre firefox con tamaño pequeño de la ventana, y sucedió el mismo error.

¿La solución?

Obligar a phantomJS a ejecutarse sobre un tamaño de pantalla grande.

¿Y cómo se hace eso?

Me demoré como unas 3 o 4 horas. Que triste.
La utilidad que estamos utilizando es la de se-interpreter. Eso es como un framework que me permite ejecutar una serie de pasos formateados en un json.

Asi que bajo esta herramienta de se-interpreter, tocó realizar el ajuste.

Aquí estan las cosas que me toco hacer:

PRIMERO:

1. Gracias a un script que subió david.lince, pude hacer esto, sino... imposible....
Aquí el link donde tome este codigo: https://github.com/Zarkonnen/se-interpreter/blob/master/step_types/setWindowSize.js

 Entonces..

En la carpeta step_types, (que esta en la carpeta donde quedó instado se-interpreter)crear un archivo que se puede llamar setWindowSize.js.
Y ese archivo debe contener lo siguiente:

exports.get = function(stepType) {
  if (stepType == "windowSize") {
    return {
      'run': function(tr, cb) {
        tr.do('windowHandle', [], cb, function (err, handle) {
          var w = parseInt(tr.p('width'), 10),
              h = parseInt(tr.p('height'), 10);
          tr.do('windowSize', [handle, w, h], cb, function(err) {
            cb({'success': !err, 'error': err});
          });
        });
      }
    };
  }
  return null;
};

SEGUNDO
Ahora, en nuestro json de pruebas, podemos agregar un step de tipo windowSize.

Ejemplo...

"steps": [
        {
            "type": "get",
            "url": "http://localhost:8001"
        },
        { "type": "windowSize",  "width": 1600, "height": 900 },
        {
            "type": "waitForElementPresent",
            "locator": {
                "type": "xpath",
                "value": "//li[@id='menuListInbox']//span[.='Inbox']"
            }
        }
...
]


Como esta resaltado, defino un paso extra al principio del set de pruebas, en el cual le estoy diciendo que por favor, me coloque el tamaño de la ventana de un tamaño de 1600 por 900.

TERCERO

Finalmente cuando ejecutemos nuestro comando de se-interpreter debemos agregar un parámetro extra donde le decimos a se-interpreter que vamos a agregar un modulo extra, en este caso setWindowSize. Ese parámetro es: executorFactory.

Así:

se-interpreter archivoConfiguracionPruebas.json --executorFactory=" + __dirname + "\\node_modules\\se-interpreter\\step_types\\setWindowSize.js"  + " --parallel 1  --listener=" + __dirname + "\\scripts\\reporter\\listenerDeReportes.js


Y LISTO!!!... a probar se dijo... y me funcionó a mi... espero a ti tambien!!!!!

Saludos.


Sean felices! :) Y siéntanse libres de opinar ;)

Agregar waitFormElementPresent a las pruebas de selenium en javascript

Si hemos creado pruebas con selenium builder, para las pruebas end to end. Y hemos formado nuestras pruebas bajo el formato json, este script quizas te pueda servir.

Lo que sucede es que si los comandos se ejecutan más rápido que el browser en renderizar los objetos del DOM, se va a producir un error. (Lógico: por ejemplo, no puedo hacer clic a un botón que nisiquiera se ha puesto en el DOM).

Por esa razón, es bueno agregar la instrucción de waitForElementPresent. De esta manera nos aseguramos que antes que pase al siguiente comando click o lo que sea, primero espere a que este el objeto.

Esto se puede hacer manualmente, pero ¡Que pereza!. Por eso, hice una pequeña función que agrega la instrucción waitForElementPresent, antes de cada click o acción sobre algún elemento del DOM. Cabe decir que esta es la versión 0.0.0.0.0.0.0.1, y que esta para mejorarla muchísimo.

Esta es la función:

var newJson = JSON.parse(JSON.stringify(json));
newJson.steps = [];
for(iStep = 0; iStep < json.steps.length; iStep++){
    
    if(json.steps[iStep].type=="clickElement" || json.steps[iStep].type == "setElementText")
    {
        var step =  JSON.parse(JSON.stringify(json.steps[iStep]));
        //modify type step to waitStep
        step.type = "waitForElementPresent";
        newJson.steps.push(step);
    }
    newJson.steps.push(json.steps[iStep]);
}

Donde el json es: El objeto json de nuestras pruebas.

y newJson es: El nuevo objeto json de pruebas con waitForElementPresent.

El uso rudimentario que le doy actualmente es:

Copiar el json en la consola de chrome, y asignarlo a la variable json. 

Posteriormente ejecutar el pedazo de código puesto arriba

Obtener el json final así:

JSON.stringify(newJson)

Copio el string en una herramienta online de formateo de json, por ejemplo: http://pro.jsonlint.com/.

Lo pego, y listo... ya tengo mi json formateado de pruebas.

AQUI ESTA EN JSFIDDLE LA IDEA:

http://jsfiddle.net/elkin0727/k791oyaj/

Espero les sirva.

Sean felices! :) Y siéntanse libres de opinar ;)