Uno de los mayores problemas para los desarrolladores web es la diferente interpretación de los estándares web por parte de los navegadores, ocasionando que un sitio web se vea de forma distinta en diferentes navegadores. Ademas, con el surgimiento de dispositivos móviles en los últimos años,  ahora también se deben hacer pruebas de las páginas bajo distintas resoluciones para abarcar mas usuarios.

Aunque puede consumir mucho tiempo navegar desde distintos dispositivos y sistemas operativos para hacer las pruebas, existen herramientas para automatizar este proceso. Una que me gustó fue Remote Preview, una aplicación web que al definir una URL en un panel central, envía el navegador web de todos los dispositivos a esa dirección, permitiéndote ver como es la página en cada dispositivo, ademas, cada 1100ms chequea la URL, por lo que si la cambias, automáticamente todos los dispositivos visitan el sitio. Esto permite ahorrar el tiempo de navegación desde cada dispositivo y permite identificar rápidamente, problemas de compatibilidad entre resoluciones o plataformas.

Para entender mejor esta herramienta, les dejo un video donde pruebo como se ve mi blog en distintos navegadores y plataformas móviles:

Así que si desarrollas un sitio web, no dejes de usar esta herramienta para comprobar que el sitio se ve bien desde tu teléfono, tableta, computadora, desde los navegadores de escritorio, sistema operativo y otros. Mientras mas compatibilidad brindes a dispositivos, mas usuarios podrán leer tu contenido y recibir mas visitas.

 

Si tienes configurado tu proyecto hecho en Yii 1.x para cargar las clases mediante composer y deseas realizar pruebas automatizadas, notarás que existen ciertas incompatibilidades entre Yii 1.x y el PHPUnit del repositorio de composer. A continuación te explicaré como instalarlo.

Instalación de las dependencias

Lo primero es instalar todos los paquetes necesarios para realizar las pruebas, todas se colocarán en la sección require-dev debido a que solo serán utilizadas durante el desarrollo y no en el servidor de producción para evitar bugs/exploits, ocupar espacio, rendimiento, etc. El paquete requerido por Yii es PHPUnit, pero al momento de desarrollo del framework, PHPUnit incluía varias funcionalidades que actualmente están disponibles en otros paquetes, por esta razón también debemos agregar php-invoker, phpunit-story y phpunit-runner. Ahora, si deseas utilizar fixtures (datos de prueba) o vas a realizar pruebas con base de datos debes agregar dbunit como dependencia, si vas a realizar pruebas funcionales agrega phpunit-selenium y finalmente, si utilizas un generador de pruebas (Netbeans incluye uno) agrega phpunit-skeleton-generator para con un clic generar un archivo de con los métodos de una clase para escribir pruebas.

Entonces la sección de require-dev en tu composer.lock debe quedar así:

"require-dev": {
 "phpunit/phpunit": "4.7.*",
 "phpunit/php-invoker": "*",
 "phpunit/phpunit-story": "*",
 "phpunit/dbunit": ">=1.2",
 "phpunit/phpunit-selenium": ">=1.2",
 "phpunit/phpunit-skeleton-generator": "*",
 "hot/phpunit-runner": "dev-master"
}

Luego ejecuta composer install y tendrás las dependencias en tu proyecto.

Configuración en Netbeans

Primero se debe configurar el proyecto para indicar cuales son las carpetas con los archivos y la configuración de phpunit a utilizar, para ello, haz clic derecho en el proyecto. En la parte izquierda entra a la sección de Testing, luego en la ventana de diálogo selecciona PhpUnit y en la selección de la carpeta, escoge /protected/tests/ para indicar que esa es la carpeta de pruebas del proyecto. Finalmente, en la parte inferior se debe seleccionar PHPUnit en la sección de Testing Providers

Selección de PHPunit en Netbeans

Selección de PHPunit en Netbeans

A continuación, en el panel izquierdo haz clic en PHPUnit, y en el panel derecho:

  • Selecciona la opción Use Bootstrap y selecciona la ruta /protected/tests/bootstrap.php
  • Activa la opción de Use Bootstrap for creating new tests
  • Selecciona la opción Use XML Configuration y selecciona la ruta /protected/tests/phpunit.xml
  • Use Custom PHPUnit Script y coloca la ruta /protected/external/phpunit/phpunit/phpunit

De esta forma le indicamos a Netbeans el uso de la configuración de arranque incluída en Yii y que utilice el script de PHPUnit que instalamos con composer.

Selección del PHPUnit de composer

Ahora necesitamos indicarle a Netbeans que utilice la plataforma de PHPUnit instalada con composer, de lo contrario puede utilizar la que viene incluida en el IDE o la del sistema operativo opertivo, las cuales son incompatibles con las clases incluídas en composer. Para cambiarlo, haz clic al menú Tools y luego Options, entra a la sección de PHP, selecciona la pestaña de Framework & Tools, luego en el panel izquierdo selecciona PHPUnit, y selecciona/escribe las siguientes rutas:

  • En la ruta de PHPUnit Scripts, coloca la ruta de phpunit de composer: /protected/external/phpunit/phpunit/phpunit
  • En la ruta de Skeleton Generator Script, /protected/external/phpunit/phpunit-skeleton-generator/phpunit-skelgen
Selección de scripts de PHPunit de Composer en Netbeans

Selección de scripts de PHPunit de Composer en Netbeans

Ejecución

¡Listo! Ya puedes ejecutar las pruebas desde la clase principal con F6 o desde la clase de pruebas con Alt + F6. Ademas, al hacer clic derecho en una clase, puedes entrar al menú de Tests y luego Create Tests para crear automáticamente los archivos pruebas, estos ya vienen con los métodos que debes escribir y métodos para ejecutar métodos antes de las pruebas.

Ahora no tienes excusa para probar tu software de forma automática utilizando Yii.

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: