How to visit a 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 giving it the relative path ../../Tweets/index.html, and my test works as if I was visiting a page on the web. 😄

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.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.