First Cypress test - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Cypress code?

Consider this Cypress test code. What will be the test execution result?

Cypress

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')
  })
})

A Test fails because cy.visit URL is incorrect

B Test passes because the page contains 'type' and URL changes correctly

C Test fails due to syntax error in cy.contains line

D Test fails because cy.url assertion is wrong

💡 Hint

Check if the URL visited is valid and if the element with text 'type' exists on the page.

The test visits a valid Cypress example page, clicks on the link containing 'type', and asserts the URL includes '/commands/actions'. This matches the page behavior, so the test passes.

❓ assertion

intermediate

Which assertion correctly verifies the page title in Cypress?

You want to check that the page title is exactly 'Cypress.io: Kitchen Sink'. Which assertion is correct?

A cy.title().should('eq', 'Cypress.io: Kitchen Sink')

B cy.title().should('equal', 'Cypress.io: Kitchen Sink')

C cy.title().should('contain', 'cypress.io')

D cy.title().should('include', 'Kitchen Sink')

💡 Hint

Check the exact match assertion syntax in Cypress.

The correct assertion for exact equality is 'eq'. 'equal' is not a valid alias in Cypress assertions. 'include' and 'contain' check partial matches.

❓ locator

advanced

Which locator is best practice to select a button with text 'Submit' in Cypress?

Choose the best locator to select a button with visible text 'Submit' for a Cypress test.

A cy.contains('button', 'Submit')

B cy.get('button').contains('Submit')

C cy.get('button:contains("Submit")')

D cy.get('button').filter(':text("Submit")')

💡 Hint

Consider the Cypress recommended way to find elements by text and tag.

cy.contains('button', 'Submit') finds a button element containing the text 'Submit' directly and is the recommended approach. Option A is invalid because cy.get returns elements and contains is not chained that way. Options C and D use invalid selectors.

🔧 Debug

advanced

Why does this Cypress test fail with 'Timed out retrying' error?

Given this test code, why does it fail with a timeout error?

Cypress

describe('Timeout Test', () => {
  it('Waits for element', () => {
    cy.visit('https://example.cypress.io')
    cy.get('#nonexistent-element').should('be.visible')
  })
})

A The assertion 'should be visible' is invalid syntax

B cy.get selector syntax is incorrect causing failure

C cy.visit URL is unreachable causing timeout

D The element with id 'nonexistent-element' does not exist on the page, causing timeout

💡 Hint

Check if the element selector matches any element on the page.

The test waits for an element with id 'nonexistent-element' which does not exist, so Cypress retries until timeout. The selector syntax and assertion are valid, and the URL is reachable.

❓ framework

expert

What is the correct way to run setup code before all tests in a Cypress test suite?

You want to run some code once before all tests in a describe block. Which is the correct Cypress hook to use?

A beforeEach(() => { /* setup code */ })

B init(() => { /* setup code */ })

C before(() => { /* setup code */ })

D setup(() => { /* setup code */ })

💡 Hint

Recall the difference between hooks that run once and those that run before each test.

before() runs once before all tests in the block. beforeEach() runs before each test. setup() and init() are not valid Cypress hooks.

Practice

1. What is the main purpose of the cy.visit() command in a Cypress test?

easy

A. To run the test suite

B. To check if an element is visible

C. To open a webpage in the test browser

D. To write test descriptions

Solution

1. Step 1: Understand cy.visit() usage

   The cy.visit() command is used to open a webpage URL in the Cypress test browser.

2. Step 2: Compare with other options

   Options A, B, and C describe other actions unrelated to opening a webpage.

3. Final Answer:

   To open a webpage in the test browser -> Option C

4. Quick Check:

   cy.visit() opens page [OK]

Hint: Remember: visit means open page URL [OK]

Common Mistakes:

• Confusing cy.visit() with assertions
• Thinking it runs tests instead of opening pages
• Mixing it with test description blocks

2. Which of the following is the correct syntax to start a Cypress test block?

easy

A. function test() { describe('Test name') }

B. describe('Test name', () => { it('does something', () => { }) })

C. test('Test name', () => { })

D. run('Test name', () => { })

Solution

1. Step 1: Identify correct Cypress test structure

   Cypress tests use describe blocks to group tests and it blocks for individual tests, both with arrow functions.

2. Step 2: Check syntax correctness

   describe('Test name', () => { it('does something', () => { }) }) correctly shows describe with an it inside using arrow functions. Others use invalid or unsupported syntax.

3. Final Answer:

   describe('Test name', () => { it('does something', () => { }) }) -> Option B

4. Quick Check:

   Use describe and it blocks [OK]

Hint: Tests start with describe and it blocks [OK]

Common Mistakes:

• Using non-Cypress functions like test() or run()
• Missing arrow functions or braces
• Incorrect nesting of blocks

3. Given the following Cypress test code, what will be the test result if the element with id #welcome is visible?

describe('Visibility test', () => {
  it('checks welcome message', () => {
    cy.visit('https://example.com')
    cy.get('#welcome').should('be.visible')
  })
})

medium

A. Test fails because cy.visit() is missing

B. Test passes even if the element is not visible

C. Test fails because should is used incorrectly

D. Test passes because the element is visible

Solution

1. Step 1: Analyze test steps

   The test visits the page, then checks if the element with id #welcome is visible using should('be.visible').

2. Step 2: Understand assertion behavior

   If the element is visible, the assertion passes and so does the test. The code syntax is correct and cy.visit() is present.

3. Final Answer:

   Test passes because the element is visible -> Option D

4. Quick Check:

   Visible element means test passes [OK]

Hint: Visible element + should('be.visible') = pass [OK]

Common Mistakes:

• Assuming test fails without cy.visit()
• Thinking should is wrong syntax
• Ignoring element visibility status

4. Identify the error in this Cypress test code:

describe('My Test', () => {
  it('opens page', () => {
    cy.visit('https://example.com')
    cy.get('.button').should('visible')
  })
})

medium

A. Incorrect assertion keyword, should be should('be.visible')

B. Missing parentheses in should('visible')

C. Wrong selector syntax for class

D. Missing it block inside describe

Solution

1. Step 1: Check assertion syntax

   The assertion should('visible') is incorrect. The correct form is should('be.visible') to check visibility.

2. Step 2: Verify other parts

   The selector .button is correct for class, and it block is present. So only the assertion keyword is wrong.

3. Final Answer:

   Incorrect assertion keyword, should be should('be.visible') -> Option A

4. Quick Check:

   Use should('be.visible') for visibility [OK]

Hint: Use exact assertion keywords like 'be.visible' [OK]

Common Mistakes:

• Using 'visible' instead of 'be.visible'
• Confusing selector syntax for classes
• Omitting it block inside describe

5. You want to write a Cypress test that visits https://example.com, clicks a button with class .submit-btn, and then checks if a success message with id #success-msg is visible. Which of the following test codes correctly implements this?

hard

A. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('.submit-btn').click()
cy.get('#success-msg').should('be.visible')
})
})

B. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('#submit-btn').click()
cy.get('.success-msg').should('visible')
})
})

C. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.click('.submit-btn')
cy.get('#success-msg').should('be.visible')
})
})

D. describe('Submit test', () => {
it('clicks and checks success', () => {
cy.visit('https://example.com')
cy.get('.submit-btn').click()
cy.get('#success-msg').should('visible')
})
})

Solution

1. Step 1: Verify selectors and commands

   describe('Submit test', () => { it('clicks and checks success', () => { cy.visit('https://example.com') cy.get('.submit-btn').click() cy.get('#success-msg').should('be.visible') }) }) uses correct selectors: .submit-btn for class and #success-msg for id. It uses cy.get().click() correctly.

2. Step 2: Check assertion syntax

   The code uses should('be.visible'), which is the correct assertion for visibility. Other options have wrong selectors or incorrect assertion keywords.

3. Final Answer:

   describe('Submit test', () => { it('clicks and checks success', () => { cy.visit('https://example.com') cy.get('.submit-btn').click() cy.get('#success-msg').should('be.visible') }) }) -> Option A

4. Quick Check:

   Correct selectors + click + should('be.visible') [OK]

Hint: Use correct selectors and should('be.visible') for checks [OK]

Common Mistakes:

• Mixing class and id selectors
• Using cy.click() instead of cy.get().click()
• Wrong assertion keyword 'visible' instead of 'be.visible'