cypress-testing-library - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element by its text using cypress-testing-library.

Cypress

cy.[1]('Submit').click()

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

AfindByText

BgetByRole

CqueryByText

DgetByText

Attempts:

3 left

💡 Hint

Common Mistakes

Using asynchronous commands like findByText when immediate selection is needed.

Using getByRole instead of getByText for text selection.

The getByText command selects an element by its visible text immediately.

2fill in blank

medium

Complete the code to assert that a button with label 'Save' is visible.

Cypress

cy.[1]('button', { name: 'Save' }).should('be.visible')

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

AgetByRole

BqueryByRole

CfindByText

DfindByRole

Attempts:

3 left

💡 Hint

Common Mistakes

Using findByRole which is asynchronous and may cause timing issues.

Using findByText instead of getByRole for role-based selection.

getByRole selects an element by its ARIA role and accessible name synchronously, perfect for asserting visibility.

3fill in blank

hard

Fix the error in the code to correctly wait for an element with text 'Loading' to appear.

Cypress

cy.[1]('Loading').should('exist')

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

AgetByText

BfindByText

CgetByRole

DqueryByText

Attempts:

3 left

💡 Hint

Common Mistakes

Using getByText which fails if the element is not immediately present.

Using queryByText which returns null if element is missing without waiting.

findByText waits for the element to appear asynchronously, which is needed for dynamic content like loading indicators.

4fill in blank

hard

Fill both blanks to select an input by its placeholder text and type 'hello'.

Cypress

cy.[1]('Enter your name').[2]('hello')

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

AgetByPlaceholderText

BfindByPlaceholderText

Ctype

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using findByPlaceholderText which is asynchronous when immediate selection is fine.

Using click instead of type to enter text.

getByPlaceholderText selects the input by placeholder synchronously, and type enters text into it.

5fill in blank

hard

Fill all three blanks to select a checkbox by label text, check it, and verify it is checked.

Cypress

cy.[1]('Accept Terms').[2]().should('[3]')

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

AgetByLabelText

Bcheck

Cbe.checked

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using click instead of check which is more reliable for checkboxes.

Using should('be.visible') instead of should('be.checked') to verify state.

getByLabelText selects the checkbox by its label, check checks it, and be.checked asserts it is checked.