๐ Hello fellas! It's been a while since I posted an article.
As developers, we always want to deliver the best products to users. And Testing is a crucial part of this process. One of the commonly used testing techniques is E2E testing.
๐ก E2E Testing - The Basics
End to End Testing (or E2E testing in short) is a technique that tests the entire software product from beginning to end to ensure the application flow behaves as expected.
The main intent of E2E testing is to simulate the real user scenario and to test from the end user's experience.
๐ Benefits of E2E Testing
- Reduced Risks
- Increased Confidence
- Reduced Cost
โก E2E testing methods
Horizontal E2E testing
Horizontal Testing is done from the end user's perspective. It evaluates whether the user can navigate the software and use its functions properly. It also helps to detect the bugs that might prevent the user from using some software functions.
Vertical E2E Testing
This method refers to testing in layers, meaning that tests happen in sequential, hierarchical order. Each subcomponent of the system is tested from start to finish to ensure quality.
It is mostly done when the system has no UI or the UI has a high level of technicality and is used to test critical components.
โ How to perform E2E Testing?
- Analyze all the requirements. Have a clear idea about what the app is supposed to do.
- Set up a test environment as per the requirements.
- List down all the testing methods required to test these responses.
- Design the test cases.
- Run the tests and jot the results.
โก E2E Testing Frameworks
E2E Testing frameworks are used to ensure that all the moving parts in an application is configured properly.
Here are some of the most popular ones:
- Selenium
- Cypress
- Cucumber
- Testim
Now that you are familiar with the basic concept of E2E Testing, let's take a look at how to integrate E2E Testing using Cypress in Next.JS
๐จโ๐ป Integration of Cypress with Next.js for E2E Testing
Now that you're familiar with the Basics of E2E Testing, let's take a look at how to get started with Cypress in Next.js
Next.JS
In case you are not familiar with Next.js, it's a react framework packed with some extra features to help both developers and clients.
Cypress
Cypress is a test runner for E2E Testing for the web.
Setting up the Project
You can use create next-app
with the cypress
example to get started quickly.
npx create-next-app@latest --example with-cypress with-cypress-app
For existing projects, you can start off by installing the cypress
package.
npm install --save-dev cypress
Then, add Cypress to the scripts
section in the package.json
file.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"cypress": "cypress open",
}
Next, run cypress to generate examples that use their recommended folder structure.
npm run cypress
Creating your first Cypress integration test
Let's say you have two pages
// pages/index.js
import Link from 'next/link'
export default function Home() {
return (
<nav>
<Link href="/about">
<a>About</a>
</Link>
</nav>
)
}
// pages/about.js
export default function About() {
return (
<div>
<h1>About Page</h1>
</div>
)
}
Then, to test that your navigation is working correctly:
// cypress/integration/app.spec.js
describe('Navigation', () => {
it('should navigate to the about page', () => {
// Start from the index page
cy.visit('http://localhost:3000/')
// Find a link with an href attribute containing "about" and click it
cy.get('a[href*="about"]').click()
// The new url should include "/about"
cy.url().should('include', '/about')
// The new page should contain an h1 with "About page"
cy.get('h1').contains('About Page')
})
})
Tip: Instead of doing cy.visit('http://localhost:3000/')
, you can just do cy.visit('/')
if you set the baseUrl
to http://localhost:3000
in the cypress.json
config file.
// cypress.json
{
"baseUrl": "http://localhost:3000"
}
At this point, you will have a simple test setup. Since Cypress is testing a real Next.js application, it requires the Next.js server to be running prior to starting cypress.
First Run npm run build
and npm run start
, then run npm run cypress
in another terminal window to start Cypress.
Now, cypress will start and you can view the results.
Further steps for Continuous Integration (CI)
At this point, you will have noticed that running Cypress so far has opened an interactive browser which is not ideal for CI environments.
You can run Cypress headlessly using the cypress run
command.
In the package.json
file:
// package.json
"scripts": {
// ...
"cypress": "cypress open",
"cypress:headless": "cypress run"
}
That's it for this article! You can show your support by dropping some reactions here!
About the Author
Top comments (1)
[[..PingBack...]]
This article was curated as a part of #47th Issue of Software Testing Notes Newsletter.