The application is a Next.js with Sanity.io, this is an example application uses to demonstrate how we can achive a CI/CD using cypress and cucumber and intergrating visual testing tool.
| Test Case Number | Test Case |
|---|---|
| TC01 | Verify nav contains movie & People |
| TC02 | Verify nav link navigate to the right page |
| TC03 | Verify user can see actor profile page |
- clone the repo
npm installoryarn install
Applitools intergration can be found on applitools branch
During intergrating Applitools, I have listed below the Pros & Cons
Pros:
- AI Technology - Comparess Image by pixals | 99.99% accurate
- Can be easily customised using config file
- Configuration can be passed as Environment varibale it will help with CI
- Outlines changed CSS for easy debugging
Cons:
- Requires multiple lines of code to achieve visual testing
- Applitool UI is not great comparied to Percy
Prerequisites:
select applitool branch
APPLITOOLS_API_KEY={APPLITOOLS_API_KEY} npm run int-test
APPLITOOLS_IS_DISABLED=true APPLITOOLS_API_KEY={APPLITOOLS_API_KEY} npm run int-test
Percy intergration can be found on applitools branch
During Percy Applitools, I have listed below the Pros & Cons
Pros:
- Very easy to intergrate compared to Applitool
- Can be easily customised using config file
- Configuration can be passed as Environment varibale it will help with CI
- Requires only one line of code to capture compared to Applitool requires three lines of code
- Dashboard UI is better than Applitool
Cons:
- Did not come across any
Prerequisites:
select percy branch
PERCY_TOKEN={PERCY_TOKEN} npx percy exec -- cypress run
PERCY_TOKEN={PERCY_TOKEN} PERCY_ENABLE=0 npx percy exec -- cypress run
- Next.js
- Cypress
- Sanity
- Cucumber
- Mochawsome
- Percy
- Applitools