Automatización de pruebas funcionales con Selenium en Yii usando Netbeans

El título de esta entrada es un poco largo, pero intentaré de explicarles de una manera sencilla como podemos hacer pruebas funcionales en nuestras aplicaciones hechas con el framework de PHP Yii, usando Selenium y Netbeans. Para quienes no conocen las pruebas funcionales, son aquellas para comprobar la correcta ejecución de cada una de las funcionalidades del sistema, muchas veces hacemos este proceso manualmente: entrando al sitio, escribiendo a mano (o usando un plugin del navegador) cada campo, haciendo clic en los botones y así sucesivamente. Pero cuando el sistema se hace muy grande o estamos en agregando funcionalidades, se puede perder mucho tiempo en realizar este proceso, si se deja para el final (como en las metodologías antiguas) puede ser muy tarde y si se omite tendremos un software con potenciales fallas.
La idea es automatizar este proceso, para que con un solo clic se ejecuten muchas pruebas y asegurarnos el correcto funcionamiento del programa a lo largo del desarrollo y mantenimiento del mismo.

Configuración en Netbeans

Para esta guía deben tener ya instalado y configurado los siguientes programas: Netbeans, PHP Unit, un programa hecho con Yii framework, Selenium Server, Firefox (Debe ser igual para otro navegador pero no lo probé), Linux (No sé si este proceso es igual para Windows).

Primero lo que vamos a hacer es instalar un plugin de Netbeans para manipular el servidor de Selenium desde el IDE, este paso es opcional pero me parece mas fácil iniciarlo / detenerlo con un clic que a través de comandos. Para ello vamos a:

  1. Entrar en Netbeans.
  2. Luego en el menú “Tools -> Plugins -> Available Plugins“.
  3. Allí buscamos el que tenga el nombre de “Selenium Module for PHP” le damos clic en Install.
  4. Una vez finalizada la instalación, en la pestaña de Servicios en la parte de Servidores tendremos el de Selenium.
Servidor Selenium

Servidor Selenium

Antes de iniciar las pruebas, debemos arrancar el servidor de Selenium con clic derecho y luego en “Start”. Luego procedemos a configurar el proyecto actual (el realizado en Yii) para indicar a Netbeans donde se encuentran las pruebas y PHP Unit:

  1. Hacemos click derecho en el proyecto y luego en “Properties”.
  2. En la sección “Sources” existe una caja llamada “Test Folder”, en ella vamos a colocar la ruta absoluta a la carpeta /protected/tests del proyecto (en caso de no funcionar, entonces a /protected/tests/unit).
  3. Luego en la misma ventana, cambiamos la sección “PHPUnit” y activamos donde dice “Use Bootstrap” donde rellenamos la caja de texto a la ruta absoluta de /protected/tests/bootstrap.php
  4. Luego activamos la opción “Use XML Configuration” y rellenamos en la caja la ruta absoluta de /protected/tests/phpunit.xml.

Con esto ya esta configurado Netbeans, sin embargo, en mi caso no funcionó de una vez hasta hacer unos pequeños ajustes:

  1. En mi caso no quería detectar al navegador Firefox, para hacerlo funcionar en el archivo de configuración (phpunit.xml) tuve que eliminar todo el contenido dentro de las etiquetas <selenium></selenium> dejándolas como las acabo de escribir.
  2. En el archivo WebTestCase.php,en la función setUp() necesité colocar $this->setBrowser(‘*firefox’); para indicar el navegador por defecto.
  3. Como estaba usando Bootstrap para el frontend, Selenium debe esperar un poco hasta que algunos eventos de Javascript terminen de mejorar la apariencia visual, para ello en el archivo /protected/config/main.php se agrega enla sección de preload lo siguiente (asumiendo la carga de log como se encuentra por defecto):
    'preload' => array('log',
        php_sapi_name() !== 'cli' ? 'bootstrap' : '',
    ),
  4. Listo, ya con presionar Alt + F6 empezará a ejecutar todas las pruebas, si solo quieren para la clase actual deben presionar Shift + F6.

Consejos para las pruebas

A continuación les doy unos consejos y extractos de código, pues al principio me costó encontrar como realizar las siguientes tareas en Selenium.

  • Iniciar sesión en cada prueba: para ello deben crear en WebTestCase.php (la clase principal para las pruebas) un método para el login que comience con _ (piso), pues éstos no se ejecutarán en las pruebas, aquí mi les dejo código y luego en cada prueba hacen un $this->_login() donde requieran identificarse.
    protected function _login() {
     $this->windowMaximize();
     $this->open("site/login");
     $this->type("LoginForm_username", "skatox"); //Donde LoginForm_username es el id del usuario
     $this->type("LoginForm_password", "contrasena");
     $this->click("LoginForm_rememberMe"); //Permite recordar y no estar autenticando cada rato
     $this->click("name=yt0");
     $this->waitForPageToLoad(self::PAGE_LOAD_WAIT_TIME); //constante que declaré para esperar un tiempo
    }
  • Interactuar con la ventana de confirmación al eliminar un elemento del grid: En este caso se me complicó porque se debe interactuar con una ventana de javascript, el siguiente código también está en WebTestCase.php porque lo utilizo a lo largo de todas las pruebas, los parámetros son: $confirmMsg que es el mensaje de confirmación que aparece en la ventana y $nonFoundMsg, mensaje de cuando se ha borrado el elemento.
    protected function _testDelete($confirmMsg, $nonFoundMsg){
     sleep(self::WAIT_JS_TIME); //tiempo para esperar la ventana de javascript
     $this->chooseCancelOnNextConfirmation(); //Selecciona el boton cancelar para probar este paso
     $this->click($this->firstDeleteXpath); //Hace clic en el boton de eliminar del grid (Xpath)
     $this->assertConfirmationPresent($confirmMsg); //Se asegura que esta bien el mensaje
     $this->getConfirmation();
     sleep(self::WAIT_JS_TIME);
     $this->chooseOkOnNextConfirmation(); //Escoge aceptar
     $this->click($this->firstDeleteXpath);
     $this->assertConfirmationPresent($confirmMsg);
     $this->getConfirmation();
     $this->waitForTextPresent($nonFoundMsg); //Espera que no hayan resultados porque los borró
    }

Ya con estos pasos pueden empezar a realizar las pruebas funcionales de forma automática, si quieren conocer como se vé, les dejo un vídeo de unas pruebas de un módulo de una aplicación que estoy realizando:

 

Auto-completación de código PHP con YII en Netbeans

Netbeans es mi IDE favorito desde hace años y últimamente me ha tocado realizar varios proyectos usando el framework Yii. Para todo desarrollador / programador es una realidad que no conocemos en totalidad un lenguaje o framework y por ello siempre estamos acudiendo a la documentación  para repasar sintaxis y nombre de métodos, sobre todo de las variables u objetos manipulados en cierto momento. Por eso, es bueno configurar el IDE para que autocomplete el código y muestre la documentación de funciones para leer conocer el funcionamiento sin tener que cambiar de ventana.

Hace unos días descubrí en la documentación oficial como configurar Netbeans para trabajar con Yii. Y les explico aquí como realizarlo:

  • Entra al menu File (Archivo), luego a Project properties (Propiedades del proyecto) y finalmente a PHP Include Path (Ruta de cabeceras de PHP) e incluimos la ruta donde se guarda el framework de yii, de hecho la carpeta se llama “framework”.
  • Luego entramos a Tools (Herramientas), luego a Options (Opciones), hacemos clic en la pestaña superior de Miscellaneous (Misceláneas) y hacemos clic en Files (Archivos), luego del paréntesis agregamos “yiilite\.php” para que quede algo como “^(yiilite\.php|CVS|SCCS|….”
  • Reiniciamos Netbeans y veremos como ahora se autocompleta el código, al momento de instaciar clases accederemos a sus métodos y documentación.

Para el caso de algunas vistas parciales donde recibimos objetos que no están declarados en el archivo, podemos decirle al IDE que tipo es cada variable usando la siguiente sintaxis:

/* @var $this MyController */
/* @var $model MyObject */
$this->metodo() // se puede escribir usando auto completación
$model->id; // se puede escribir usando auto completación

Con estos sencillos pasos se hará mas fácil la escritura de código php usando Yii en Netbeans.

Completado de código PHP con Yii en Netbeans

Completado de código PHP con Yii en Netbeans

Sincronizar proyectos con GIT en Netbeans

GIT es un sistema de control de versiones creado por Linus Torvald (el creador de Linux) y últimamente muy utilizado en los proyectos de Software Libre debido a su arquitectura distribuida y licencia de uso. Si usan Netbeans notarán que por defecto no trae soporte para usar GIT en nuestros proyectos, ya están trabajando en ello, pero mientras tanto podremos usar NBGit, un plugin para añadir soporte GIT a Netbeans.

Entramos a a la página de descargas del proyecto, descargamos el  archivo .nbm y una vez dentro de Netbeans, entramos al menú Herramientas->Plugins, seleccionamos la pestaña Descargados y añadimos este archivo. Reiniciamos Netbeans y listo, ya tendremos soporte GIT para nuestros proyectos y en menú de Equipo (Team) aparecerá Git con opciones para configurarlo.

Espero que les sirva de ayuda para cuando necesiten usar GIT en Netbeans.

Actualización al 20/08/2012:  Las últimas versiones de Netbeans ya incorporan esta característica por defecto.

¡Felices 10 años Netbeans!

Hoy está cumpliendo 10 años desde que salió a la luz Netbeans, en la página oficial del evento podremos ver mucha información interesante si son usuarios de este excelente IDE (ya sé que existe Eclipse pero no me gusta), les recomiendo que observen la parte de la historia de su logo que empezó con granos (beans) y ahora es un cubo, entren donde salen varios screenshots de la GUI IDE a través de los años y una serie de ví­deos del creador de Java y de Netbeans, donde hablan acerca de esta celebración.

Netbeans.tv: El Youtube de los usuarios de Netbeans

Sin son usuarios del IDE Netbeans, les encantará revisar de vez en cuando la página http://netbeans.tv/ que contiene mucha información aportada por la comunidad. Lo mejor de todo es que trae muchos Screencasts (digamos que tutoriales en video) y Podcasts (noticias, charlas, entrevistas en formato de audio) para conocer mas este IDE.

Existen ví­deos para principiantes, para dar a conocer plugins nuevos (por medio de esta página de enteré que existí­a plugins para programar con PHP y  un editor visual para web tipo Visual ASP), trucos interesantes (no sabia que netbeans almacenaba temporalmente las lí­neas de código borradas y permite recuperarlas) y muy útiles a todo nivel de desarrollador. Pero lo chévere del asunto es que tu también puedes subir tus tutoriales con tan solo registrarse en el sitio.

Si les gusta Netbeans (o si piensan que  es un asco), les recomiendo entrar a esa página para conocer mas este IDE y obtener información útil que les permitirá ahorrar tiempo al momento de desarrollar, conocer nuevas formas de programar y ver tambien para que otra cosa puedes seguir usando Netbeans.

Editado: Al parecer desde que Netbeans pasó a manos de Oracle por la compra de Sun Microsystem, la página ha sido retirada.