Использование кипариса с vuetify - PullRequest
Новая
       7

Использование кипариса с vuetify

0 голосов
/ 04 декабря 2018

У меня есть проект Vue.js (Nuxt.js), и в качестве пользовательского интерфейса я использую Vuetify.Для тестирования e2e я использую Cypress.

Ниже приведены мои сценарии тестирования в Cypress:

У меня проблема при создании теста для страницы, где я использую компонент v-autocomplete.Проблема в том, что я не могу использовать собственные классы Vuetify, чтобы получить элемент, который хочу протестировать.ниже приведен пример с селектором данных-cy 

   <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>

Я набираю текст в поисковой строке.Тогда в v-autocomplete были найдены результаты поиска.Ниже приведен пример одного из них: 

...
    <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>
...

Затем я хочу выбрать один из элементов поиска, щелкнув по одному из найденных результатов.И для этого я должен использовать нативные классы Vuetify, но он не имеет стабильности (класс .v-list__tile--link может быть переименован разработчиками).Как я могу добавить селектор data-cy в HTML-элемент поиска результатов?Может кто знает какой нибудь другой способ решить эту проблему?

1 Ответ

0 голосов
/ 05 декабря 2018

Я не думаю, что v-list__tile--link может быть изменено разработчиками, кажется, что оно добавляется во время выполнения DOM библиотекой Vuetify (если вы не имеете в виду разработчиков Vuetify, то наверняка она может меняться между версиями).

В любом случае, если вы хотите, чтобы ваши селекторы были более ориентированы на контент, используйте Cypress .parent () selector

Например, 

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

Есливозможно, убедитесь, что 'itemTextToSelect' действительно отличительный (если вы можете установить его в тестовом приборе).

Кстати, перед тем, как пользователь начнет вводить список автозаполнения, будет display: none, поэтому вам нужно будет либо .type('something') ввести данные, либо .click({force: true}) элемент.

...