Skip to main content

Cypress Visual Testing Introduction

· 2 min read
Terence Kong

Step 1: Create a new react app

npx create-react-app demo-cypress --template typescript
yarn create react-app demo-cypress --template typescript

Change directory

cd demo-cypress

current directory

npm install cypress @cypress/react --save-dev
yarn add -D cypress @cypress/react
  • tested with "@cypress/react": "^6.0.0", "cypress": "^10.4.0"

Step 3: Open Cypress

If running the first time, you might need to verify first

npm run cypress verify
yarn run cypress verify

Open cypress to setup configurations

npm run cypress open
yarn run cypress open

initial cypress config

Step 4: Click on Component Testing to setup basic configs

Select frontend framework type

select frontend framework

Install dev dependencies

dev dependencies

Auto generate configuration files

new generated files

new configuration files

Choose browser type

choose browser

Step 5: Create new test file

create first spec

Create test file with desired name

create test file

New file will be auto generated

new test file

Run the test or create a new test file

run test

Step 6: Modify the test file

Initial test code

describe("App.cy.tsx", () => {
it("playground", () => {
// cy.mount()
});
});

initial test run

New passing sample test code

import * as React from "react";
import App from "../../src/App";
import {mount} from "@cypress/react";

it("renders react app", () => {
mount(<App />);
cy.contains(/learn react/i).should("be.visible");
});

passing test code

Failing sample test code

import * as React from "react";
import App from "../../src/App";
import {mount} from "@cypress/react";

it("renders react app", () => {
mount(<App />);
cy.contains(/learn react not working/i).should("be.visible");
});

failing test code