As I review the Cypress.io docs, I notice that the examples on how to write tests heavily rely on class selectors. However, my TailwindCSS application consists of numerous small classes rather than the specific ones mentioned in the examples, making it challenging to target them effectively for testing. Is there a recommended approach for writing end-to-end tests for a Tailwind app?
For instance, the docs provide this example:
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('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb8bfb5bb9ebbb3bfb7b2f0bdb1b3">[email protected]</a>').should('have.value', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9a9d9799bc99919d9590d29f9391">[email protected]</a>')
})
However, my application's structure differs significantly, and I do not have class selectors like the ones shown in the example:
<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>
Targeting numerous classes like this could be unreliable and impractical. Are there better alternatives to achieve the same testing goals?
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')
})