Getting Started

Get familiar with Cypress by testing a “Hello World” example.

We'll cover the following

“Hello World” in Next.js

We have set up a simple Next.js application with a single page accessible on the home page route /. The only thing it does is render the h1 element with the text, “Hello World.” Run the application below and see what it looks like on our browser.

import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
A Next.js test application

The first end-to-end test

For our “Hello World” example, we have a simple test. If you are not familiar with Cypress yet, don’t worry. We will cover all the requirements. Our first test visits our website at the path / and checks if the page contains the Hello World text. Click the “Run” button to run the test and see it log the result into the console.

describe("Landing page", () => {
  it("contains 'Hello World'", () => {
    cy.visit("/");
    cy.contains("Hello World");
  });
});
Cypress test

We have just accomplished our very first test.

Feel free to play around with the example above. Try changing the text from “Hello World” to “Banana” to see what happens.