First Cypress test

Introduction

We write a first Cypress test to check if a website works as expected. It helps catch problems early.

To check if the homepage loads correctly.

To verify a button on the page works.

To confirm a user can see important text on the page.

To make sure a link goes to the right page.

Syntax

Cypress

describe('Test suite name', () => {
  it('Test case name', () => {
    cy.visit('https://example.com')
    cy.contains('Some text').should('be.visible')
  })
})

describe groups tests together.

it defines a single test case.

Examples

This test opens the homepage and checks if 'Welcome' text is visible.

Cypress

describe('Homepage test', () => {
  it('shows welcome message', () => {
    cy.visit('https://example.com')
    cy.contains('Welcome').should('be.visible')
  })
})

This test checks if a button with id 'submit' is on the page.

Cypress

describe('Button test', () => {
  it('checks if button exists', () => {
    cy.visit('https://example.com')
    cy.get('button#submit').should('exist')
  })
})

Sample Program

This test opens the Cypress example page and checks if the heading 'Kitchen Sink' is visible.

Cypress

describe('My First Cypress Test', () => {
  it('Visits example.com and checks for heading', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('Kitchen Sink').should('be.visible')
  })
})

Important Notes

Always use clear test names so you know what each test does.

Use cy.visit() to open the page you want to test.

Use cy.contains() or cy.get() to find elements.

Summary

Cypress tests are written inside describe and it blocks.

Use cy.visit() to open a webpage.

Use assertions like should('be.visible') to check page content.

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'