Cuando miro los documentos de Cypress.io, hay ejemplos de cómo escribir pruebas y usan mucho los selectores de clase. Mi problema es que mi aplicación TailwindCSS en realidad no tiene ese tipo de clases, sino muchas clases pequeñas que serían muy frágiles para las pruebas. ¿Cuál es una buena solución para escribir pruebas e2e para una aplicación Tailwind?

Ejemplo de los documentos:

 it('adds todos', () => { cy.visit('https://todo.app.com') cy.get('.new-input').type('write code{enter}').type('write tests{enter}') cy.get('li.todo').should('have.length', 2) cy.get('.action-email').type('fake@email.com').should('have.value', 'fake@email.com') })

Pero mi aplicación no se parece en nada, no tengo selectores de clase como ese:

 <div class="relative flex min-h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12"> <span class="absolute inset-0 bg-center"></span> <div class="relative bg-white px-6 pt-10 pb-8 shadow-xl ring-1 ring-gray-900/5 sm:mx-auto sm:max-w-lg sm:rounded-lg sm:px-10"> <div class="mx-auto max-w-md"> <img v-if="showLogo" src="logo.svg" class="h-6" /> <div class="divide-y divide-gray-300/50"> <div class="space-y-6 py-8 text-base leading-7 text-gray-600"> My todo app </div> <button @click="createTodo" class="bg-white rouned-full px-2 py-4 border border-gray-200"> Create a new todo </button> </div> </div> </div> </div>

¿No sería tonto y frágil tratar de apuntar a muchas clases como esta? ¿Hay una mejor alternativa?

 it('adds todos', () => { cy.visit('https://todo.app.com') cy.get('.bg-white.rouned-full.px-2.py-4.border.border-gray-200').first().click() cy.get('.space-y-6.py-8.text-base.leading-7.text-gray-600').should('have.value', 'fake todo') })