cy.visit() for page navigation in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of cy.visit() in Cypress?

cy.visit() is used to open a web page in the browser during a test. It navigates to the specified URL so you can test that page.

beginner

How do you use cy.visit() to open the homepage at https://example.com?

You write cy.visit('https://example.com'). This tells Cypress to load that URL in the test browser.

intermediate

Can cy.visit() accept options? If yes, give an example.

Yes, cy.visit() can take an options object. For example, cy.visit('https://example.com', { timeout: 10000 }) sets a 10-second timeout for loading the page.

beginner

What happens if cy.visit() fails to load the page?

The test will fail and Cypress will show an error message. This helps you know the page did not load as expected.

beginner

Why is cy.visit() important in end-to-end testing?

Because it starts the test by opening the page you want to test, just like a user would. Without it, you can't interact with the page.

What does cy.visit('https://example.com') do in a Cypress test?

A Checks if an element is visible

B Navigates the browser to https://example.com

C Types text into a form

D Clicks a button on the page

cy.visit() loads the given URL in the browser for testing.

Which of these is a valid way to use cy.visit() with options?

A cy.visit('https://example.com', { timeout: 5000 })

B cy.visit('https://example.com', 5000)

C cy.visit({ url: 'https://example.com' })

D cy.visit('https://example.com').timeout(5000)

The second argument to cy.visit() can be an options object like { timeout: 5000 }.

If cy.visit() fails to load a page, what happens?

A Cypress reloads the page automatically

B The test continues without error

C The test fails and shows an error

D Nothing happens, it ignores the failure

Cypress stops the test and reports an error if the page does not load.

Can cy.visit() be used to navigate to a relative URL like /login?

A Yes, if a base URL is set in Cypress config

B No, it only accepts full URLs

C Yes, but only with an options object

D No, it only works with IP addresses

If you set a base URL in Cypress config, cy.visit('/login') navigates relative to that base.

What is the main reason to use cy.visit() in a test?

A To check if a button works

B To close the browser

C To submit a form

D To start testing by opening the page

cy.visit() opens the page so you can test it, like a user opening a website.

Explain how cy.visit() works and why it is important in Cypress tests.

Think about how a user opens a website before interacting.

Describe how you can use options with cy.visit() and give an example.

Options customize how the page loads.

Practice

1. What is the main purpose of cy.visit() in Cypress testing?

easy

A. To click a button on the page

B. To check if an element is visible

C. To open a web page before running tests

D. To assert the page title

Solution

1. Step 1: Understand the role of cy.visit()

   cy.visit() is used to open a web page URL in the browser for testing.

2. Step 2: Compare with other commands

   Commands like clicking buttons or checking visibility happen after the page is opened, so they are not the main purpose of cy.visit().

3. Final Answer:

   To open a web page before running tests -> Option C

4. Quick Check:

   Open page = cy.visit() [OK]

Hint: Remember: cy.visit() starts your test on a page [OK]

Common Mistakes:

• Thinking cy.visit() clicks elements
• Confusing cy.visit() with assertions
• Using cy.visit() to check page content

2. Which of the following is the correct syntax to visit the URL 'https://example.com' in Cypress?

easy

A. cy.go('https://example.com')

B. cy.visit('https://example.com')

C. visit.cy('https://example.com')

D. cy.open('https://example.com')

Solution

1. Step 1: Recall the correct Cypress command

   The correct command to open a page is cy.visit() with the URL as a string argument.

2. Step 2: Check each option's syntax

   Only cy.visit('https://example.com') matches the correct Cypress syntax. Others are invalid commands.

3. Final Answer:

   cy.visit('https://example.com') -> Option B

4. Quick Check:

   Correct syntax = cy.visit(URL) [OK]

Hint: Use cy.visit() with URL in quotes [OK]

Common Mistakes:

• Using cy.open() instead of cy.visit()
• Swapping method and object order
• Missing quotes around URL

3. What will happen when the following Cypress code runs?

cy.visit('https://example.com', { timeout: 10000 })

medium

A. The page will load with a maximum wait time of 10 seconds

B. The page will load instantly without waiting

C. The test will fail because timeout is not a valid option

D. The page will reload every 10 seconds

Solution

1. Step 1: Understand the timeout option in cy.visit()

   The timeout option sets how long Cypress waits for the page to load before failing.

2. Step 2: Analyze the given code

   The code sets a 10000 ms (10 seconds) timeout, so Cypress waits up to 10 seconds for the page to load.

3. Final Answer:

   The page will load with a maximum wait time of 10 seconds -> Option A

4. Quick Check:

   timeout option = max wait time [OK]

Hint: timeout sets max wait time for page load [OK]

Common Mistakes:

• Thinking timeout makes page load instantly
• Assuming timeout causes reloads
• Believing timeout is invalid option

4. You wrote this Cypress test:

cy.visit('https://example.com')
cy.get('#submit').click()

The test fails with "Cannot read property 'click' of null". What is the likely cause?

medium

A. cy.get() cannot be used after cy.visit()

B. The selector '#submit' is invalid syntax

C. cy.visit() does not open the page

D. The page did not finish loading before cy.get ran

Solution

1. Step 1: Understand the error message

   The error means the element with id 'submit' was not found, so click() failed.

2. Step 2: Consider timing of commands

   If the page is not fully loaded before cy.get(), the element may not exist yet causing failure.

3. Final Answer:

   The page did not finish loading before cy.get ran -> Option D

4. Quick Check:

   Element missing = page not loaded yet [OK]

Hint: Wait for page load before querying elements [OK]

Common Mistakes:

• Assuming selector syntax is wrong
• Thinking cy.visit() does not open page
• Believing cy.get() can't follow cy.visit()

5. You want to visit a page and ensure it loads only if the URL contains 'dashboard'. Which of these Cypress code snippets correctly does this?

hard

A. cy.visit('/dashboard').then(() => cy.url().should('include', 'dashboard'))

B. cy.visit('/dashboard', { onLoad: () => cy.url().should('include', 'dashboard') })

C. cy.visit('/dashboard').url().should('include', 'dashboard')

D. cy.visit('/dashboard').should('contain', 'dashboard')

Solution

1. Step 1: Understand chaining after cy.visit()

   Since cy.visit() returns a chainable, you can use .then() to run assertions after the page loads.

2. Step 2: Check each option's correctness

   cy.visit('/dashboard').url().should('include', 'dashboard') tries to call url() directly on cy.visit(), which is invalid. cy.visit('/dashboard', { onLoad: () => cy.url().should('include', 'dashboard') }) uses a non-existent onLoad option. cy.visit('/dashboard').should('contain', 'dashboard') tries to assert page content with should('contain') on cy.visit(), which is invalid. cy.visit('/dashboard').then(() => cy.url().should('include', 'dashboard')) correctly waits for visit to complete, then asserts URL includes 'dashboard'.

3. Final Answer:

   cy.visit('/dashboard').then(() => cy.url().should('include', 'dashboard')) -> Option A

4. Quick Check:

   Use .then() after cy.visit() for assertions [OK]

Hint: Use .then() after cy.visit() to assert URL [OK]

Common Mistakes:

• Using invalid options like onLoad
• Calling url() directly on cy.visit()
• Trying to assert content on cy.visit()