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
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
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"]
];
}
}
codecept run acceptance
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']);