{"id":2545,"date":"2013-01-09T09:47:28","date_gmt":"2013-01-09T14:17:28","guid":{"rendered":"https:\/\/skatox.com\/blog\/?p=2545"},"modified":"2024-12-02T16:07:23","modified_gmt":"2024-12-02T21:07:23","slug":"automatizacion-de-pruebas-funcionales-con-selenium-en-yii-usando-netbeans","status":"publish","type":"post","link":"https:\/\/skatox.com\/blog\/2013\/01\/09\/automatizacion-de-pruebas-funcionales-con-selenium-en-yii-usando-netbeans\/","title":{"rendered":"Automatizaci\u00f3n de pruebas funcionales con Selenium en Yii usando Netbeans"},"content":{"rendered":"\n

El t\u00edtulo de esta entrada es un poco largo, pero intentar\u00e9 de explicarles de una manera sencilla como podemos hacer pruebas funcionales en nuestras aplicaciones hechas con el framework de PHP Yii<\/a>, usando Selenium<\/a> y Netbeans<\/a>. Para quienes no conocen las pruebas funcionales, son aquellas para comprobar la correcta ejecuci\u00f3n 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\u00ed sucesivamente. Pero cuando el sistema se hace muy grande o estamos en agregando funcionalidades, se puede perder mucho tiempo <\/strong>en realizar este proceso, si se deja para el final (como en las metodolog\u00edas 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.<\/p>\n\n\n\n

 <\/h3>\n\n\n\n

Configuraci\u00f3n en Netbeans<\/h2>\n\n\n\n

Para esta gu\u00eda 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\u00e9), Linux (No s\u00e9 si este proceso es igual para Windows).<\/p>\n\n\n\n

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\u00e1cil iniciarlo \/ detenerlo con un clic que a trav\u00e9s de comandos. Para ello vamos a:<\/p>\n\n\n\n

    \n
  1. Entrar en Netbeans.<\/li>\n\n\n\n
  2. Luego en el men\u00fa \u00abTools -> Plugins -> Available Plugins<\/em>\u00ab.<\/li>\n\n\n\n
  3. All\u00ed buscamos el que tenga el nombre de \u00abSelenium Module for PHP\u00bb <\/em>le damos clic en Install<\/em>.<\/li>\n\n\n\n
  4. Una vez finalizada la instalaci\u00f3n, en la pesta\u00f1a de Servicios<\/em> en la parte de Servidores<\/em> tendremos el de Selenium.<\/li>\n<\/ol>\n\n\n
    \n
    \"Servidor<\/a>
    Servidor Selenium<\/figcaption><\/figure>\n<\/div>\n\n\n

    Antes de iniciar las pruebas, debemos arrancar el servidor de Selenium con clic derecho y luego en \u00abStart\u00bb. <\/em>Luego procedemos a configurar el proyecto actual (el realizado en Yii) para indicar a Netbeans donde se encuentran las pruebas y PHP Unit:<\/p>\n\n\n\n

      \n
    1. Hacemos click derecho <\/strong>en el proyecto y luego en \u00abProperties\u00bb.<\/em><\/li>\n\n\n\n
    2. En la secci\u00f3n \u00abSources\u00bb existe una caja llamada \u00abTest Folder\u00bb, <\/em>en ella vamos a colocar la ruta absoluta<\/strong> a la carpeta \/protected\/tests <\/strong>del proyecto (en caso de no funcionar, entonces a \/protected\/tests\/unit<\/strong>).<\/li>\n\n\n\n
    3. Luego en la misma ventana, cambiamos la secci\u00f3n \u00abPHPUnit\u00bb<\/em> y activamos donde dice \u00abUse Bootstrap\u00bb<\/em> donde rellenamos la caja de texto a la ruta absoluta de \/protected\/tests\/bootstrap.php<\/strong><\/li>\n\n\n\n
    4. Luego activamos la opci\u00f3n \u00abUse XML Configuration\u00bb <\/em>y rellenamos en la caja la ruta absoluta de \/protected\/tests\/phpunit.xml.<\/strong><\/li>\n<\/ol>\n\n\n\n

      Con esto ya esta configurado Netbeans, sin embargo, en mi caso no funcion\u00f3 de una vez hasta hacer unos peque\u00f1os ajustes:<\/p>\n\n\n\n

        \n
      1. En mi caso no quer\u00eda detectar al navegador Firefox, para hacerlo funcionar en el archivo de configuraci\u00f3n (phpunit.xml) tuve que eliminar todo el contenido dentro de las etiquetas <selenium><\/selenium><\/strong> dej\u00e1ndolas como las acabo de escribir.<\/li>\n\n\n\n
      2. En el archivo WebTestCase.php<\/em>,en la funci\u00f3n setUp() <\/strong>necesit\u00e9 colocar $this->setBrowser(‘*firefox’);<\/strong> para indicar el navegador por defecto.<\/li>\n\n\n\n
      3. Como estaba usando Bootstrap<\/a> 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 <\/em>se agrega enla secci\u00f3n de preload lo siguiente (asumiendo la carga de log <\/strong>como se encuentra por defecto):<\/li>\n<\/ol>\n\n\n\n
        'preload' => array('log',\n  php_sapi_name() !== 'cli' ? 'bootstrap' : '',\n),<\/code><\/pre>\n\n\n\n
        Listo, ya con presionar Alt + F6<\/strong> empezar\u00e1 a ejecutar todas las pruebas, si solo quieren para la clase actual deben presionar Shift + F6.<\/strong><\/p>\n\n\n\n
        <\/h3>\n\n\n\n
        Consejos para las pruebas<\/h2>\n\n\n\n
        A continuaci\u00f3n les doy unos consejos y extractos de c\u00f3digo, pues al principio me cost\u00f3 encontrar como realizar las siguientes tareas en Selenium.<\/p>\n\n\n\n
        Iniciar sesi\u00f3n en cada prueba<\/h3>\n\n\n\n
        Para ello deben crear en WebTestCase.php<\/em> (la clase principal para las pruebas) un m\u00e9todo para el login que comience con _<\/strong> (piso), pues \u00e9stos no se ejecutar\u00e1n en las pruebas, aqu\u00ed mi les dejo c\u00f3digo y luego en cada prueba hacen un $this->_login() <\/strong>donde requieran identificarse.<\/strong><\/p>\n\n\n\n
        protected function _login() {\n\t$this->windowMaximize();\n\t$this->open(\"site\/login\");\n\t$this->type(\"LoginForm_username\", \"skatox\"); \/\/Donde LoginForm_username es el id del usuario\n\t$this->type(\"LoginForm_password\", \"contrasena\");\n\t$this->click(\"LoginForm_rememberMe\"); \/\/Permite recordar y no estar autenticando cada rato\n\t$this->click(\"name=yt0\");\n\t$this->waitForPageToLoad(self::PAGE_LOAD_WAIT_TIME); \/\/constante que declar\u00e9 para esperar un tiempo\n}<\/code><\/pre>\n\n\n\n
        Interactuar con la ventana de confirmaci\u00f3n al eliminar un elemento del grid<\/h3>\n\n\n\n
        En este caso se me complic\u00f3 porque se debe interactuar con una ventana de javascript, el siguiente c\u00f3digo tambi\u00e9n est\u00e1 en WebTestCase.php<\/em> porque lo utilizo a lo largo de todas las pruebas, los par\u00e1metros son: $confirmMsg que es el mensaje de confirmaci\u00f3n que aparece en la ventana y $nonFoundMsg, mensaje de cuando se ha borrado el elemento.<\/p>\n\n\n\n
        protected function _testDelete($confirmMsg, $nonFoundMsg){\n  sleep(self::WAIT_JS_TIME); \/\/tiempo para esperar la ventana de javascript\n  $this->chooseCancelOnNextConfirmation(); \/\/Selecciona el boton cancelar para probar este paso\n  $this->click($this->firstDeleteXpath); \/\/Hace clic en el boton de eliminar del grid (Xpath)\n  $this->assertConfirmationPresent($confirmMsg); \/\/Se asegura que esta bien el mensaje\n  $this->getConfirmation();\n  sleep(self::WAIT_JS_TIME);\n  $this->chooseOkOnNextConfirmation(); \/\/Escoge aceptar\n  $this->click($this->firstDeleteXpath);\n  $this->assertConfirmationPresent($confirmMsg);\n  $this->getConfirmation();\n  $this->waitForTextPresent($nonFoundMsg); \/\/Espera que no hayan resultados porque los borr\u00f3\n}<\/code><\/pre>\n\n\n\n
        Ya con estos pasos pueden empezar a realizar las pruebas funcionales de forma autom\u00e1tica, si quieren conocer como se v\u00e9, les dejo un v\u00eddeo de unas pruebas de un m\u00f3dulo de una aplicaci\u00f3n que estoy realizando:<\/p>\n\n\n
        <\/div>
        Pruebas funcionales de Yii usando Netbeans<\/div><\/div>
        <\/div>
        <\/div>
        <\/div><\/div><\/div>