How to write 2e2 tests with Cypress for a Vue Tailwind CSS app?-CodePudding

When I look at Cypress.io docs, there are examples of how to write tests and they use class selectors a lot. My problem is that my TailwindCSS app does not really have those kinds of classes but many small classes that would be very fragile to target for tests. What is a good solution to write e2e tests for a Tailwind app?

Example from the docs:

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('[email protected]').should('have.value', '[email protected]')
})

But my app looks nothing like it, I don't have class selectors like that:

<div >
  <span ></span>

  <div >
    <div >
      <img v-if="showLogo" src="logo.svg"  />
      
      <div >
        <div >
          My todo app
        </div>

        <button @click="createTodo" >
          Create a new todo
        </button>
      </div>
    </div>
  </div>
</div>

Wouldn't it be silly and fragile to try and target many classes like this? Is there a better alternative?

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

CodePudding user response：

Consider using data-cy attributes which is the recommendation from Cypress. It's pragmatic because you know exactly which elements are tagged, but could be labour-intensive.

// Example - cypress.io

<div >
  <h1  data-cy="tag-line" style="font-size:5.6rem;line-height:7rem">
    <div>The web has evolved.<br>Finally, testing has too.</div>
  </h1>
  <h2  data-cy="by-line">Fast, easy and reliable testing...

The recommendation from Testing Library is to use roles texts, and aria attributes.

Also consider using traversal commands to navigate from key elements.