cy.visit() for page navigation in Cypress - Test Execution Trace

Execution Trace Quiz - 3 Questions

What does cy.visit() do in this test?

A It checks the page URL

B It opens the browser and loads the specified URL

C It clicks a button on the page

D It asserts the page title

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