You want to test a form with multiple buttons labeled 'Save' but with different roles. How can you select the 'Save' button that is a submit button using cypress-testing-library?

hard📝 Application Q8 of 15

Cypress - Plugins and Ecosystem

You want to test a form with multiple buttons labeled 'Save' but with different roles. How can you select the 'Save' button that is a submit button using cypress-testing-library?

Acy.findByRole('button', { name: 'Save', type: 'submit' })

Bcy.findAllByRole('button', { name: 'Save' }).filter('[type=submit]').first()

Ccy.findByRole('submit', { name: 'Save' })

Dcy.findByText('Save').filter('[type=submit]')

Step-by-Step Solution

Solution:

Step 1: Understand role and attribute filtering
findByRole does not support filtering by HTML attributes like type directly.
Step 2: Use findAllByRole and filter by attribute
Find all buttons named 'Save' then filter by type='submit' to get the correct button.
Final Answer:
cy.findAllByRole('button', { name: 'Save' }).filter('[type=submit]').first() -> Option B
Quick Check:
Filter elements after findAllByRole for attribute-specific selection [OK]

Quick Trick: Use findAllByRole then filter by attribute for precise selection [OK]

Common Mistakes:

Trying to pass HTML attributes in findByRole options
Using invalid role 'submit'
Filtering by text instead of role

Master "Plugins and Ecosystem" in Cypress

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Trace Try Challenge Automate Recall Frame

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions

More Cypress Quizzes

You want to test a form with multiple buttons labeled 'Save' but with different roles. How can you select the 'Save' button that is a submit button using cypress-testing-library?

Step 1: Understand role and attribute filtering

Step 2: Use findAllByRole and filter by attribute

Final Answer:

Quick Check:

Want More Practice?