How to Update Cypress

In this article, we will see how to update cypress to the latest version. EVERY 6 to 8 weeks, there is a significant update that will be rolled out with some changes.

Table of Content

1. Check Cypress changelog and latest version
2. Update Cypress using NPM
3. Update Cypress using package.json
4. Update Cypress using Yarn
5. Migration to Latest Version
6. Video Tutorial

1. How to check Cypress changelog and latest version

Step 1: Open Cypress Application using any of below command

#The long way with the full path
$ ./node_modules/.bin/cypress open

# shortcut using npm bin
$(npm bin)/cypress open

#Using npx, note: npx is included with npm > v5.2 or can be installed separately.
$ npx cypress open

At the bottom you can see we got the notification for an updated version (10.8.0) is available and current version 8.4.1 and also the link for Changelog. If you are not getting notification you can check the latest version from changelog.

 Step 2: Click Changelog to view all version

Click on Changelog at the bottom of runner or navigate to this link to view the change logs.  Here you can view the bug fixes, performance fixes and features etc.

Latest version you will find at the top of the list with release date. You can jump to the specific version by clicking on the links on the right side under section on this page.

Step 3: When you will click on Learn More or current version you will see below popup.

2. Update Cypress using NPM

Step 1: Close the cypress runner properly by clicking on Stop button then x button.

Step 2: Type below command. Here replace 10.8.0 with Latest version

npm install --save-dev cypress@10.8.0

Step 3: Check Cypress version is updated

$ npx cypress --version

3. Update Cypress using package.json

In package.json file you will find ~ or ^ sign before dependency. Don't worry if you have no idea of this we will discuss this in more detail later.

Step 1: First, close the cypress runner properly by clicking on Stop button then x button.

Step 2: Navigate to your package.json.

Step 3: Change the cypress version to the current updated version in package.json

Step 4: type below command

$ npx install cypress

Step 5: Check cypress version

$ npx cypress --version

4. Update Cypress Using Yarn

yarn upgrade cypress@10.8.0

Now opens your terminal and type in : 

npm i

5. Migration to Latest Version 

You might also get a migration helper if you are using an older version and migration is required. Follow Below Steps:

Step 1: Migrate Existing Specs - Click on Rename these specs for me

They have renamed integration folder to e2e. File extension to cy.[ext] instead of spec.[ext]

Step 2: Select Rename Cypress Support File for Me

Step 3: Select Migrate the Configuration file for me

Default configuration file is now cypress.config.ts instead of cypress.json

Step 4: Select E2E Testing. You can also review the differences between each testing type.

Step 5: Choose Your Browser and click Start E2E Testing in [Browser Name]