cy.visit() for page navigation in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the result of this cy.visit() command?

Consider this Cypress test code snippet:

cy.visit('/dashboard')

Assuming the baseUrl is set to 'https://example.com', what URL will Cypress navigate to?

Cypress

cy.visit('/dashboard')

A https://example.com

B https://example.com/dashboard

C https://example.com//dashboard

D https://dashboard

💡 Hint

The path in cy.visit() appends to the baseUrl without doubling slashes.

When cy.visit() is given a path starting with '/', it appends that path to the baseUrl. It does not add extra slashes. So '/dashboard' becomes 'https://example.com/dashboard'.

❓ assertion

intermediate

Which assertion correctly verifies the page loaded after cy.visit()?

After running cy.visit('/login'), which assertion correctly checks that the URL contains '/login'?

Cypress

cy.visit('/login')

A cy.url().should('include', '/login')

B cy.url().should('eq', '/login')

C cy.location('pathname').should('contain', 'login')

D cy.location('href').should('include', 'https://login')

💡 Hint

Use cy.url() to get the full URL and check if it contains the path.

cy.url() returns the full URL string. Using .should('include', '/login') checks if the URL contains the path '/login'. Option A fails because the full URL is not just '/login'. Option A checks the pathname contains 'login', which does verify the URL contains '/login'. Option A checks for 'https://login' which is incorrect.

🔧 Debug

advanced

Why does this cy.visit() command fail with a 404 error?

Given this code:

cy.visit('dashboard')

The test fails with a 404 error. Why?

Cypress

cy.visit('dashboard')

A Missing leading slash causes Cypress to request 'https://example.comdashboard' which is invalid

B cy.visit() requires a full URL, not a relative path

C The baseUrl is not set, so Cypress cannot resolve 'dashboard'

D The server is down, causing 404 error

💡 Hint

Check how relative paths without leading slash are resolved.

Without a leading slash, Cypress appends the path directly to the baseUrl without a slash, causing an invalid URL like 'https://example.comdashboard'. This leads to a 404 error.

🧠 Conceptual

advanced

What happens if cy.visit() is called with an absolute URL different from baseUrl?

If baseUrl is set to 'https://example.com' and the test runs cy.visit('https://other.com/page'), what will Cypress do?

Cypress

cy.visit('https://other.com/page')

A Cypress appends '/page' to baseUrl ignoring the domain

B Cypress throws an error because URL is outside baseUrl

C Cypress navigates to 'https://example.com/https://other.com/page'

D Cypress navigates to 'https://other.com/page' ignoring baseUrl

💡 Hint

Absolute URLs override baseUrl in cy.visit().

When cy.visit() is given a full absolute URL, Cypress navigates directly to that URL ignoring the baseUrl setting.

❓ framework

expert

In Cypress, how can you wait for a page to fully load after cy.visit() before running assertions?

Which approach ensures the page is fully loaded before assertions after cy.visit('/home')?

Cypress

cy.visit('/home')

A Use cy.visit('/home').should('have.property', 'readyState', 'complete')

B Use cy.visit('/home').wait(5000) to wait 5 seconds

C Use cy.visit('/home').then(() => cy.get('body')) to wait for body element

D Use cy.visit('/home').its('document.readyState').should('eq', 'complete')

💡 Hint

Waiting for a visible element is better than fixed delays or document properties.

Cypress automatically waits for the page load event during cy.visit(). Using .then(() => cy.get('body')) ensures the body element is present before continuing. Option C is unreliable fixed wait. Options A and D are invalid because cy.visit() does not return page properties directly.

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()