Using Cypress with Next.js for End to End testing | Cypress Nextjs Example

In this blog we will learn about how to setup cypress in your next.js applications and end to end testing.

Cypress Nextjs Example

Step One: Install cypress and add the script and config

Lets install cypress first

yarn add cypress -D # or npm i cypress -D

Now add this script into your package.json file

"scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },

Now run cypress open from the root of the project. This will create a cypress directory with some examples and also a cypress.json file

Now add the following configuration to cypress.json file in the root of your next.js project

{
  "baseUrl": "http://localhost:3000"
}

Step Two : Add the data-cy attributes to the elements to test

Now add the data-cy attributes to the link and button to be tested.

<Link href="/about/">
	<a data-cy="nav-item">About</a>
</Link>
<button
	onClick={() => ()}
	data-cy="mmenu-btn"
>
MMenu
</button>

Step Three : Write the Test

Now lets create a file called nav.spec.js and write your test for desktop and mobile view. Note the you can keep any name of the file except that it should end with .spec.js extension

describe('Nav Menus', () => {
    // For desktop view
    context('720p resolution', () => {
        beforeEach(() => {
            /**
             * Run these tests as if in a desktop browser,
             * with a 720p monitor
             */
            cy.viewport(1280, 720)
        })
        describe('When you visit home', () => {
            it('Should visit home page', () => {
                cy.visit('/')
            });
            describe('nav', () => {
                it('Should navigate to About page', () => {
                    cy.get('[data-cy=nav-item]').contains('About').click()
                    cy.url().should('include', '/about/')
                })
            })
        })
    })
    context('iphone-5 resolution', () => {
        beforeEach(() => {
            /**
             * Run these tests as if in a desktop browser,
             * with a 720p monitor
             */
            cy.viewport('iphone-5')
        })
        describe('When you visit home', () => {
            it('Should visit home page', () => {
                cy.visit('/')
            });
            describe('Mmenu', () => {
                it('Should open the mmenu', () => {
                    cy.get('[data-cy=mmenu-btn]').click();
                })
                describe('nav', () => {
                    it('Should navigate to About page', () => {
                        cy.get('[data-cy=nav-item]').contains('About').click()
                        cy.url().should('include', '/about/')
                    })
                })
            })
        })
    })
})

Step Four : Run the test

There are two ways you can run the test:
1. npm run cypress:open and
Opens the Cypress Test Runner in the browser.

2. npm run cypress:run
Runs Cypress tests to completion. By default, cypress run will run all tests headlessly in the Electron browser. It also records the video and puts them into cypress/video folder.

1. npm run cypress:open

By default, Cypress will automatically find and allow you to use the browsers installed on your system.

When you run npm run cypress:open , it will open the list of the test and you can either run a single test or all.

Click on the last test nav.spec.js and run it.

2. npm run cypress:run

When you run cypress:run it will run the test and also record the video for you.
You can also run cypress on a single test file like so :

npm run cypress:run -- --spec "cypress/integration/nav.spec.js" # Here we pass the file path that contains our test

You can find the code on Github