vuetify
vuetify copied to clipboard
[Feature Request] Better Handling of auto-generated IDs of v-select
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:
- 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.
- Sounds a bit difficult to accomplish, but I didn't develop vuetify so maybe you have a different
- Give the developer a way to define the ids of any generated vuetify based HTML Element, where an Id is being generated.
Does this solve your problem? https://stackoverflow.com/a/73688982/2074736