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.

Practice

1. What is the main benefit of using cypress-testing-library in your tests?

easy

A. It helps find elements like a user would, improving test readability.

B. It automatically fixes broken tests.

C. It replaces Cypress commands with JavaScript alerts.

D. It only works with CSS selectors.

Solution

1. Step 1: Understand the purpose of cypress-testing-library

   It is designed to find page elements by text, role, or label, mimicking how users interact with the page.

2. Step 2: Compare options with this purpose

   Only It helps find elements like a user would, improving test readability. correctly states that it helps find elements like a user would and improves test readability.

3. Final Answer:

   It helps find elements like a user would, improving test readability. -> Option A

4. Quick Check:

   User-focused element finding = A [OK]

Hint: Remember: testing-library = user-like element finding [OK]

Common Mistakes:

• Thinking it fixes tests automatically
• Confusing it with Cypress core commands
• Assuming it only uses CSS selectors

2. Which of the following is the correct syntax to find a button with the text 'Submit' using cypress-testing-library?

easy

A. cy.findByRole('button', { name: 'Submit' })

B. cy.findByText('Submit')

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

D. cy.querySelector('button:contains("Submit")')

Solution

1. Step 1: Recall cypress-testing-library syntax for roles

   The recommended way is to use findByRole with the role and accessible name.

2. Step 2: Check each option

   cy.findByRole('button', { name: 'Submit' }) uses findByRole('button', { name: 'Submit' }), which is correct. cy.findByText('Submit') relies on text content without specifying the button role, making it less precise. cy.get('button').contains('Submit') uses Cypress core commands, not testing-library. cy.querySelector('button:contains("Submit")') is invalid syntax.

3. Final Answer:

   cy.findByRole('button', { name: 'Submit' }) -> Option A

4. Quick Check:

   Use findByRole with name for buttons = B [OK]

Hint: Use findByRole with name for accessible buttons [OK]

Common Mistakes:

• Using Cypress core commands instead of testing-library
• Missing the role parameter
• Using invalid selectors like querySelector

3. Given the code snippet:

cy.findByLabelText('Email').type('[e-mail]')
cy.findByRole('button', { name: 'Send' }).click()

What will happen when this test runs?

medium

A. It clicks the button but does not type the email.

B. It throws an error because findByLabelText does not exist.

C. It types the email but fails to find the button.

D. It types the email and clicks the 'Send' button successfully.

Solution

1. Step 1: Understand the commands used

   findByLabelText finds an input by its label text, and type enters text. findByRole finds a button by role and name, then click clicks it.

2. Step 2: Analyze the expected behavior

   Both commands are valid and should work if elements exist. So the test will type the email and click the button.

3. Final Answer:

   It types the email and clicks the 'Send' button successfully. -> Option D

4. Quick Check:

   Valid findByLabelText and findByRole = A [OK]

Hint: findByLabelText types, findByRole clicks [OK]

Common Mistakes:

• Assuming findByLabelText is invalid
• Confusing Cypress core commands with testing-library
• Thinking click happens before typing

4. You wrote this test:

cy.findByRole('textbox', { name: 'Username' }).type('admin')
cy.findByRole('button', { name: 'Login' }).click()

But the test fails with "Unable to find element" error on the textbox. What is the likely cause?

medium

A. The test is missing a wait() before typing.

B. The textbox does not have an accessible name 'Username'.

C. The type command is not supported on textboxes.

D. The button role is incorrect.

Solution

1. Step 1: Understand the error message

   "Unable to find element" means the locator did not find the textbox with role 'textbox' and name 'Username'.

2. Step 2: Check possible causes

   If the textbox lacks an accessible name 'Username', the locator fails. The button role is likely correct, and type works on textboxes. wait() is usually unnecessary.

3. Final Answer:

   The textbox does not have an accessible name 'Username'. -> Option B

4. Quick Check:

   Accessible name missing causes find failure = D [OK]

Hint: Check accessible names if findByRole fails [OK]

Common Mistakes:

• Assuming role or command is wrong
• Adding unnecessary waits
• Ignoring accessibility attributes

5. You want to test a form with multiple inputs labeled 'Name' but only one is visible at a time. Which cypress-testing-library method helps you select the visible input labeled 'Name' reliably?

hard

A. cy.findByLabelText('Name', { exact: false })

B. cy.findByLabelText('Name', { selector: ':visible' })

C. cy.findAllByLabelText('Name').filter(':visible').first()

D. cy.findByText('Name').filter(':visible')

Solution

1. Step 1: Identify the problem

   Multiple inputs share the same label 'Name', but only one is visible at a time.

2. Step 2: Choose method to select visible input

   findAllByLabelText returns all matching elements. Using filter(':visible') narrows to visible ones, and first() picks the first visible input.

3. Final Answer:

   cy.findAllByLabelText('Name').filter(':visible').first() -> Option C

4. Quick Check:

   Use findAll + filter visible + first = C [OK]

Hint: Use findAllByLabelText + filter(':visible') + first() [OK]

Common Mistakes:

• Using findByLabelText with invalid selector option
• Using findByText instead of label text
• Ignoring visibility filtering