Slot testing in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to visit the slot machine page before each test.

Cypress

beforeEach(() => {
  cy.[1]('http://localhost:3000/slot-machine')
})

Drag options to blanks, or click blank then click option'

Aget

Bclick

Cvisit

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.click() instead of cy.visit()

Using cy.get() which selects elements but does not load pages

The cy.visit() command loads a page URL in Cypress before each test.

2fill in blank

medium

Complete the code to check if the slot machine's spin button is visible.

Cypress

cy.get('#spin-button').[1]('be.visible')

Drag options to blanks, or click blank then click option'

Ashould

Bclick

Ccontains

Dfind

Attempts:

3 left

💡 Hint

Common Mistakes

Using click() instead of should() for assertions

Using contains() which checks text content, not visibility

The should('be.visible') assertion checks if the element is visible on the page.

3fill in blank

hard

Fix the error in the code to correctly simulate clicking the spin button.

Cypress

cy.get('#spin-button').[1]()

Drag options to blanks, or click blank then click option'

Ashould

Bclick

Ctype

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using should() which is for assertions, not actions

Using type() which is for typing text

The click() command simulates a user clicking the button.

4fill in blank

hard

Fill both blanks to check that the slot machine result contains exactly 3 symbols.

Cypress

cy.get('.slot-result').[1]().should('have.length', [2])

Drag options to blanks, or click blank then click option'

Achildren

B3

Ctext

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of children() to get elements

Checking length with wrong number

children() gets the child elements, and should('have.length', 3) asserts there are exactly 3 symbols.

5fill in blank

hard

Fill all three blanks to assert the slot machine displays a winning message after spinning.

Cypress

cy.get('#spin-button').click()
cy.get('.message').[1]('text').should('contain', [2])
cy.get('.message').should('have.class', [3])

Drag options to blanks, or click blank then click option'

Ainvoke

B'You win!'

C'win-message'

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() directly instead of invoke('text')

Checking wrong message text or class

invoke('text') gets the text content, should('contain', 'You win!') checks the message, and should('have.class', 'win-message') verifies the CSS class for winning.