https://github.com/pirasanthan-jesugeevegan/amt-cypress-sanity

CI/CD using next.js & Cypress
https://github.com/pirasanthan-jesugeevegan/amt-cypress-sanity

Last synced: 10 days ago
JSON representation

CI/CD using next.js & Cypress

• Host: GitHub
• URL: https://github.com/pirasanthan-jesugeevegan/amt-cypress-sanity
• Owner: pirasanthan-jesugeevegan
• Created: 2021-07-06T14:32:55.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-30T00:56:43.000Z (2 months ago)
• Last Synced: 2024-10-30T02:57:39.364Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 728 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


 

 VS.

 

 

 


 

 

 

   

   

 

This is a Proof Of Concept for Intergrating visual testing tool (Applitool & Percy) to Cypress.io & Cucumber.io, Please see below for the Test Case that are automated 


## Background   

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 Scenario**:  Nav Function  

| 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|

## Install

1.  clone the repo

2.  `npm install` or 	`yarn install`

# Applitools - Branch `applitools`

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

## Run tests

**Prerequisites:**

select `applitool` branch

### Headless 

 ##### Run E2E test with Visual testing 

    APPLITOOLS_API_KEY={APPLITOOLS_API_KEY} npm run int-test 

##### Run Only E2E test without Visual testing 

    APPLITOOLS_IS_DISABLED=true APPLITOOLS_API_KEY={APPLITOOLS_API_KEY} npm run int-test

# Percy - Branch `percy`

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* 

## Run tests

**Prerequisites:**

select `percy` branch

### Headless 

 ##### Run E2E test with Visual testing 

    PERCY_TOKEN={PERCY_TOKEN} npx percy exec -- cypress run

##### Run Only E2E test without Visual testing 

    PERCY_TOKEN={PERCY_TOKEN} PERCY_ENABLE=0 npx percy exec -- cypress run

## Technology used:

 - Next.js

 - Cypress 

 - Sanity

 - Cucumber

 - Mochawsome

 - Percy

 - Applitools

## DEMO

[Live report - Schedule to run everyday ](https://pirasanthan-jesugeevegan.github.io/amt-cypress-sanity/)

[Live APP ](https://sanity-cypress.netlify.app/)