With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds.

Cypress Community

I'm working on localhost so no web page. Here's the code for the 3 files 
support/commands.ts
/// <reference types="cypress" />
Cypress.Commands.add("getByData", (selector) => {
return cy.get('[data-test=${selector}]')
})

support/index.ts
declare namespace Cypress {
    interface Chainable {
      getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
    }
  }
  
e2e/home.ts
  describe('home page', () => {beforeEach(() =>{
  cy.visit('http://localhost:3000')
})
  it('the h1 contains the correct text', () => {
    
    cy.getByData('hero-heading').contains('Testing Next.js Applications with Cypress')
  })

  it('the features on the home page are correct', () => {
     cy.get("dt").eq(0).contains("4 Courses")
    cy.get("dt").eq(1).contains("25+ Lessons")
    cy.get("dt").eq(2).contains("Free and Open Source")


  })
  
  Error
Syntax error, unrecognized expression: [data-test=${selector}]