micoocypress v0.0.5
Micoo Cypress
This is a Cypress plugin for doing Visual Regression Testing with Micoo. For details about visual regression testing with Micoo, please check on the Micoo github repository and Micoo document.
Do you really need this plugin
Actually, this plugin is not mandatory for doing visual regression testing with Cypress
and Micoo. You can use Cypress to test your UI application and take screenshots with
cy.screenshot()
. After that, use Node library miooc
to trigger visual regression
testing with those saved screenshots. More detailed instruction about Micoo client
in NodeJS can be found here.
With this plugin
However, if you don't like taking visual regression testing depart from your Cypress tests, and hope to make everything in the same process of Cypress run, then this plugin would be handy for you.
Use this plugin
Doing visual regression testing with Micoo is completely independent to Cypress tests, so there
need no special cypress commands
and steps, all you need is to import and use this plugin.
install plugin
npm install --save-dev micoocypress
load plugin in Cypress
Follow below example to load plugin micoocypress
in your Cypress tests.
// cypress/plugins/index.js
const micoocypress = require("./micoocypress");
const micooption = {
host: "http://localhost:8123/engine",
apiKey: "AK98b56a53c5cbe67b9a",
pid: "PID852d6b23c9894c7a8f9b67fbb75a5faa",
buildVersion: process.env.MICOO_BUILD_VERSION ? process.env.MICOO_BUILD_VERSION : "misiing versioning",
}
module.exports = (on, config) => {
micoocypress(on, micooption);
}
enable experimentalRunEvents
feature
To make this plugin working, it needs to enable an experimental Cypress feature experimentalRunEvents
in your Cypress configuration file, e.g. cypress.json
{
"experimentalRunEvents": true
}
With all above setup, and given you already have a Micoo service up and running, it's ready to go Visual Regression Testing with Cypress and Micoo. For more details about how to use Micoo, please check its document.
How this plugin works
Basically, this plugin is just a wrapper of micooc
which is a Micoo client for NodeJS. Once
you have prepared all the setup, bellow steps will happen in your Cypress tests:
- in your tests, when use
cy.screesnshot()
, a screenshot will be saved locally, this is Cypress default behaviour, - meanwhile,
micoocypress
copies each saved screenshot file to a foldermicoo-screenshots
, - after all Cypress tests run completed,
micoocypress
uploads all the screenshots files to Micoo service and trigger a new visual testing build.
Usage of plugin micoocypress
when you load micoocypress
in cypress/plugin/index.js
, it accepts 2 configuration option
parameters micooption
and cypressOption
, e.g.
const micooption = {
host: "http://localhost:8123/engine",
apiKey: "AK98b56a53c5cbe67b9a",
pid: "PID852d6b23c9894c7a8f9b67fbb75a5faa",
buildVersion: process.env.MICOO_BUILD_VERSION ? process.env.MICOO_BUILD_VERSION : "misiing versioning",
}
const cypressOption = {
triggerVisualTesting: true,
triggerOnAllPassed: true,
removeScreenshotsAfterUpload: true,
}
module.exports = (on, config) => {
micoocypress(on, micooption, cypressOption);
}
there usages are like below:
micooption
, a mandatory object with attributes:
host
: string value. The Micoo's base URL plus /engine,apiKey
: string value. The project's API Key, it could be found from the Micoo UI,pid
: string value. Your Micoo project's PID, it can be found from the Micoo project page's URL,buildVersion
: string value. This build version is neither parts of Micoo, nor your UI automation test, it needs to be the version of you SUT application, most of the case, it's the git revision number. buildVersion is a useful setup of mappings between your visual tests and the SUT application. Anyway, technically, it's just a string which will be displayed in Micoo's project board, you can use anything which is meaningful to you.
cypressOption
, an optional object with attributes:
triggerVisualTesting
: boolean value. Control whether to trigger visual regression testing, if set itfalse
,micoocypress
will only collect all screenshots tomicoo-screenshots
folder but not to upload them to Micoo service. Default value istrue
.triggerOnAllPassed
: boolean value. By default,micoocypress
will only trigger visual regression testing when all Cypress tests are passed, you can change this control by settingfalse
to this attribute. Default value istrue
.Please note that the screenshots automatically taken by Cypress for failed tests will not be able to upload to Micoo service because they don't match the filename criteria from Micoo.
removeScreenshotsAfterUpload
: boolean value. By default, themicoo-screenshots
folder will be deleted after triggered visual regression testing, set this attribute tofalse
can keep the screenshots there in case you need to investigate them before doing visual testing. Default value istrue
.