Cypress Studio: Generate DOM selectors based on the ARIA role name & label

[john-ngai-bb]

What would you like?

Current Behaviour

The generated test code locates the DOM elements via their class names.

describe('', () => {
  it('The add template button is visible', () => {
    /* ==== Generated with Cypress Studio ==== */
    cy.get('.class > .another-class').should(
      'have.attr',
      'role',
      'button'
    )
    cy.get('.class > .another-class').should('be.visible')
    cy.get('.class > .another-class').should(
      'have.text',
      'Add template'
    )
    /* ==== End Cypress Studio ==== */
  })
})

Desired Behaviour

The generated test code locates the DOM elements via their ARIA role name and label combination.

The below example uses a DOM selector method from the @testing-library/cypress package, but any equivalent selector method is acceptable.

describe('', () => {
  it('The add template button is visible', () => {
    /* ==== Generated with Cypress Studio ==== */
    cy.findByRole('button', { name: 'Add template' }).should('be.visible')
    /* ==== End Cypress Studio ==== */
  })
})

Why is this needed?

All of our page elements have ARIA role names and labels defined, which are also the most resilient to any future changes we make. Selecting by class names or data-* attributes is not a viable alternative for us.

Therefore, we'd like to request for a feature to optionally generate the test code with DOM selectors that locates elements via their ARIA role name and label combinations. Alternatively, we'd like to see an interface where we could plugin our own selection logic or code generation patterns.

Other

No response