vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

[Feature Request] Better Handling of auto-generated IDs of v-select

Open telion2 opened this issue 2 years ago • 1 comments

Problem to solve

UI-Test Frameworks like Selenium and nightwatch, depend on finding elements and interacting with them. To this end they use CSS Selectors. The Issue is that the case of e.g. v-select generates ids for the items. However, it is not guaranteed that the ids will be the same, making the tests unstable at best. In the case of multiple v-selects, the items' Ids change depending on how many v-select are rendered.

This is an example of Items of a v-select rendered in the Browser:

<div
  role="listbox"
  tabindex="-1"
  class="v-list v-select-list v-sheet theme--light v-list--dense theme--light"
  data-v-5363ebd0="true"
  id="list-48"
>
  <div
    tabindex="0"
    aria-selected="false"
    id="list-item-65-0"
    role="option"
    class="v-list-item v-list-item--link theme--light"
  >
    <div class="v-list-item__content">
      <div class="v-list-item__title">Item1</div>
    </div>
  </div>
  <div
    tabindex="0"
    aria-selected="false"
    id="list-item-65-1"
    role="option"
    class="v-list-item v-list-item--link theme--light"
  >
    <div class="v-list-item__content">
      <div class="v-list-item__title">Item 2</div>
    </div>
  </div>
</div>

If you want to select the first Item the Browser proposes this: #list-item-65-0 > div:nth-child(1) > div:nth-child(1)

However, the id #list-item-65-0 will not be the same in any scenario. In my case, the element becomes unselectable when multiple v-selects are rendered in the UI, because not every menu is rendered at the same time, so something like .v-menu__content:nth-child(1) .v-list-item__title isn't stabel either.

Proposed solution

Basically, there can be 2 ways to solve this:

  1. Build an Id system that doesn't change the ids
    • Sounds a bit difficult to accomplish, but I didn't develop vuetify so maybe you have a different
      Opinion on this.
  2. Give the developer a way to define the ids of any generated vuetify based HTML Element, where an Id is being generated.

telion2 avatar Sep 08 '22 08:09 telion2

Does this solve your problem? https://stackoverflow.com/a/73688982/2074736

KaelWD avatar Sep 13 '22 15:09 KaelWD