Quando se tem [data-cy="seu-elemento-x"] , precisa ainda instalar o Testing Library?

By: Kellen Xavier
Posted: June 05, 2025

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();

An image from Notion

Opção 1: Configurar no arquivo setup-tests.js (Cypress v10+): 1. 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).

2. 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'})
})

Referencias:

Testing Library

https://github.com/testing-library/cypress-testing-library/blob/97939da7d4707a71049884c0324c0eda56e26fc2/cypress/integration/find.spec.js

Cypress and Testing Library Link