@smartbear/visualtest-cypress
v1.10.2
Published
Cypress Plugin for SmartBear VisualTest via JavaScript
Downloads
604
Maintainers
Keywords
Readme
Cypress VisualTest Plugin
Documentation
Click here for more detailed docs on SmartBear's website
Setup
Run the following commands to setup & install VisualTest:
npm install @smartbear/visualtest-cypress
npx visualtest-setup
Example console output:
Commands installed.
Plugin installed.
visualTest.config.js has been created.
Please enter your projectToken in visualTest.config.js
Enter your projectToken in visualTest.config.js:
module.exports = {projectToken: 'PROJECT_TOKEN'}
Implementation
Simply change all instances of cy.screenshot
with cy.sbvtCapture
.
For example, this will run regression tests against Fullpage Home Capture in that project
cy.sbvtCapture('Home Page')
To override project settings — take a capture with layout mode on low sensitivity
cy.sbvtCapture('Home Page', {
comparisonMode: 'layout', // if 'layout', then sensitivity is requried, OR 'detailed' with no sensitivity
sensitivity: "low" // 'medium', or 'high'
})
For lazy-loaded websites use:
cy.sbvtCapture('Home Page', {
lazyload: 250 //number is milliseconds between scrolls
})
To ignore elements on the comparison, add the cssSelector to the array:
cy.sbvtCapture('Home Page', {
ignoreElements: ['.exampleClass', '.class1 > div > li:nth-child(1)']
})
You can also run tests against just certain elements, this will run regression tests against the header.
cy.get('.container').eq(0).sbvtCapture('Home Page Header')
To pass in other arguments , the syntax would be the same as cy.screenshot
cy.sbvtCapture('Home Page', {
capture: 'viewport',
overwrite: true,
clip: {x: 100, y: 100, width: 1000, height: 1000}
})
To print out the test run results to the command line cy.sbvtPrintReport()
To assert the testrun passed, call cy.sbvtGetTestRunResult()
, which returns an object with total comparisons passed and failed. Example:
{ // example cy.sbvtGetTestRunResult() response
passed: 10
failed: 0
}
it("The sbvtCapture's should pass", function () {
cy.sbvtGetTestRunResult()
.then((response) => {
assert(response.passed === 10, `response.passed !== 10: ${JSON.stringify(response)}`);
assert(response.failed === 0, `There were failures in the test run: ${JSON.stringify(response)}`);
});
});
Callback arguments are not allowed, i.e. onBeforeScreenshot
& onAfterScreenshot
Running
npx cypress run
is the recommended way to run our plugin.- Going into 'interactive mode' (
npx cypress open
) works, but each test can only be ran once without closing and relauching the Cypress application.
Requirements
Cypress 9.7.0+ (Recommend v10.10.0+)
Node 18.17.0+
Assigning captures to a test group name
//visualtest.config.js
module.exports = {
projectToken: 'PROJECT_TOKEN',
testGroupName: 'test group name'
}
// OR save on the environment variable
// SBVT_TEST_GROUP_NAME = 'test group name'
Assigning SCM data to a test run
Save Source Control Manager data on the environment variable
SBVT_SCM_BRANCH=branch-name
SBVT_SCM_COMMIT_ID=commit-hash
Manual Setup
- For manual setup:
On versions 10+
- Add:
require('@smartbear/visualtest-cypress')(module);
at the bottom of cypress.config.js - Add:
import '@smartbear/visualtest-cypress/commands'
at the bottom of cypress/support/e2e.js
- Add:
On versions 10-
- Add:
require('@smartbear/visualtest-cypress')(module);
at the bottom of cypress/plugins/index.js - Add:
import '@smartbear/visualtest-cypress/commands'
at the bottom of cypress/support/index.js
- Add:
Create visualTest.config.js in the main test folder
- that file will contain:
module.exports = { projectToken: 'PROJECT_TOKEN' }
- Insert your projectToken, or create a trial here: https://try.smartbear.com/visualtest
- that file will contain: