Trabajar con PHPUnit y Selenium para nuestras pruebas de FrontEnd

07 de Ene, 2019

Trabajar con PHPUnit y Selenium para nuestras pruebas de FrontEnd
Rate this post

En esta entrada hablaremos paso a paso de cómo trabajar con PHPUnit y Selenium para hacer test de front-end de nuestros proyectos.

Para ello necesitaremos instalar varios componentes en nuestro entorno de trabajo

Necesitaremos tener:

  • PHPUnit
  • Java
  • Selenium Server
  • Chrome o Firefox Driver

Primero instalaremos Java, en mi caso en mac lo he hecho con Brew

$ brew cask install java

Si no tenemos instalado PHPUnit aquí tenemos varias opciones para hacerlo

Nos descargamos el .jar para el selenium server y lo guardamos en una carpeta donde podamos localizarlo facilmente

Nota: Algunas versiones del .jar de Selenium no trabajan con las nuevas versiones de PHP, en mi caso trabajo con PHP 7.2 y tuve que descargar la ultima versión del .jar

La puedes descargar aquí

Con esto ya podemos ejecutar nuestro servidor de Selenium para hacer el test desde la linea de comando

$ java -jar ~/selenium-server-standalone-2.39.0.jar

debemos obtener algo como esto:

Jan. 07, 2019 12:01:29 NACHM. org.openqa.grid.selenium.GridLauncher main
INFO: Launching a standalone server
12:01:54.959 INFO - Java: Oracle Corporation 11.0.1+13
12:01:54.960 INFO - OS: Mac OS X 10.14.2 x86_64
12:01:54.970 INFO - v2.39.0, with Core v2.39.0. Built from revision ff23eac
12:01:55.035 INFO - Default driver org.openqa.selenium.ie.InternetExplorerDriver registration is skipped: registration capabilities Capabilities [{ensureCleanSession=true, browserName=internet explorer, version=, platform=WINDOWS}] does not match with current platform: MAC
12:01:55.079 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
12:01:55.079 INFO - Version Jetty/5.1.x
12:01:55.080 INFO - Started HttpContext[/selenium-server,/selenium-server]
12:01:55.105 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@6a28ffa4
12:01:55.105 INFO - Started HttpContext[/wd,/wd]
12:01:55.105 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver]
12:01:55.105 INFO - Started HttpContext[/,/]
12:01:55.123 INFO - Started SocketListener on 0.0.0.0:4444
12:01:55.123 INFO - Started org.openqa.jetty.jetty.Server@2e3fc542

Con ello ya sabemos que nuestro servidor de Selenium estará en el puerto 4444 (http://127.0.0.1:4444/wd/hub)

Crearemos un directorio llamado tester, y dentro de tester crearemos un archivo composer.json

$ mkdir tester && touch tester/composer.json

editamos el composer e incluiremos lo siguiente

{
    "require-dev": {
        "phpunit/phpunit": "*",
        "facebook/webdriver": "dev-master"
    }
}

ejecutamos un $ composer update

vamos a crear ahora un test de prueba, creamos un archivo php para abrir por ejemplo github.com y comprobar su estado; para ello crearemos un GitHubTest.php

?php 
class GitHubTests extends PHPUnit_Framework_TestCase 
{
} 

Como podes observar como toda clase de Testing extenderemos PHPUnit_Framework_TestCase (no usaremos PHPUnit_Extensions_Selenium2TestCase), para cada Tests queremos lanzar un Navegador, o en otras palabras una sesión de Selenium, Esto lo haremos creando la instancia RemoteWebDriver

NOTA: Si tienes problemas con el autoload y te sale el error de no encontrar la clase PHPUnit_Framework_TestCase puedes probar cambiarlo por \PHPUnit\Framework\TestCase

?php
require('vendor/autoload.php');

use PHPUnit\Framework\TestCase;

class GitHubTest extends PHPUnit_Framework_TestCase {

    /**
     * @var \RemoteWebDriver
     */
    protected $webDriver;

	public function setUp()
    {
        $capabilities = array(\WebDriverCapabilityType::BROWSER_NAME => 'chrome');
        $this->webDriver = RemoteWebDriver::create('http://localhost:4444/wd/hub', $capabilities);
    }

}

Con esto inicializamos el navegador, pero aún no tenemos ningún test escrito, así que crearemos algo básico, que llamemos a la web https://github.com y que la página tenga el titulo GitHub”

?php
require('vendor/autoload.php');

use PHPUnit\Framework\TestCase;

class GitHubTest extends \PHPUnit\Framework\TestCase {

    /**
     * @var \RemoteWebDriver
     */
    protected $webDriver;

	public function setUp()
    {
        $capabilities = array(\WebDriverCapabilityType::BROWSER_NAME => 'chrome');
        $this->webDriver = RemoteWebDriver::create('http://localhost:4444/wd/hub', $capabilities);
    }

    protected $url = 'https://github.com';

    public function testGitHubHome()
    {
        $this->webDriver->get($this->url);
        // chequeamos que el titulo contenga 'GitHub'
        $this->assertContains('GitHub', $this->webDriver->getTitle());
    }    

Ejecutamos el script

$ vendor/bin/phpunit GitHubTest.php

Al ejecutar vemos como se lanza el navegador, se abre la web github y en respuesta obtendremos

$ vendor/bin/phpunit GitHubTest.php 
PHPUnit 7.5.1 by Sebastian Bergmann and contributors.

.                                                                   1 / 1 (100%)

Time: 2.61 seconds, Memory: 4.00MB

OK (1 test, 1 assertion)

Podemos ver que el test termino pero que el Navegador quedo abierto, eso es porque no hemos cerrado el mismo, para ello agregamos el siguiente método al final de la clase

public function tearDown()
    {
        $this->webDriver->quit();
    }

Ya solo nos resta jugar un poco con los test, hacerlos adaptados a nuestras necesidades.

En la próxima entrada veremos cómo hacer un test avanzado, seleccionar elementos en la página por su ID, nombre de clase, nombre del elemento, CSS o XPath, hacer click en ellos, inclusive escribir en campos.