Testing navigation and routing is a core part of end-to-end testing for React single-page applications. In these apps, navigation often happens without a full page reload. Instead, clicking a link updates the browser's URL and renders new content dynamically. To test navigation with Playwright, you need to simulate user actions—such as clicking navigation links or buttons—and then check that the application responds as expected.

A typical navigation test involves three main steps:

• Trigger navigation by interacting with a UI element, like clicking a link or a button;
• Assert that the browser's URL has changed to the expected route;
• Verify that the expected content for the new route is visible on the page.

This confirms both the routing logic and the correct rendering of routed components.

For example, if your app has a navigation bar with links to Home and About, a Playwright test would click the About link, check that the URL contains /about, and then assert that the About page content is displayed.

Handling browser history is also important in navigation tests. Users expect to use the browser's back and forward buttons to move between pages. Playwright allows you to simulate these actions in your tests. After navigating to a new route, you can call browser history methods to go back or forward, and then assert that the URL and page content update accordingly. This ensures your app's routing works seamlessly with browser navigation controls.

Testing navigation and routing in React apps with Playwright helps you catch issues where links are broken, routes are misconfigured, or content fails to render after navigation. It also gives you confidence that your app behaves like users expect when they interact with navigation elements or use browser history.

src/App.jsx

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav style={{ padding: 16 }}>
        <Link to="/">Home</Link>{" "}
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

e2e/tests/navigation.spec.ts

import { test, expect } from "@playwright/test";

test("user can navigate between pages", async ({ page }) => {
  await page.goto("/");

  // Navigate to About page
  await page.getByRole("link", { name: "About" }).click();

  // Assert URL change
  await expect(page).toHaveURL(/\/about$/);

  // Assert routed content
  await expect(
    page.getByRole("heading", { name: "About Page" })
  ).toBeVisible();

  // Go back in browser history
  await page.goBack();

  // Assert Home page is shown again
  await expect(page).toHaveURL("/");
  await expect(
    page.getByRole("heading", { name: "Home Page" })
  ).toBeVisible();
});