Setup notes for Codeception, Selenium, Chromedriver and Visualception

Codeception-setup.md

Setup notes for Codeception, Selenium, Chromedriver and Visualception

Prerequisites

Java JDK (I don't think JRE will work) http://php.net/manual/en/imagick.installation.php

ImagicK PHP Extension - http://php.net/manual/en/imagick.installation.php

Install stuff

Installed WordPress as per usual, all commands below were run from same folder as Wordpress

Install Codeception with WordPress module

composer require lucatume/wp-browser --dev

Optionally install Codecept globally (otherwise you'll have to type full path to get to codecept.phar)

sudo curl -LsS https://codeception.com/codecept.phar -o /usr/local/bin/codecept && sudo chmod a+x /usr/local/bin/codecept

Download Selenium Standalone Server (.jar file)

Download latest from https://goo.gl/4g538W or Seleniumhq.org. Copy jar file to WordPress folder

Install Chromedriver Download from https://sites.google.com/a/chromium.org/chromedriver/downloads

This file needs to be in the path somewhere so I copied it to /usr/local/bin

Install Visualception

composer require "codeception/visualception:*" --dev

Run codeception setup wizard

codecept init wpbrowser

Setup and configure

Test database

Create empty wpTests database

Export WordPress database to tests/_data/dump.sql (in Wordpress folder)

Codeception uses this to rollback any change made during testing I think.

Tweak Codeception test suite configuration file

Here is how mine looks right now, I suspect WPDb should be enabled but I'm not sure why it's not.

file: tests/acceptance.yml

# Codeception Test Suite Configuration
#
# Suite for acceptance tests.
# Perform tests in browser using the WPWebDriver or WPBrowser.
# Use WPDb to set up your initial database fixture.
# If you need both WPWebDriver and WPBrowser tests - create a separate suite.

actor: AcceptanceTester
modules:
    enabled:
        # - WPDb
        # - WPBrowser
        - \Helper\Acceptance
        - WPWebDriver
        - VisualCeption:
            module: WPWebDriver
            fullScreenShot: false
            # maximumDeviation: 5                                   # deviation in percent
            saveCurrentImageIfFailure: true                       # if true, VisualCeption saves the current
            report: true						# saves to tests/output/vcresult.html
    config:
        WPDb:
            dsn: 'mysql:host=%DB_HOST%;dbname=%DB_NAME%'
            user: '%DB_USER%'
            password: '%DB_PASSWORD%'
            dump: 'tests/_data/dump.sql'
            populate: true #import the dump before the tests
            cleanup: true #import the dump between tests
            url: '%WP_URL%'
            urlReplacement: true #replace the hardcoded dump URL with the one above
            tablePrefix: '%TABLE_PREFIX%'
        WPBrowser:
            url: '%WP_URL%'
            adminUsername: '%ADMIN_USERNAME%'
            adminPassword: '%ADMIN_PASSWORD%'
            adminPath: '%WP_ADMIN_PATH%'
        WPWebDriver:
              url: '%WP_URL%'
              browser: chrome
              port: 4444
              window_size: 1024x768
              capabilities:
                  chromeOptions:
                    args: ["--headless", "--disable-gpu", "window-size=1920x1080"]
              adminUsername: '%ADMIN_USERNAME%'
              adminPassword: '%ADMIN_PASSWORD%'
              adminPath: '%WP_ADMIN_PATH%'
extensions:
    enabled:
        # - Codeception\Extension\Recorder
    config:
        Codeception\Extension\Recorder:
            delete_successful: false
            module: WPWebDriver

Create an acceptance test

codecept g:cest acceptance WPFirst

This makes file tests/acceptance/WPFirstCest.php

Here is a sample test showing how to loop through pages and generate a diff screenshot if differences exist.

file: tests/acceptance/WPFirstCest.php

<?php

class WPFirstCest
{
    public function _before(AcceptanceTester $I)
    {
    }

    public function _after(AcceptanceTester $I)
    {
    }

   /**
    * @dataProvider pageProvider
    */
    public function staticPages(AcceptanceTester $I, \Codeception\Example $example)
    {
        $I->amOnPage($example['url']);
        $I->seeInCurrentUrl($example['url']);
        $I->seeInTitle($example['title']);

        // resize to full height
        $pageHeight = $I->executeJS('return document.body.scrollHeight');
        $I->resizeWindow(1024, $pageHeight);

        $I->dontSeeVisualChanges( $example['title'], ".site" );
    }

    /**
     * @return array
     */
    protected function pageProvider() // alternatively, if you want the function to be public, be sure to prefix it with `_`
    {
        return [
            ['url'=>"/", 'title'=>"Sandman – Just another WordPress site"],
            ['url'=>"/about-us", 'title'=>"About Us"],
            ['url'=>"/contact", 'title'=>"Contact – Sandman"]
        ];
    }
}

Run the test!

codecept run acceptance

The not so pretty

Firefox / Geckodriver doesn't work with latest Selenium. You need to download selenium-server-standalone-3.8.1.jar and run using java -jar selenium-server-standalone-3.8.1.jar -enablePassThrough false

I don't think the full screenshot works with Firefox right now either.

Visualception tries to maximise the windowsize before screenshot but that didn't seem to work properly for me so I disabled it in module config and resized manually in test code.

Visualception also attempts to crop the image which was giving me problems, unfortunatly the only way to disable this was to edit the visualception code directly as below.

In file vendor/codeception/visualception/module/VisualCeption.php around line 405 I commenented out the below code: // $screenShotImage->cropImage($coords['width'], $coords['height'], $coords['offset_x'], $coords['offset_y']);