bleech / visual-regression-tests Goto Github PK

Test your website for unwanted visual changes. Run automatic tests and spot differences.

Home Page: https://wordpress.org/plugins/visual-regression-tests/

License: GNU General Public License v2.0

JavaScript 14.07% SCSS 5.57% PHP 80.37%

wordpress wordpress-plugin visual-regression visual-regression-testing visual-regression-tests visual-regression-test visual-regressions plugin

visual-regression-tests's Introduction

VRTs - Visual Regression Tests

VRTs - Visual Regression Tests is a plugin to test your website for unwanted visual changes. The plugin runs automatic daily tests for chosen pages and posts. The tool creates daily comparison screenshots and compares them with a reference snapshot. If there is a difference between the screenshots, you'll be automatically notified via email. Use three comparison mode to spot the differences easily.

Important

This repository is for development purposes. You need to run the build process for it to work. See the section Development for further instructions. To use the plugin on your website, see the section Installation.

Installation

To install the plugin on your website, choose one of the following approaches:

Install from your WordPress backend: Plugins -> Add New Plugin and search for "vrts".
Download from the WordPress Plugin Directory: https://wordpress.org/plugins/visual-regression-tests/.
Install via composer with wpackagist: wpackagist-plugin/visual-regression-tests.

Requirements

PHP 7.4

Development

Clone the repository to your wp-content/plugins/ folder.
Run composer install to install composer dependencies.
Run npm install to install node dependencies.
Run npm run build to build.
Run npm run start to start development.

Dev Requirements

Node 16

License

GPLv2

visual-regression-tests's People

Contributors

Stargazers

Watchers

visual-regression-tests's Issues

Large Icon on Plugin Page

I'm getting a huge icon on the plugin page...

Cannot add new Test VRT 1.7.0

WordPress 6.3.1
Host: Pantheon
Repository: GitHub
Local dev environment: Laragon - Apache 2.4.54/MySQL 5.7.40/PHP 7.4

Active Theme: Twenty Twenty-Three
All plugins disabled EXCEPT: VRTs – Visual Regression Tests

On the VRT Settings page, clicking Add New button does nothing. And no errors are shown in Console (the two errors shown in video are from Loom, the screen recording app)

https://www.loom.com/share/6aa763dbb5d446f8abc5537eea98a418?sid=96cd1fdd-fc52-4173-921c-ae05d7cf921a

All and Running both show (1) Test but none have been created yet

npm run build fails on Windows 10 with error

OS: Windows 10
NPM: 7.10.0
NodeJS: 16.0.0
VRT: 1.7.1
WP: 6.3.1
PHP: 7.4

CMD: npm run build
Error: '.' is not recognized as an internal or external command, (verbose log below)
Related: yarnpkg/yarn#1729

When using Windows OS package.json cannot use ./ for paths, so the first script to fail is lint:php because of the path ./vendor/bin/phpcs

Fix I used: Replacing / with \\

npm verb cli [
npm verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'run',
npm verb cli   'build',
npm verb cli   '--verbose'
npm verb cli ]
npm info using [email protected]
npm info using [email protected]
npm timing npm:load:whichnode Completed in 2ms
npm timing config:load:defaults Completed in 1ms
npm timing config:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrc Completed in 0ms
npm timing config:load:builtin Completed in 0ms
npm timing config:load:cli Completed in 2ms
npm timing config:load:env Completed in 0ms
npm timing config:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrc Completed in 0ms  
npm timing config:load:project Completed in 1ms
npm timing config:load:file:C:\Users\Billie Mead\.npmrc Completed in 1ms
npm timing config:load:user Completed in 1ms
npm timing config:load:file:C:\Program Files\nodejs\etc\npmrc Completed in 0ms
npm timing config:load:global Completed in 0ms
npm timing config:load:validate Completed in 1ms
npm timing config:load:setEnvs Completed in 0ms
npm timing config:load Completed in 6ms
npm timing npm:load:configload Completed in 6ms
npm timing npm:load:setTitle Completed in 0ms
npm timing npm:load:setupLog Completed in 0ms
npm timing npm:load:cleanupLog Completed in 2ms
npm timing npm:load:configScope Completed in 0ms
npm timing npm:load:projectScope Completed in 0ms
npm timing npm:load Completed in 25ms
npm timing config:load:flatten Completed in 2ms

> @bleech/[email protected] build
> run-s lint wp:scripts:build

npm verb cli [
npm verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'L:\\nvm\\v16.0.0\\node_modules\\npm\\bin\\npm-cli.js',
npm verb cli   'run',
npm verb cli   'lint'
npm verb cli ]
npm info using [email protected]
npm info using [email protected]
npm timing npm:load:whichnode Completed in 1ms
npm timing config:load:defaults Completed in 1ms
npm timing config:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrc Completed in 0ms
npm timing config:load:builtin Completed in 0ms
npm timing config:load:cli Completed in 1ms
npm timing config:load:env Completed in 2ms
npm timing config:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrc Completed in 0ms  
npm timing config:load:project Completed in 0ms
npm timing config:load:file:C:\Users\Billie Mead\.npmrc Completed in 1ms
npm timing config:load:user Completed in 1ms
npm timing config:load:file:C:\Program Files\nodejs\etc\npmrc Completed in 1ms
npm timing config:load:global Completed in 1ms
npm timing config:load:validate Completed in 1ms
npm timing config:load:setEnvs Completed in 0ms
npm timing config:load Completed in 7ms
npm timing npm:load:configload Completed in 7ms
npm timing npm:load:setTitle Completed in 0ms
npm timing npm:load:setupLog Completed in 1ms
npm timing npm:load:cleanupLog Completed in 1ms
npm timing npm:load:configScope Completed in 0ms
npm timing npm:load:projectScope Completed in 0ms
npm timing npm:load Completed in 24ms
npm timing config:load:flatten Completed in 2ms

> @bleech/[email protected] lint
> run-p lint:*

npm verb cli [
npm verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm verb cli   'L:\\nvm\\v16.0.0\\node_modules\\npm\\bin\\npm-cli.js',
npm verbnpm cli   'run',
npm verb  cli [
verbnpm  cliverb    'lint:js'
clinpm   'C:\\Program Files\\nodejs\\node.exe',
 verb cli ]
npmnpm  verbinfo  cliusing   'L:\\nvm\\v16.0.0\\node_modules\\npm\\bin\\npm-cli.js',
 [email protected]
npmnpm  verbinfo  cli   'run',
usingnpm [email protected]
 npmnpmverb  timingcli    'lint:css'
npm:load:whichnode npmverb Completed in 1ms
  npmverbcli   [
timingclinpm  ]
 config:load:defaultsverb Completed in 1ms
npm npm cli info   'C:\\Program Files\\nodejs\\node.exe',
timing npm using config:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrc [email protected]
verb Completed in 0ms
npm npm cli info   'L:\\nvm\\v16.0.0\\node_modules\\npm\\bin\\npm-cli.js',
timing npm using config:load:builtin [email protected]
verb Completed in 0ms
 npmnpmcli     'run',
timingtimingnpm   npm:load:whichnodeconfig:load:cliverb Completed in 1ms
 Completed in 2ms
 npmnpmcli     'lint:php'
timingtimingnpm   config:load:defaultsconfig:load:envverb Completed in 1ms
 Completed in 1ms
 npmnpmcli   ]
timingtiming  npmconfig:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrcconfig:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrc  Completed in 0ms
 Completed in 0ms
infonpmnpm  npm usingtimingtiming [email protected]
  npm config:load:projectconfig:load:builtin  Completed in 0ms
verb Completed in 0ms
infonpm npmcli    [
timingusingtimingnpm   [email protected]
 config:load:file:C:\Users\Billie Mead\.npmrcconfig:load:clinpm Completed in 1ms
verb Completed in 1ms
 npm npmtiming cli  timingtiming   'C:\\Program Files\\nodejs\\node.exe',
npm:load:whichnode  npm Completed in 1ms
config:load:userconfig:load:env npm Completed in 1ms
 Completed in 2ms
verb npmnpm timing  cli timingtiming   'L:\\nvm\\v16.0.0\\node_modules\\npm\\bin\\npm-cli.js',
config:load:defaults  npm Completed in 1ms
config:load:file:C:\Program Files\nodejs\etc\npmrcconfig:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrc npm Completed in 1ms
 Completed in 0ms
verb npmnpm timing  cli timingtiming   'run',
config:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrc  npm Completed in 1ms
config:load:globalconfig:load:project npm Completed in 1ms
 Completed in 0ms
verb npmnpm timing  cli timingtiming   'lint:pkg-json'
config:load:builtin  npm Completed in 1ms
config:load:validateconfig:load:file:C:\Users\Billie Mead\.npmrc npm Completed in 1ms
 Completed in 1ms
verb npmnpm timing  cli timingtiming ]
config:load:cli   Completed in 1ms
config:load:setEnvsconfig:load:usernpmnpm Completed in 0ms
 Completed in 1ms
  npmnpminfotiming    timingtimingusingconfig:load:env   [email protected]
 Completed in 1ms
config:loadconfig:load:file:C:\Program Files\nodejs\etc\npmrcnpmnpm Completed in 7ms
 Completed in 0ms
  npmnpminfotiming    timingtimingusingconfig:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrc   [email protected]
 Completed in 0ms
npm:load:configloadconfig:load:globalnpmnpm Completed in 7ms
 Completed in 0ms
  npmnpmtimingtiming    timingnpm:load:whichnodeconfig:load:projecttiming  Completed in 1ms
 Completed in 0ms
 npm:load:setTitlenpmnpmconfig:load:validate Completed in 1ms
   Completed in 2ms
npmtimingtimingnpm    timingconfig:load:defaultsconfig:load:file:C:\Users\Billie Mead\.npmrctiming  Completed in 1ms
 Completed in 2ms
 npm:load:setupLognpmnpmconfig:load:setEnvs Completed in 0ms
   Completed in 0ms
npmtimingtimingnpm    timingconfig:load:file:L:\nvm\v16.0.0\node_modules\npm\npmrcconfig:load:usertiming  Completed in 0ms
 Completed in 2ms
 npm:load:cleanupLognpmnpmconfig:load Completed in 1ms
   Completed in 7ms
timingnpmtimingnpm    config:load:builtintimingconfig:load:file:C:\Program Files\nodejs\etc\npmrctiming Completed in 0ms
  Completed in 0ms
 npmnpm:load:configScopenpmnpm:load:configload  Completed in 0ms
  Completed in 7ms
timingtimingnpm   config:load:cliconfig:load:globaltiming Completed in 2ms
 Completed in 0ms
 npmnpm:load:setTitlenpm  Completed in 0ms
 timingnpmtiming npm  config:load:env timingconfig:load:validate Completed in 1ms
timing  Completed in 1ms
npm npm:load:setupLognpm npm:load:projectScope Completed in 1ms
 timing Completed in 0ms
npmtiming   config:load:file:G:\laragon-6.0.0\www\elevartherapeutics-clone\wp-content\plugins\visual-regression-tests\.npmrctimingnpmconfig:load:setEnvs Completed in 0ms
   Completed in 1ms
npmnpm:load:cleanupLogtimingnpm  Completed in 1ms
  timingnpmnpm:loadtiming   Completed in 38ms
 config:load:projecttimingconfig:load Completed in 1ms
  Completed in 8ms
npmnpm:load:configScopenpm  Completed in 0ms
 timingtiming  config:load:file:C:\Users\Billie Mead\.npmrcnpm:load:configload Completed in 1ms
 Completed in 8ms
npmnpm  timingtiming  config:load:usernpm:load:setTitle Completed in 1ms
 Completed in 0ms
npmnpmnpm   timingtimingtiming   npm:load:projectScopeconfig:load:file:C:\Program Files\nodejs\etc\npmrcnpm:load:setupLog Completed in 1ms    
 Completed in 0ms
 Completed in 0ms
npmnpmnpm   timingnpmtimingtiming    npm:loadtimingconfig:load:globalnpm:load:cleanupLog Completed in 38ms
  Completed in 0ms
 Completed in 2ms
config:load:flattennpm Completed in 2ms
npm  timing timingnpm:load:configScope  Completed in 0ms
config:load:validate Completed in 1ms
npm timing config:load:setEnvs Completed in 1ms
npm timing config:load Completed in 8ms
npmnpm  timingtiming  npm:load:configloadnpm:load:projectScope Completed in 8ms
 Completed in 1ms
npm timingnpm  npm:load:setTitletiming Completed in 0ms
 npmnpmnpm:load   Completed in 38ms
timingtiming  config:load:flattennpm:load:setupLog Completed in 2ms
 Completed in 0ms
npm timing npm:load:cleanupLog Completed in 2ms
npm timing npm:load:configScope Completed in 0ms
npm timing npm:load:projectScope Completed in 1ms
npm timing npm:loadnpm Completed in 35ms
 timing config:load:flatten Completed in 2ms
npm timing config:load:flatten Completed in 2ms

> @bleech/[email protected] lint:js
> wp-scripts lint-js '**/*.js'


> @bleech/[email protected] lint:css
> wp-scripts lint-style '**/*.scss'


> @bleech/[email protected] lint:php
> ./vendor/bin/phpcs


> @bleech/[email protected] lint:pkg-json
> wp-scripts lint-pkg-json

'.' is not recognized as an internal or external command,
operable program or batch file.
npm timing command:run-script Completed in 18ms
npm verb exit 1
npm timing npm Completed in 187ms
npm verb code 1
ERROR: "lint:php" exited with 1.
npm timing command:run-script Completed in 841ms
npm verb exit 1
npm timing npm Completed in 980ms
npm verb code 1
ERROR: "lint" exited with 1.
npm timing command:run-script Completed in 1245ms
npm verb exit 1
npm timing npm Completed in 1374ms
npm verb code 1

VRT plugin API

Is the API necessary for the plugin to work? Or is it for licensing etc.?

I spent some more time today still trying to get VRT to work, and it starts up and runs the first test... but then it seems like it never finishes, as the first test is never completed.

I wasn't sure if the API endpoints needed to be working in order for the first test to run, and the link https://bleech-vrts-app.blee.ch/api/v1/ is still broken and doesn't resolve anywhere.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.