Skip to main content

Cypress visit Command

The purpose of visiting a remote URL falls into the hand of the Visit command in cypress. Always the best recommendation of using an URL while visiting is using the baseUrl. Because when we hardcode an URL cypress reloads the page due to some certificate issues which can sometimes be annoying.

To avoid these annoying things we use the baseUrl where we set the needed URL in a JSON file to load it from there in that way cypress won't reload the page after loading the test.

Syntax 

cy.visit(url)
cy.visit(url, options)
cy.visit(options)
  • url: The url to visit
  • options: url, method, body, headers, qs, log, auth, failOnStatusCode, onLoad, retryOnStatusCodeFailure, retryOnNetworkFailure, timeout

Example: Basic Authentication

Sometimes the site has an authentication thing which is called basic authentication of certain credentials to enter the site in that case the syntax differs.

cy.visit('https://www.programsbuzz.com/user/login', {
  auth: {
    username: 'kratos',
    password: 'axe',
  },
})

You can also provide the username and password directly in the url

cy.visit('https://kratos:axe@www.programsbuzz.com')

Example: Change the default timeout

Sometimes we might even set timeouts for the page to load in that case we can use the visit command like this too.

cy.visit('https://www.programsbuzz.com/user/login', { timeout: 20000 })

Example: For API Request

We can even use the API GET and POST method via the visit command the command is as follows.

cy.visit({
  url: 'https://reqres.in/api/users/2',
  method: 'POST',
  body: {
    name: 'George P. Burdell',
    email: 'burdell@microsoft.com',
  },
})

Visit command can also be used to submit a form.

Let's check out how to set baseUrl:

The default place to set is in cypress.json

{
    "baseUrl" : "https://www.programsbuzz.com/"
}
describe('Automating The Signin Of ProgramsBuzz Site',()=> {
    it('visit the site ',()=>{
        cy.visit('/')
  • Now the '/' visits the baseUrl mentioned site without reloading the page which is the best practice to use.
  • Now if we wanna use different endpoints instead of '/' and simply load the page.
  • Specify the endpoints to visit the respective page of the baseUrl like for example if you wanna visit the programs buzz endpoint of /admin/content use this in the visit command.
  • This adds up to the endpoint of the baseUrl in cypress.json and loads up the page with /admin/content

These are all some of the usages of cypress visit command that are being used on daily basis by many testers.

Tags
Submitted by arilio666 on December 21, 2021

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.