Introduction

As your web app becomes complex with newly added features, it may be hard to keep track of the most important logic that is needed in the web app. A good way to maintain your codebase is to write tests. With tests, you become aware of whether your web app works as you want it to or if newly added features break the app.

In this article, you will write unit tests in Next.js client components and synchronous server components using Vitest and React Testing Library, and you will write end-to-end tests for your async server components using Playwright.

Benefits of Software Testing

• Tests help to save time that would normally be spent during debugging hours.
• Tests are a way to diagnose your codebase without having to debug manually.
• Manual debugging processes consume too much time. You write tests and run the tests automatically, and you are provided with feedback and possible suggestions that help improve the quality of your code.
• Tests help to gain increased confidence in yourself or as a team.
• Tests also serve as a documentation guide for other developers who may be collaborating with you on your project.
• It helps the developers to understand the expected behavior of the code. Thus contributing to a cleaner, readable, and maintainable codebase.

Types of Software Testing

• Unit Testing: Involves individual functions, modules, or components that are tested in isolation.

• End-to-End Testing: Requires that all the possibly needed logic work together in the codebase, including network requests and other server-side logic.

• Integration Testing: Involves the combination and interaction of multiple units or modules that are tested together to form a certain part of the software as a whole entity. Its approach is taken after the completion of unit testing.

• Performance Testing: Involves the evaluation of the speed and responsiveness of the software as a whole. Its goal is to determine the entire user experience of the software over various performance metrics.

• Accessibility Testing: Involves the confirmation that the software can be easily navigated and easily understood by assistive technologies for diverse groups of users based on their special needs.

Unit Testing in Next.js with Vitest and React Testing Library

Vitest is a high-performance testing framework created specifically for writing unit tests, with built-in features that make it easier to run the tests. Here, we will be integrating Vitest with React Testing Library - @testing-library/react.

React Testing Library provides APIs that make it possible to work with React components. It needs to be installed together with jsdom which makes it possible to query the DOM nodes on a web page.

Next.js Setup and Installation

Create an initial Next.js project setup by running the command below on your terminal:

npx create-next-app

Select JavaScript as the programming language so you can follow up with this article.

Add Vitest to Next.js

Then, add Vitest to your already existing Next.js project with the command:

npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
# or
bun add -D vitest @vitejs/plugin-react jsdom @testing-library/react

Next, create a vitest.config.mjs|mts file in the root directory of your project to include the configuration settings for Vitest:

1// vitest.config.mjs
2
3import { defineConfig } from 'vitest/config'
4import react from '@vitejs/plugin-react'
5
6export default defineConfig({
7  plugins: [react()],
8  test: {
9    environment: 'jsdom',
10  }
11})

Configuring Test Files

We want to save all our tests, regardless of their types, in the same root folder. To achieve this, create an all-tests folder in the root directory of your project. Then, create a vitest-unit-tests subfolder inside the all-tests folder.

Next, inside your vitest.config.mjs|mts file, include the all-tests/vitest-unit-tests folder:

1// vitest.config.mjs
2
3import { defineConfig } from 'vitest/config'
4import react from 'vitejs-plugin/react'
5
6export default defineConfig({
7  plugins: [react()],
8  test: {
9    environment: 'jsdom',
10    include: ['./all-tests/vitest-unit-tests/**/*.{test, spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}']
11  }
12})

This enables you to run your vitest unit tests specifically from the vitest-unit-tests folder, while any of your test files can end with a .test or .spec name-saving convention.

Installing @testing-library/dom

testing-library/dom is a library that provides utilities that enable you to query the DOM for nodes in such a way that a user would find elements on a web page. It needs to be installed as one of your project's development dependencies devDependencies.

To install @testing-library/dom, run the command below:

npm install --save-dev @testing-library/dom`.

Installing @testing-library/jest-dom

We want our tests to assert the exact values that we want to confirm in our components. Vitest does not support a complete list of other possible matches. Hence we will be installing testing-library/jest-dom in our project. jest-dom provides custom Jest matches and is compatible with Vitest. Install jest-dom by running the command on your terminal:

npm install --save-dev @testing-library/jest-dom
# or
yarn add --dev @testing-library/jest-dom

Then, create a vitest-setup.js|ts file in the root directory of your project. Inside the vitest-setup.js file, import '@testing-library/jest-dom/vitest'. Here is what the file should look like:

1// vitest-setup.js
2
3import '@testing-library/jest-dom/vitest'

Next, add vitest-setup.js to the setupFiles field inside vitest.config.mjs|mts file:

1// vitest.config.mjs
2
3import { defineConfig } from 'vitest/config'
4import react from '@vitejs/plugin-react'
5
6export default defineConfig({
7  plugins: [react()],
8  test: {
9    environment: 'jsdom',
10    include: ['./all-tests/vitest-unit-tests/**/*.{test, spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
11    setupFiles: ['./vitest-setup.js']
12  }
13})

Installing @testing-library/user-event

For you to be able to perform user interaction on selected DOM nodes on a web page, you need to install testing-library/user-event, a companion library that provides the ability to simulate user actions such as mouse events and keyboard navigation. Install user-event as one of your project's devDependencies by running this command on your terminal:

1npm install --save-dev @testing-library/user-event 

Running Unit Tests in Next.js with Vitest

To confirm that you have installed all the dependencies that you need for the Vitest unit tests in Next.js, check the devDependencies field in your package.json file:

1{
2  // ...
3  "devDependencies": {
4    "@testing-library/dom": "^10.4.0",
5    "@testing-library/jest-dom": "^6.6.3",
6    "@testing-library/react": "^16.0.1",
7    "@testing-library/user-event": "^14.5.2",
8    "@types/node": "^22.10.1",
9    "@vitejs/plugin-react": "^4.3.4",
10    "eslint": "^8",
11    "eslint-config-next": "15.0.3",
12    "jsdom": "^25.0.1",
13    "postcss": "^8",
14    "tailwindcss": "^3.4.1",
15    "vitest": "^2.1.6"
16  }
17}

Next, in the "scripts" field inside your package.json file, add "test": "vitest":

1{
2  "scripts": {
3    "dev": "next dev",
4    "build": "next build",
5    "start": "next start",
6    "lint": "next lint",
7    "test": "vitest"
8  }
9}

Adding "test": "vitest" enables you to run your unit tests with the command:

1npm run test 
2# or 
3yarn test
4# or
5pnpm test
6# or
7bun run test

Alternatively, you can run your unit tests directly, using the npx vitest command.

Writing Unit Tests in Next.js with Vitest

Testing Next.js Apps Server Side

Here, we will be testing Next.js apps server side. The app/grandSlam/page.jsx file below is an example of a synchronous server component. We will be writing tests to check if the component displays the lists of tournaments as we would prefer.

1//  app/grandSlam/page.jsx
2
3export default function GrandSlam() {
4  return (
5    <main>
6      <h1>
7        The Grand Slam consists of four major tournaments in the tennis
8        championship. A player who wins all four championships is said to be a
9        Grand Slam winner.
10      </h1>
11      <p>These championships are:</p>
12      <ul>
13        <li>Australian Open</li>
14        <li>French Open</li>
15        <li>Wimbledon</li>
16        <li>US Open</li>
17      </ul>
18    </main>
19  );
20}

Inside the all-tests/vitest-unit-tests folder, create a grandSlam.test.jsx file and add the code below. Remember that we will be saving all our other unit tests in the same all-tests/vitest-unit-tests folder.

1// grandSlam.test.jsx
2
3import {test, describe, expect } from 'vitest'
4import {render, screen, within } from '@testing-library/react'
5
6import GrandSlam from '../../app/grandSlam/page'
7
8render(<GrandSlam/>)
9
10test('has the tournament keyword', () => {
11    const tournamentKeyword = within(screen.getByText(/tournament/i))
12
13    expect(tournamentKeyword).toBeDefined()
14})
15
16describe('has all the four grand slam tournaments', () => {
17
18    test('has Australian Open tournament', () => {
19        expect(screen.getByText(/australian open/i)).toBeDefined()
20    })
21
22    test('has French Open tournament', () => {
23        expect(screen.getByText(/french open/i)).toBeDefined()
24    })
25
26    test('has Wimbledon tournament', () => {
27        expect(screen.getByText(/wimbledon/i)).toBeDefined()
28    })
29
30    test('has US Open tournament', () => {
31        expect(screen.getByText(/us open/i)).toBeDefined()
32    })
33})
34
35// This test case has the options argument, using the object syntax to specify a skipped test
36
37test('has the tennis keywords', { skip: true}, () => {
38    const tennisKeyword = within(screen.getByText('tennis'))
39
40    expect(tennisKeyword).toBeDefined()
41})
42
43// Alternatively, you can indicate the options argument using the dot syntax to specify a skipped test
44
45test.skip('this test case will be skipped', () => {})
46
47describe.skip('this test suite will be skipped', () => {})

Run the tests with the command: npm run test grandSlam.test.jsx.

In the grandSlam.test.jsx file above,

• test: specifies a test case and receives three arguments Test name, Options, and Function.

• Test name: A string that explains the purpose of each test case.

• Options: An object to specify how the test behaves. It is not necessary to use the options arguments.

• Function: returns the code written for the test execution, including queries and assertions, which will be discussed later in this article.

• describe: specifies a test suite. A test suite is a collection of multiple test cases. You can use the describe function to group similar test cases. It helps to improve test readability.

• render: loads the component on the web page by creating a new node which is appended to document.body. You must render the component you want to test.

• screen: gains access to DOM nodes that are rendered on the web page with the help of different query methods.

• within: points to the fact that we want to interact with nodes that can only be found directly under their parent DOM nodes.

• expect: executes or asserts the selected DOM nodes or elements and checks if they behave exactly the way we want them to.

• skip: An option that specifies that an exact test will be skipped while running a test file.

Querying the DOM

To find certain DOM nodes or elements on the web page, use Queries. There are different categories of Queries: get, find and query.

To query single elements, use: getBy..., findBy..., or queryBy.... To query multiple elements at once, use: getAllBy..., findAllBy..., or queryAllBy....

Let us understand the difference between each category of Queries:

• get: Throws an error message if the requested node cannot be found.

• query: Returns null or an empty array if the requested node cannot be found.

• find: Shows that a Promise is being rejected if the requested node cannot be found.

Making Assertions with Vitest in Next.js

To assert or confirm that a value is present or not present in your tests, you need to use matches, which return the exact values. Examples of matchers are: toBe(), toContain(), toHaveTextContent(), toHaveLength(), toBeChecked(), toHaveValue(), toBeVisible(), toBeInTheDocument(), toContainElement(), toHaveFocus().

You can make negative assertions with the .not modifier. For example, expect(selectedElement).not.toBeInTheDocument() asserts that the selected element is not rendered on the web page.

Check these guides to have a better understanding of when to use Vitest matchers and Jest-DOM matchers.

Using Different Queries Methods with Vitest in Next.js

• ..ByText(): Useful when you need to find an element based on its contents, which are texts only. You can match a text either with the use of a string or a regular expression (regex). Regex helps to handle case-sensitive values.

For example,

1// with regex
2screen.getByText(/australian open/i)
3
4// with string
5screen.getByText('Australian Open')

• ..ByRole(): Role defines the purpose, layout or appearance of an element, such that it can be easily understood by assistive technologies. When you use the ..ByRole query method, you can interact with a node based on its accessible name. Other examples of matchers that can be found by roles include: generic, heading, img, button, tab, textbox, and dialog.

For example, in the app/sports/tennis/page.jsx component:

1// app/sports/tennis/page.jsx
2
3export default function Tennis() {
4
5    return(
6        <div>
7            <h1>Tennis</h1>
8            <h2>The modern tennis game is played in singles (one player versus another), doubles (teams of two), and mixed doubles (mixed gender teams) and features a scoring system across international events.</h2>
9            <h3>Tennis has a long history, but the birth of the game played is thought to have taken place in England.</h3>
10
11            <h4>The Grand Slams:</h4>
12            <ul className='grand-slam--lists'>
13                <li>Australian Open</li>
14                <li>French Open</li>
15                <li>Wimbledon</li>
16                <li>US Open</li>
17            </ul>
18
19            <div>
20                <button role='tab' aria-busy='false' >Learn how to play</button>
21                <button role='tab' aria-busy='false'>Watch Games</button>
22                <button role='tab' aria-busy='true'>Buy Ticket</button>
23                <button role='tab' aria-busy='false'>Find a team mate</button>
24            </div>
25
26            <div>
27                <h4>How to play:</h4>
28                <p>The players face each other on the opposite sides of the net.</p>
29                <p>The ball is played back and forth over the tennis.</p>
30            </div>
31
32            <h4>The tennis court is a firm rectangular surface with a low <span role="textbox">net</span> stretched across the centre.</h4>
33        </div>
34    )
35}

Create a tennisPage.test.jsx file inside the all-tests/unit-tests folder:

1// tennisPage.test.jsx
2
3import {test, expect } from 'vitest'
4import {render, screen, within } from '@testing-library/react'
5
6import Tennis from '../../app/sports/tennis/page'
7
8render(<Tennis/>)
9
10test('heading element with the word: the modern tennis, contains the word: game', () => {
11    // query heading element by role and filter based on its level and text name
12    const tennisDescription = screen.getByRole('heading', { level: 2, name: /the modern tennis/i })
13    expect(tennisDescription).toHaveTextContent('game')
14})
15
16test('tennis game history includes the word: england', () => {
17    const tennisHistory = screen.getByRole('heading', { level: 3, name: /history/i })
18    // query child element by text
19    const country = within(tennisHistory).getByText(/england/i )
20    expect(tennisHistory).toContain(country)
21
22    expect(tennisHistory).not.toHaveTextContent(/france/i)
23})
24
25test('tennis rule includes the words: singles, doubles, and mixed doubles', () => {
26    const tennisRule = screen.getByRole('heading', { level: 2, name: /tennis game is played in/i })
27    expect(tennisRule).toHaveTextContent(/singles/i)
28    expect(tennisRule).toHaveTextContent(/doubles/i)
29    expect(tennisRule).toHaveTextContent(/mixed doubles/i)
30})
31
32test('grand slam has four tournaments', () => {
33    // query list items
34    const grandSlam = screen.getAllByRole('listitem')
35    expect(grandSlam).toHaveLength(4)
36})
37
38test('the buy ticket button is active', () => {
39    // query elements based on aria states and filter based on aria attributes
40    const activeButton = screen.getByRole('tab', { busy: true })
41    expect(activeButton).toHaveTextContent(/buy ticket/i)
42})
43
44test('tennis court description includes the word net', () => {
45    // query nested element from the parent element
46    const tennisCourt = screen.getByRole('heading', { level: 4, name: /the tennis court is a/i })
47    const tennisCourtItem = within(tennisCourt).getByRole('textbox')
48    expect(tennisCourtItem).toHaveTextContent(/net/i)
49})

• ..ByLabelText(): Used to query input elements based on their label texts. For example,

1<label>Username <input type='text' /></label>
2
3<label htmlFor='username'>Username</label><input type='text' id='username' />
4
5<label id='username'>Username</label<input type='text' aria-labelledby='username' />
6
7<input aria-label='Username' type='text' />

All the input elements can be queried individually in the same way using: screen.getByLabelText(/username/i)

• ..ByAltText(): Used to query image elements based on their alt texts. For example,

1// app/tennisImage/page.jsx
2
3import Image from "next/image"
4
5import tennisImage from '../../public/tennisImage.png'
6
7export default function TennisImage() {
8    // ...
9
10    return(
11        <div>
12            <Image
13                aria-label='a new tennis image'
14                src={tennisImage}
15                alt='a tennis player, wearing a white shirt and a white shorts.'
16                width={600}
17                height={600}
18            />
19        </div>
20    )
21}

Query the tennis image by using screen.getByAltText(/a tennis player/i) and screen.getByRole('img', {name: /a new tennis image/i }):

1// tennisImage.test.jsx
2
3import {test, describe, expect } from 'vitest'
4import {render, screen, within } from '@testing-library/react'
5
6import TennisImage from '../../app/tennisImage/page'
7
8
9render(<TennisImage/>)
10
11
12test('query image by role', () => {
13    const image = screen.getByRole('img', {name: /a new tennis image/i })
14    expect(image).toBeInTheDocument()
15})
16
17test('query image by alt-text', () => {
18    const image = screen.getByAltText(/a tennis player/i)
19    expect(image).toBeInTheDocument()
20})

• ..ByTestId(): When other query methods seem to be unable to work for you, you can search for an element by setting its data-testid attribute. For example:

1<div data-testid='french-cuisine'>French Cuisine: Escargots, Macarons, Coq au vin, French onion soup.</div>
2
3<div data-testid='italian-cuisine'>Italian Cuisine: Margarita, Lasagna, Fettucini Alfredo, Bruschetta.</div>

Using getByTestId():

1// French cuisine
2screen.getByTestId('french-cuisine')
3
4// Italian cuisine
5screen.getByTestId('italian-cuisine')

Other query methods

• ..ByPlaceholderText(): Used to query the placeholder texts of an input element.

For example,

1<input type='email' placeholder='Enter your email address' />

1screen.getByPlaceholderText(/enter your email address/i )

• ..ByDisplayValue(): Used to query input, textarea, or select elements. For example,

1<input aria-label='Well done' type='text' />
2
3<textarea>Well done</textarea>
4
5<select>
6    <option>Well done</option>
7</select>

Query all the display values of the elements using: screen.getAllByDisplayValues(/well done/i )

• ..ByTitle(): Used to query elements with title attributes or title elements. For example,

1<span title='watch' id='2'></span>
2
3<svg><title>profile image</title><g><path /></g></svg>

Query the titles by using:

1screen.getByTitle('watch')
2screen.getByTitle('profile image')

Testing User Interaction in Next.js Client Components with Vitest

Create a app/cuisine/page.jsx client component that updates the user interface based on the clicked buttons:

1// app/cuisine/page.jsx
2
3'use client'
4
5import { useState } from "react"
6import './cuisine.css'
7
8export default function Cuisine() {
9
10    const [italianCuisine, setItalianCuisine] = useState(false)
11    const [frenchCuisine, setFrenchCuisine] = useState(false)
12
13
14    function italianCuisineHandler() {
15        setItalianCuisine(true)
16        setFrenchCuisine(false)
17    }
18
19    function frenchCuisineHandler() {
20        setFrenchCuisine(true)
21        setItalianCuisine(false)
22    }
23
24
25    return (
26        <main>
27
28            <h3>Click on your desired cuisine</h3>
29
30            <div className='buttons'>
31                <button onClick={italianCuisineHandler} className='italianButton'>Italian Cuisine</button>
32                <button onClick={frenchCuisineHandler} className='frenchButton'>French Cuisine</button>
33            </div>
34
35
36            { italianCuisine && (
37                <div className='italianCuisine'>
38                    <h2>Italian Cuisine</h2>
39
40                    <h4>Margarita</h4>
41                    <h4>Lasagna</h4>
42                    <h4>Fettucini Alfredo</h4>
43                    <h4>Bruschetta</h4>
44                </div>
45            )}
46
47            { frenchCuisine && (
48                <div className='frenchCuisine'>
49                    <h2>French Cuisine</h2>
50
51                    <h4>Escargots</h4>
52                    <h4>Macarons</h4>
53                    <h4>Coq au vin</h4>
54                    <h4>French onion soup</h4>
55                </div>
56            )}
57        </main>
58    )
59}

To test the client component, create a cuisinePage.test.jsx file inside the all-tests/vitest-unit-tests folder:

1// cuisinePage.test.jsx
2
3import {test, expect } from 'vitest'
4import {render, screen, within } from '@testing-library/react'
5import userEvent from '@testing-library/user-event'
6
7import Cuisine from '../../app/cuisine/page'
8
9render(<Cuisine />)
10
11
12test('italian cuisines are displayed when italian cuisine button is clicked', async () => {
13    const user = userEvent.setup()
14
15    const italianButton = screen.getByRole('button', { name: /italian/i })
16
17    await user.click(italianButton)
18
19    expect(screen.getByText(/Margarita/i)).toBeInTheDocument()
20    expect(screen.getByText(/Lasagna/i)).toBeInTheDocument()
21    expect(screen.getByText(/Fettucini Alfredo/i)).toBeInTheDocument()
22    expect(screen.getByText(/Bruschetta/i)).toBeInTheDocument()
23    expect(screen.getByText(/Margarita/i)).toBeInTheDocument()
24})
25
26
27test('french cuisines are displayed when french cuisine button is clicked', async () => {
28    const user = userEvent.setup()
29
30    const frenchButton = screen.getByRole('button', { name: /french cuisine/i })  
31
32    await user.click(frenchButton)
33
34    expect(screen.getByText(/Escargots/i)).toBeInTheDocument()
35    expect(screen.getByText(/Macarons/i)).toBeInTheDocument()
36    expect(screen.getByText(/Coq au vin/i)).toBeInTheDocument()
37    expect(screen.getByText(/French onion soup/i)).toBeInTheDocument()
38})

In the cuisinePage.test.jsx file, we imported userEvent and called the setup method using userEvent.setup(). setup() allows us to call multiple user interaction methods that share the same input device state.

Other methods that can be called from userEvent() include:

1import userEvent from '@testing-library/user-event'
2
3const user = userEvent.setup()
4
5// Press the Shift key without releasing it
6await user.keyboard('[ShiftLeft>]') 
7
8// Perform a click while the shift key is still pressed
9await user.click(element) 

You can select options using:

1import userEvent from '@testing-library/user-event'
2
3const user = userEvent.setup()
4
5// ...
6
7await user.selectOptions(screen.getByRole('listbox'), ['1', 'C'])

You can upload files using: user.upload(), type a text using: user.type(), clear an editable element using: user.clear(). Read this guide for a complete understanding of userEvent utilities and how to use them.

Next.js End-to-End Testing with Playwright

In the previous section of this article, we wrote unit tests for our client components and synchronous server components using Vitest with React Testing Library. In this section, we will be writing End-to-End (e2e) tests for our asynchronous server components using Playwright. End-to-End tests involve the entire flow of the processes that are encountered in an application. For example, all the workflows involved in a login process.

Setup and Installation

In this article, we already have an existing Next.js project. Install Playwright Test by running the command on your terminal:

1npm init playwright@latest
2# or
3yarn create playwright@latest
4# or
5pnpm create playwright

Once you run the Playwright installation command above, you will be prompted with a set of questions that you need to provide with responses. Remember that the project in this article is written in JavaScript. For the prompt: where do you want to put your end-to-end tests, provide the response: all-tests/e2e-tests. This will enable you to save all your e2e tests in the same folder. Alternatively, in the playwright.config.js|ts file that is created after the installation is complete, you can manually specify the folder you want to save all your e2e tests by changing the testDir value to your preferred folder:

1// playwright.config.js
2
3const { defineConfig, devices } = require('@playwright/test');
4
5module.exports = defineConfig({
6  testDir: './all-tests/e2e-tests',
7  // ...
8})

Inside the all-tests/e2e-tests folder, you will have an automatically created example.spec.js test file. We will be saving all our other e2e test files with a .spec extension.

Running End-to-End Tests

Run your playwright tests with any of these commands on your terminal:

1npx playwright test
2# or
3yarn playwright test
4# or
5pnpm exec playwright test

To run a specific test file, use the command: npx playwright test [your-file-name]. You can also run multiple test files that are saved in separate folders using this command as an example: npx playwright test [e2e-tests/folder1] [e2e-tests/folder2]. To re-run failed tests, use the command: npx playwright test --last-failed.

You can receive a visual report about your tests and have a better understanding of the processes involved while running your tests by using the command: npx playwright test --ui on your terminal. It enables you to run your tests in a UI mode. Click the triangle icon on the sidebar to run each test.

Before running your Playwright tests, ensure that the local development server is running in a separate terminal with the npm run dev command. Or, if you want to avoid running the development server manually, include the address of your local development server in the webServer field as shown in the playwright.config.js file below:

1// playwright.config.js
2
3const { defineConfig, devices } = require("@playwright/test");
4
5module.exports = defineConfig({
6  // ...
7
8  projects: [
9    // ...
10  ],
11  webServer: {
12    command: "npm run dev",
13    url: "http://127.0.0.1:3000",
14    reuseExistingServer: !process.env.CI,
15  },
16});

Configuring Playwright Browsers or Projects

End-to-end tests involve setting up a browser for a complete workflow process. In Playwright, browsers are also known as projects. Inside the playwright.config.js|ts file shown below, it can be confirmed that the three browsers where you can simulate your e2e tests are Chromium, Firefox, and Webkit.

1// playwright.config.js
2
3const { defineConfig, devices } = require('@playwright/test');
4
5module.exports = defineConfig({
6    // ...
7    
8    projects: [
9    {
10      name: 'chromium',
11      use: { ...devices['Desktop Chrome'] },
12    },
13
14    {
15      name: 'firefox',
16      use: { ...devices['Desktop Firefox'] },
17    },
18
19    {
20      name: 'webkit',
21      use: { ...devices['Desktop Safari'] },
22    },
23  ],
24  
25  // ...
26})

You can install other browsers or projects using the command: npx playwright install msedge for example to install Microsoft Edge or npx playwright install chrome to install Google Chrome. If you want to gain a better understanding of other browsers that can equally be installed, check this guide.

To run your test with a single browser, use the --project flag in your command: npx playwright test --project=[browser-name] or, npx playwright test --project=[browser-name-1] --project=[browser-name-2] for multiple browsers.

Declaring Playwright Semantic Checking Directives

Playwright allows you to run your tests with directives that can be declared to check semantics and errors. These directives are optional in terms of usage, and they include:

• // @ts-check: allows semantic checking in JavaScript and must be declared at the top level of a test file.

• // @ts-nocheck: Disables semantic checking in a JavaScript file and must be declared at the top level of a test file.

• // @ts-ignore: ignores the error feedback that is determined by // @ts-check, and must be declared on the line directly before the encountered error feedback.

• // @ts-expect-error: specifies that the test should expect and ignore more than one semantic error feedback that is determined by // @ts-check, and must be declared on the line directly before the encountered error feedback.

Skipping Tests

To skip a test, use test.skip(). For example,

1test.skip('this test will be skipped', async ({page}) => {
2    // ...
3})

Alternatively, you can skip a test based on specified conditions. For example, the test will be skipped if this condition is true:

1test('this test will be skipped', async ({page}) => {
2    test.skip(browserName === 'firefox', 'Still working on it')
3    // ...
4})

Running Specific Tests only

To focus on the execution of a specific test among other tests in a test file, use test.only(). For example,

1test.only('this test will be focused on during tests execution', async ({page}) => {
2    // ...
3})

Grouping Tests

You can group multiple tests that have similar purposes by using test.describe(). For example,

1test.describe("grouped test", () => {
2  test("test 1", async ({ page }) => {
3    // ...
4  });
5
6  test("test 2", async ({ page }) => {
7    // ...
8  });
9
10  test("test 3", async ({ page }) => {
11    // ...
12  });
13});

Speed up Tests Execution by Specifying Timeouts

Playwright tests are executed within a timeout of 30 seconds for tests and 5 seconds for assertions. In some cases, tests may need to take a longer time before they are executed completely; you can specify the timeout by using any of these techniques:

• Specify the timeout for a single test: You can change the timeout for a single test by using test.setTimeout(). For example,

  1import { test, expect } from '@playwright/test';
  2
  3test('slow test', async ({ page }) => {
  4  test.slow(); // Easy way to triple the default timeout
  5  // ...
  6});
  7
  8test('very slow test', async ({ page }) => {
  9  test.setTimeout(120_000);
  10  // ...
  11});

• Specify the timeout for assertions: You can change the timeout for a single assertion by using timeout as shown in the example below:

  1import { test, expect } from '@playwright/test'
  2    
  3test('example', async ({ page }) => {
  4    await expect(locator).toHaveText('hello', {timeout: 10_000})
  5})

• Specify the timeout in the playwright.config file: You can set the same timeouts for multiple tests and multiple assertions in the playwright.config file as shown below:

  1import { defineConfig } from '@playwright/test'
  2
  3export defaultConfig({
  4    // test timeout sets to 120 secs
  5    timeout: 120_000,
  6    
  7    // expect timeout sets to 10 secs
  8    expect: {
  9    timeout: 10_000,
  10    }
  11})

• Specify the timeout in beforeEach hook: To indicate the timeout in the beforeEach hook, use testInfo.setTimeout():

  1import { test, expect } from '@playwright/test';
  2
  3test.beforeEach(async ({ page, testInfo }) => { 
  4    // extend timeout for all tests running this hook by 30 secs
  5    testInfo.setTimeout(testInfo.timeout + 30_000)
  6})

• Specify the timeout in beforeAll and afterAll hooks: To indicate the test timeout while using either the beforeAll or afterAll hook in your test file, use test.setTimeout():

  1import { test, expect } from '@playwright/test';
  2
  3test.beforeAll(async () => {
  4    // set timeout for this hook
  5    test.setTimeout(60000)
  6})

  When using beforeAll and afterAll hooks separately in your test file, call testInfo.setTimeout() inside each hook. For example,

  1import { test, expect } from '@playwright/test';
  2
  3test.beforeAll(async () => {
  4    // extend timeout for all tests running this hook by 60 secs
  5    testInfo.setTimeout(testInfo.timeout + 60_000)
  6})
  7
  8test.afterAll(async () => {
  9    // extend timeout for all tests running this hook by 80 secs
  10    testInfo.setTimeout(testInfo.timeout + 80_000)
  11})

Writing Playwright Tests in Next.js

For example,

1test('how to write playwright tests', async ({ page }) => {
2    // ...
3    page.goto('/homePage')
4})

The { page } argument passed into the async function above is a test fixture that isolates the page for each test run and provides methods to interact with a single tab in a browser. Other arguments that may be passed into the async function include:

• browser: can be used to create a new page.

• context: provides a way to operate multiple independent browser context.

• chromuim, webkit, firefox : specifies the name of the browser currently running the test.

• request: enables API requests. For example:

1test('network request', async ({ request }) => {
2    // ...
3    const response = request.get()
4})

The example below demonstrates how to create a new page from a browser's context. This is because we are using the browser test fixture:

1test('using browser to create context and page', async ({ browser }) => {
2    // create a new incognito browser context
3    const context = await browser.newContext()
4    // create a new page inside context
5    const page = await context.newPage()
6    await page.goto('127.0.0.1/aboutPage')
7    // closes it once it is no longer needed
8    await context.close()
9    
10    // ....
11
12    context.close()
13})

In the examples below, we want to run an end-to-end test against our /sample page, to confirm that when the link on the sample page is clicked, we are redirected to the /players page.

Create a app/sample/page.jsx file:

1// app/sample/page.jsx
2
3import Link from "next/link"
4
5export default function Sample() {
6    return(
7        <main>
8            <h3><Link href='/players'>Meet the players</Link></h3>
9        </main>
10    )
11}

Next, create a app/players/page.jsx file:

1// app/players/page.jsx
2
3export default function Players() {
4
5    return(
6        <main>
7            <h2>Our awesome players</h2>
8
9            <div>
10                <h4>Activities with teams:</h4>
11                <p>Sign up</p>
12                <p>Find a team mate</p>
13                <p>Switch with another team</p>
14            </div>
15            
16            <div>
17                <h4>Activities with players:</h4>
18                <p>Learn from players</p>
19                <p>Speak with players</p>
20                <p>Compete with players</p>
21                <p>Write to players</p>
22            </div>
23
24            <div>
25                <h4>All players</h4>
26                <ul>
27                    <li>Player A</li>
28                    <li>Player B</li>
29                    <li>Player C</li>
30                    <li>Player D</li>
31                </ul>
32            </div>
33
34        </main>
35    )
36}

Create an e2eSampleTest.spec.js file inside the all-tests/e2e-tests folder. This test visits the sample page, locates the link element, clicks on the locator, and then waits for the player's page URL to load before confirming that the current page is equal to the player's page URL. //@ts-check performs semantic checking:

1// all-tests/e2e-tests/e2eSampleTest.spec.js
2
3
4//@ts-check
5
6import { test, expect } from '@playwright/test'
7
8
9test('should redirect to players page', async ({ page }) => {
10
11    // visit sample page url
12    await page.goto('/sample')
13
14    // locate heading element
15    const heading = page.getByRole('heading')
16
17    // locate link element from heading locator
18    await heading.getByText('Meet the players', { exact: true }).click()
19
20    // wait for players url to load
21    await page.waitForURL(/.*\/players/)
22
23    // assert that the current page url is exactly the players url 
24    await expect(page).toHaveURL(/.*\/players/)
25
26})

Run the e2eSampleTest.spec.js test file by using the command npx playwright test e2eSampleTest.spec.js on your terminal.

Here, we want to run the e2eSampleTest.spec.js file with UI mode by using the command below:

npx playwright test --ui e2eSampleTest.spec.js

Interacting with a Tab in a Browser: page Test Fixture

In the e2eSampleTest.spec.js file above, the two arguments that are called inside the test() function are: the test name and an async function. Inside the async function, the { page } argument allows you to interact with a single tab in a browser. page.goto() visits the URL of the page we want to test.

Other page methods include: page.content() which returns all the contents in a tab including the doctype contents, page.goBack() returns the previous page that was visited before the current page, page.reload() reloads the current page, page.screenshot() returns the captured screenshot on the page.

You can simulate a web page with methods such as page.clock(), page.coverage(), page.mouse(), page.request(), page.touchscreen(). You can handle events with the page.on() method. Read more about how to use other page methods.

Finding Elements Directly from page or with The use of Locators

You can find elements from a web page by using any of the seven page.getBy... methods: getByAltText(), getByLabel(), getByPlaceholder(), getByRole(), getByTestId() getByText(), getByTitle(). Or, by using page.locator() method. page.locator() accepts the name of an element as an argument.

The example below shows how to locate elements using different locator methods:

1await page.locator('h1')
2await page.locator('li')
3
4await page.getByRole('heading')
5await page.getByRole('listitem')
6await page.getByRole('link')
7
8// locate element based on its exact value
9await page.getByText('this value can be found', { exact: true })
10
11const locatedElement = page.getByText('this is a parent element')
12
13// locate child element
14await page.locator(locatedElement).getByText('this is a child element')
15await locatedElement.getByText('this is a child element')
16
17// locate div element and filter based on its specific text
18await page.getByRole('generic').filter( { hasText: 'this text can be found' })
19
20// locate div element and filter based on its child element
21await page.getByRole('generic').filter({ has: page.getByRole('listitem')})

Performing Actions on Locators in Next.js

You can perform actions such as click(), press(), blur(), and check() on Locators. Read this guide to have a complete list of possible actions that can be performed on locators.

For example:

1<input aria-label="email">
2
3<label htmlFor="password-input">Password:</label>
4<input id="password-input">

You can fill the input elements using locator.fill() method:

1page.getByLabel('email').fill('example@email.com')
2page.getByLabel('Password').fill('mypassword')

Making Assertions with expect() Method

To assert your test and confirm that the located elements can be found on the page, use the expect() method. For example: expect(locatedElement).toBeVisible(), toHaveText(), toBeChecked(), toContainText(),toHaveCount(), toHaveValue() for input, toHaveValues for multiple select options, toHaveURL() for page URL, toHaveTitle() for page title, toBeOK() for API response OK status. Read more about Playwright assertion methods.

Here, we want to test app/players/page.jsx, which we previously wrote in this article. Create a playersPage.spec.js test file in the all-tests/e2e-tests file:

1// playersPage.spec.js
2
3import { test, expect } from '@playwright/test'
4
5
6test('locate heading element by role', async ({ page }) => {
7    await page.goto('/players')
8
9    const headingA = page.getByRole('heading').filter( { hasText: 'Our awesome' } )
10    await expect(headingA).toContainText('players')
11})
12
13
14test('locate heading element by exact text', async ({ page }) => {
15    await page.goto('/players')
16
17    const headingB = page.getByText('Activities with teams:', { exact: true })
18    await expect(headingB).toBeDefined()
19})
20
21
22test('locate paragraph element', async ({ page }) => {
23    await page.goto('/players')
24
25    const playerActivities = page.locator('.activities-with-players').getByRole('paragraph')
26
27    await expect(playerActivities).toContainText(['Learn', 'Speak', 'Compete', 'Write'])
28})
29
30
31test('locate list items as a child element', async ({ page }) => {
32    await page.goto('/players')
33
34    const parentElement = page.locator('.all-players')
35
36    const allPlayersLists = parentElement.getByRole('listitem')
37  
38    await expect(allPlayersLists).toHaveCount(4)
39    await expect(allPlayersLists).toContainText(['A', 'B', 'C', 'D'])
40})

How to Test Async Server Components Fetching Data from an API in Next.js

The olympics/page.jsx file below is an async server component that performs data fetching directly from the olympics api. Create the olympics api inside app/api/olympics/route.js api route handler:

1// app/api/olympics/route.js
2
3import { NextResponse } from "next/server";
4
5export async function GET(request) {
6  return NextResponse.json(
7    [
8      {
9        id: "1",
10        name: "Golf",
11        about:
12          "Golf is a sport where the idea is to hit a ball with a club from the tee into the hole in as few strokes as possible.",
13        rules:
14          "The essential rule of golf is, for each stroke, the player to play the ball as it lies, and the course as they find it.",
15      },
16    ],
17    {
18      headers: { "Content-Type": "application/json" },
19    },
20  );
21}

The olympics API executes a GET request and is fetched directly inside the app/olympics/page.jsx async server component:

1// app/olympics/page.jsx
2
3export default async function Olympics() {
4  const response = await fetch("http://127.0.0.1:3000/api/olympics");
5  const results = await response.json({});
6
7  return (
8    <main>
9      <h1>The olympics</h1>
10
11      {results.map((result) => {
12        return (
13          <div key={result.id}>
14            <h2>{result.name}</h2>
15            <p>{result.about}</p>
16            <p>{result.rules}</p>
17          </div>
18        );
19      })}
20    </main>
21  );
22}

Create an olympicsPage.spec.js file directly inside your all-tests/e2e-tests folder.

1// olympicsPage.spec.js
2
3import { test, expect } from "@playwright/test";
4
5// MOCK API REQUEST
6
7test("mock the olympics api", async ({ page }) => {
8  // mock the api call before navigating
9  page.route("http://127.0.0.1:3000/api/olympics", async (route) => {
10    const json = {
11      id: "2",
12      name: "Archery",
13      about:
14        "Archery is one of the oldest sports still practised, and is closely linked to the development of civilisation. Using bows and arrows, the sport has a history dating back thousands of years.",
15      rules:
16        "That depends on the type of archery being practised as sport, with different disciplines and rules regarding the type of bow that can be used. At the Olympics, outdoor target archery is practised with recurve bows.",
17    };
18    await route.fulfill({ json });
19  });
20
21  // go to the olympics page
22  await page.goto("/olympics");
23
24  // assert that certain words are visible
25  await expect(page.getByText(/the olympics/)).toBeDefined();
26  await expect(page.getByText(/Using bows and arrows/)).toBeDefined();
27});
28
29// MODIFY API RESPONSES
30
31test("modify the olympics api", async ({ page }) => {
32  // get the response and add to it
33  await page.route("http://127.0.0.1:3000/api/olympics", async (route) => {
34    // make network request
35    const response = await route.fetch();
36    const json = await response.json();
37
38    json.push({
39      id: "3",
40      name: "Swimming",
41      about:
42        "Swimming at the Olympics is both an individual and team sport where competitors propel their bodies through water in either an outdoor or indoor swimming pool using one of the following strokes: Freestyle, backstroke, breaststroke, or butterfly.",
43      rules:
44        "Athletes race using one of four strokes - freestyle, backstroke, breaststroke and butterfly - or all of them in the individual medley (IM) events.",
45    });
46
47    // fulfill using the original response, while patching the response body with the given JSON object.
48    await route.fulfill({ response, json });
49  });
50
51  // go to the olympics page
52  await page.goto("/olympics");
53
54  // assert that certain words are visible
55  await expect(page.getByText(/the olympics/)).toBeDefined();
56  await expect(
57    page.getByText(/propel their bodies through water/),
58  ).toBeDefined();
59});

In the olympicsPage.spec.js file above, we implemented our e2e testing in two ways: by mocking the API, and by modifying the API. Let us understand the process involved in:

• Mocking the API: We simulated the Olympics API, which does not involve a direct network request, and fulfilled the API with mocked data, then visited the page URL and asserted that the page renders data from the fulfilled API.

• Modifying the API: In this process, we made an API request, and patched new data to the original response while fulfilling the API, then visited the URL and asserted that the data was visible.

Testing Next.js Components That Fetch and Update Data via Server Actions

You can also test other NextJs components using Playwright. The ticketSales/page.jsx file below is a client component that fetches data directly from the user interface with the help of the ticketSalesAction.js server action.

Create a buyTicket server action inside app/ticketSales/ticketSalesAction.js file:

1// app/ticketSales/ticketSalesAction.js
2
3"use server";
4
5export async function buyTicketAction(prevState, formData) {
6  const ticketSalesData = {
7    ticketType: formData.get("ticketType"),
8  };
9
10  const newTicketType = await ticketSalesData.ticketType;
11
12  // data mutation
13
14  if (
15    newTicketType === "regular" ||
16    newTicketType === "vip" ||
17    newTicketType === "vvip"
18  ) {
19    return `an exquisite ${newTicketType} ticket`;
20  }
21
22  return "an invalid ticket";
23}

Call the buyTicketAction inside app/ticketSales/page.jsx:

1// app/ticketSales/page.jsx
2
3"use client";
4
5import { useActionState } from "react";
6import { buyTicketAction } from "./ticketSalesActions";
7
8export default function TicketSales() {
9  const [formState, formAction] = useActionState(buyTicketAction);
10
11  return (
12    <main style={{ fontSize: "36px" }}>
13      <form action={formAction}>
14        <label htmlFor="ticket-type" aria-label="ticket-type">
15          Ticket Type
16        </label>
17        <input
18          type="text"
19          id="ticket-type"
20          name="ticketType"
21          required
22          placeholder="are you buying a regular, VIP, or VVIP ticket?"
23          style={{
24            border: "1px solid black",
25            display: "block",
26            fontSize: "16px",
27            width: "500px",
28            margin: "20px 0",
29            padding: "5px",
30          }}
31        />
32
33        <button
34          type="submit"
35          style={{
36            backgroundColor: "black",
37            color: "white",
38            fontSize: "20px",
39            padding: "5px",
40          }}
41        >
42          Buy Ticket
43        </button>
44      </form>
45
46      <div>
47        <h1>
48          Congratulations! You are rewarded with{" "}
49          <span style={{ backgroundColor: "thistle", padding: "2px" }}>
50            {formState}
51          </span>
52          . Enjoy the games and have fun!
53        </h1>
54      </div>
55    </main>
56  );
57}