Codeception para WordPress: Tests de aceptación con WebDriver y Selenium

• 1. Introducción e instalación
• 2. Tests de aceptación con PhpBrowser
• 3. Tests de aceptación con WebDriver y PhantomJS
• 4. Tests de aceptación con WebDriver y Selenium
• 5. WPBrowser
• 6. Tests unitarios

En la entrada anterior veíamos cómo podíamos realizar tests de aceptación en elementos generados dinámicamente con JavaScript a través de PhantomJS. Pero aún así esta ejecución se hacía en segundo plano, y la salida de los tests era por la terminal.

En este post vamos a ir un paso más allá y esa emulación la vamos a hacer directamente en el navegador, así podremos comprobar en directo el resultado de nuestros tests. Esto añade un poco más de tiempo de ejecución de los tests respecto a PhantomJS, pero nos ofrece un beneficio claro al poder visualizar la emulación en un navegador.

Instalación de WebDriver y Selenium

Al igual que vimos en la entrada anterior, lo primero es instalar WebDriver (tienes más info en la documentación oficial):

composer require --dev codeception/module-webdriver

Ahora en el archivo acceptance.suite.yml, configuramos WebDriver, y para este ejemplo utilizaremos chrome. Aprovecho para añadir unas líneas (capabilities) por si en local tienes un certificado SSL autofirmado, que podría ocasionarte problemas:

# Codeception Test Suite Configuration
#
# Suite for acceptance tests.
# Perform tests in browser using the WebDriver or PhpBrowser.
# If you need both WebDriver and PHPBrowser tests - create a separate suite.

actor: AcceptanceTester
modules:
    enabled:
        - WebDriver:
            url: http://localhost/myapp
            browser: chrome
            capabilities:
                acceptSslCerts: true
                acceptInsecureCerts: true
        - \Helper\Acceptance
    step_decorators: ~       

El siguiente paso es que te descargues Selenium Server y ChromeDriver. Necesitarás también tener instalado Java.

Coloca el Selenium Server en una carpeta donde puedas ejecutarlo globalmente y en una nueva pestaña de la terminal lanza el server en segundo plano. Sustituye ./chromedriver por la ruta donde lo hayas instalado y las xxx.xx por la versión que te hayas descargado:

java -Dwebdriver.chrome.driver=./chromedriver -jar ./selenium-server-standalone-3.xxx.xx.jar --debug

Esto tendrás que hacerlo siempre antes de lanzar los tests, y quedará en segundo plano Selenium Server a la espera de lanzar los tests. Vamos a lanzar el mismo tests que vimos en el ejemplo de PhantomJS:

<?php

use Step\Acceptance\Login;

class WriteCest {
    public function _before( Step\Acceptance\Login $I ) {
        $I->login( 'admin', 'admin' );
    }

    public function tryToWriteAPost( AcceptanceTester $I ) {
        $I->wantTo( 'Probar si veo Entradas' );
        $I->see( 'Entradas', '.wp-menu-name' );
        $I->amOnPage( '/wp-admin/post-new.php' );
        $I->fillField( '#post-title-0', 'Título de prueba' );
        $I->click( 'Publicar' );
        $I->click( 'Publicar' );
        $I->wait(1);
        $I->see( 'Publicada', 'div.editor-post-publish-panel__header-published' );
    }
}

Simplemente lanza los tests y verás cómo te abre una ventana con la aplicación de chrome, y ejecuta la navegación paso por paso: Ir a la página de login, rellenar el formulario, ir a la pagina de añadir nuevo post, rellenar el título y hacer click en Publicar.

codecept run --steps

• « Codeception para WordPress: Tests de…
• Codeception para WordPress: WPBrowser »