Quando se tem [data-cy="seu-elemento-x"], precisa ainda instalar o Testing Library?
Segue exemplo abaixo de um código que usa o data-cy para capturar elementos nas automação E2E com Cypress.
O uso do Testing Library é interessante quando não temos o elemento definido no E2E, ou seja, sem o data-test/cy. Para que o Testing Library reconheça dentro da automação, precisamos que, não tenha no elemento que vai ser buscado pelo cypress o data-cy e então, o Testing Library o reconhece buscando pelo padrão findByText.('Sua palavra mágica').click();

Opção 1: Configurar no arquivo setup-tests.js (Cypress v10+):
- Crie o arquivo
setup-tests.js: se você ainda não tem esse arquivo, crie-o na raiz do seu projeto ou em outro local especificado na sua configuração do Cypress (veja a documentação para detalhes). - Configure o atributo
testIdAttribute:
// cypress/support/setup-tests.js
import { configure } from '@testing-library/cypress';
configure({ testIdAttribute: 'data-cy' })Opção 2: Configurar diretamente no teste (Cypress v9 e anteriores): se você estiver usando uma versão mais antiga do Cypress, você pode configurar a biblioteca diretamente no seu arquivo de teste:
// cypress/e2e/seu_teste.cy.js
import { configure } from '@testing-library/cypress';
// ...
describe('Seus testes', () => {
before(() => {
configure({ testIdAttribute: 'data-cy' })
})
// ... seus testes aqui
})Opção 3: Criar um novo comando:
Crie um comando personalizado para usar findByTestId sempre com o data-cy:
// cypress/support/commands.js
Cypress.Commands.add('findByCy', (value, options) => {
cy.findByTestId(value, { ...options, testIdAttribute: 'data-cy'})
})Referências:
Cypress and Testing Library Link