First go at setting up travis to run vis regression tests.

.travis.yml

@@ -35,6 +35,14 @@ matrix:
       apt:
         packages:
           - nginx
+  - name: "Visual regression tests"
+    php: 7.3
+    env: WP_VERSION=latest WP_MULTISITE=0 RUN_VIS_REGRESSION=1
+    addons:
+      chrome: stable
+      apt:
+        packages:
+          - nginx
   - name: "Unit tests code coverage"
     php: 7.3
     env: WP_VERSION=latest WP_MULTISITE=0 RUN_CODE_COVERAGE=1

package.json

@@ -16,7 +16,7 @@
     "test": "cross-env NODE_CONFIG_DIR='./tests/e2e-tests/config' BABEL_ENV=commonjs mocha \"tests/e2e-tests\" --require babel-register --recursive",
     "test:grep": "cross-env NODE_CONFIG_DIR='./tests/e2e-tests/config' BABEL_ENV=commonjs mocha \"tests/e2e-tests\" --require babel-register --grep ",
     "test:single": "cross-env NODE_CONFIG_DIR='./tests/e2e-tests/config' BABEL_ENV=commonjs mocha --require babel-register",
-    "test:screenshots": "cross-env JEST_PUPPETEER_CONFIG='./tests/screenshot-tests/config/jest-puppeteer.config.js' jest --config='./tests/screenshot-tests/config/jest.config.js' --maxWorkers=1 --rootDir=./",
+    "test:vis-regression": "cross-env JEST_PUPPETEER_CONFIG='./tests/screenshot-tests/config/jest-puppeteer.config.js' jest --config='./tests/screenshot-tests/config/jest.config.js' --maxWorkers=1 --rootDir=./",
     "makepot": "grunt makepot",
     "git:update-hooks": "rm -r .git/hooks && mkdir -p .git/hooks && node ./node_modules/husky/husky.js install"
   },

tests/bin/install.sh

@@ -150,7 +150,7 @@ install_db() {
 
 install_e2e_site() {
 
-	if [[ ${RUN_E2E} == 1 ]]; then
+	if [[ ${RUN_E2E} == 1 || ${RUN_VIS_REGRESSION} == 1 ]]; then
 
 		# Script Variables
 		CONFIG_DIR="./tests/e2e-tests/config/travis"
@@ -221,7 +221,7 @@ PHP
 		cd $WC_PLUGIN_DIR
 		npm install
 		composer install
-		grunt e2e-build
+		npm run build
 
 		echo "ACTIVATING WooCommerce PLUGIN"
 		php wp-cli.phar plugin activate woocommerce

tests/bin/travis.sh

@@ -10,7 +10,12 @@ if [ $1 == 'after' ]; then
 		php ocular.phar code-coverage:upload --format=php-clover coverage.clover
 	fi
 
-	if [[ ${RUN_E2E} == 1 && $(ls -A $TRAVIS_BUILD_DIR/screenshots) ]]; then
+	if [[ ${RUN_VIS_REGRESSION} == 1 ]]; then
+		# copy diff output for failed tests to the screenshots directory to uploading.
+		cp /tests/visual-regression/__image_snapshots__/__diff_output__/ $TRAVIS_BUILD_DIR/screenshots/
+	fi
+
+	if [[ ( ${RUN_E2E} == 1 || ${RUN_VIS_REGRESSION} == 1 ) && $(ls -A $TRAVIS_BUILD_DIR/screenshots) ]]; then
 		if [[ -z "${ARTIFACTS_KEY}" ]]; then
 			echo "Screenshots were not uploaded. Please run the e2e tests locally to see failures."
 		else

tests/screenshot-tests/config/jest-puppeteer.config.js

@@ -2,7 +2,7 @@
 
 module.exports = {
 	launch: {
-		slowMo: 200,
+		slowMo: false,
 		headless: true,
 		ignoreHTTPSErrors: true,
 		args: [