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

• 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

Tercera entrada en la serie de Codeception, en esta ocasión para ver el módulo WebDriver y PhantomJS.

En la anterior entrada veíamos que con PhPBrowser nos podíamos quedar cortos si en nuestros tests de aceptación queremos probar algo que se genera dinámicamente con JavaScript, ya que con ese módulo no se ejecuta el código JS.

Para esto, debemos utilizar el módulo de WebDriver, para que esta «emulación» ejecute el JS. Esto aumentará exponencialmente el tiempo que tardan en ejecutarse los tests.

Instalación de WebDriver y PhantomJS

Aunque tienes más info en la documentación oficial, en la consola, vamos a instalar WebDriver a través de composer:

composer require --dev codeception/module-webdriver

Ahora en el archivo acceptance.suite.yml, configuramos WebDriver en lugar del PhpBrowser que viene por defecto:

# 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: phantomjs
            window_size: 1920x1080
        - \Helper\Acceptance
    step_decorators: ~       

El módulo de WebDriver dispone de multitud de configuraciones, entre las que podremos encontrar la url, el puerto, el tamaño de ventana…

A continuación descarga PhantomJS, y desde una tab o ventana nueva de la consola ejecuta el bin descargado:

phantomjs --webdriver=4444 --ignore-ssl-errors=true --ssl-protocol=any

Con PhantomJS corriendo en segundo plano, ya podemos ejecutar nuestros tests, y podremos testear comportamientos y emular acciones en elementos generados dinámicamente con JavaScript.

Por ejemplo, y basándonos en el ejemplo que hicimos en el anterior post, ya podríamos testear si funciona el añadir un post en nuestro WordPress con el editor de bloques:

<?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' );
    }
}

Probar más en profundidad bloques dentro del editor es muy complejo, y se sale del scope de este tutorial, que pretende sentar unas bases y saber cómo iniciarse en los tests con codeception, pero si tienes ganas de probar e investigar, te dejo aquí un enlace que puede serte útil.

Repasando el sencillo ejemplo del test para escribir un post, simplemente indicamos en cada step:

• Escribo una intención: Probar si veo Entradas
• Comprobar que veo el menú «Entradas»
• Irme a la página para añadir una entrada nueva
• Rellenar el campo con ID post-title-0, que se crea dinámicamente con JS y sin PhatomJS el test fallaría
• Hago Click en un botón que contenga el texto «Publicar»
• Vuelvo a hacer click en un botón que contenga el texto «Publicar», ya que la primera vez WordPress me preguntará si estoy seguro…
• Indico que espere 1 segundo
• Compruebo que puedo ver el texto «Publicada» dentro de una etiqueta div con la clase editor-post-publish-panel__header-published

Simplemente lanza los tests y verás

codecept run --steps

PhantomJS nos permite dar un paso más para realizar tests de aceptación, pero aumentará mucho el tiempo de ejecución de los mismos, de hecho una barbaridad.

En la próxima entrada veremos cómo hacer tests de aceptación con Selenium, que nos abrirá un navegador headless y podremos dar un paso más y ejecutar de una manera visual nuestros tests.

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