How to visit an HTML page that is on my computer with Cypress

Learn how to test an HTML page that is only in your local environment

Today's “Pinch of cypress” is inspired by a question from Rafael Barbosa.

Thanks for the question, Rafael!

With Cypress, if you want to test a page that is only available on your computer, that is, it is not available via the internet, you can use the relative path of the page in the cy.visit() command.

Let's look at an example of an application that simulates Twitter.

// cypress/integration/sampleTwitterApp.spec.js

describe('Tweets', () => {
  beforeEach(() => cy.visit('../../Tweets/index.html'))

  it('tweet using a custom command', () => {
    cy.get('.tweet')
      .its('length')
      .then(numberOfTweetsBefore => {
        const newTweet = 'Yay, custom commands with Cypress!'

        cy.tweet(newTweet);

        cy.get('.tweet')
          .its('length')
          .should('be.gt', numberOfTweetsBefore);
        cy.get('.tweet')
          .last()
          .should('contain', newTweet);
      });
  });
});

As you can see, instead of passing an URL to the cy.visit() command, I am passing the relative path ../../Tweets/index.html, and my test behaves as if I were visiting a page on the web. 😄

For more information, visit the official docs.

Short post, but hopefully useful.

👋 See you next time!

---

Any thoughts about the series?

I'm looking forward to hearing your feedback!

---

This post was originally published in Portuguese on the Talking About Testing blog.

---

Want to go deeper?

I built a hands-on learning platform to take you from your first test to a complete end-to-end testing workflow with confidence. You'll find interactive lessons, coding challenges, and quizzes that cover real user interactions, accessibility checks, network mocking, API testing, and the automatic running of tests in CI/CD.

New courses are added over time, so there's always more to explore.

Explore the courses →