Using cypress with vuetify

Question

I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify. For e2e testing I use the Cypress.

Below is my scenarios of test in Cypress:

I have a problem while creating test for page where I use v-autocomplete component. The problem is that I can't use Vuetify native classes to get the element I want to test. below is an example with data-cy selector

   <v-autocomplete
      v-model="model"
      :items="items"
      item-text="Description"
      item-value="API"
      label="Public APIs"
      placeholder="Start typing to Search"
      data-cy="autocomplete"
    ></v-autocomplete> 

I type some text into search input. Then in v-autocomplete have been found search results. And example of one of there is below:

...
    <div>
       <a class="v-list__tile v-list__tile--link theme--light">
         <div class="v-list__tile__content">
         <div class="v-list__tile__title">Result item
           <span class="v-list__tile__mask">result item</span>
         </div>
         </div>
       </a>
   </div>
...

Then I want select one of search items by clicking to one of found results. And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers). How I can add data-cy selector into result search html item? Maybe who know any another way to resolve this problem?

Answer 1

I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).

In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector

For example,

cy.contains('div', 'itemTextToSelect').parent('a').click()

If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).

---

BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.