Vuetify: [Feature Request] Optimize controls for test automation

[Slooti]

Problem to solve

Test automation is key for DevOps. Whereas most (if not all) vuetify-components are automatable with selenium, ranorex, tosca & co, some do make live of a test automator unnecessary hard.
The wish is: make each component in every configuration as easy automatable as possible.

Proposed solution

E.g. a select box:

v-select  id="contest_persons_groups" :items="registrationtypes" v-model=editedItem.type
                              label="Einzelperson oder Gruppe" item-text="value" item-value="ID"></v-select>

results in the following html code:

<div role="combobox" class="v-input v-text-field v-select v-input--is-label-active v-input--is-dirty v-input--is-focused theme--light primary--text">
    <div class="v-input__control">
        <div class="v-input__slot">
            <div class="v-select__slot">
                <label for="contest_persons_groups" class="v-label v-label--active theme--light primary--text" style="left: 0px; right: auto; position: absolute;">Einzelperson oder Gruppe</label>
                <div class="v-select__selections">
                    <div class="v-select__selection v-select__selection--comma">Einzelperson</div>
LOOK HERE -->         <input id="contest_persons_groups" readonly="readonly" type="text" autocomplete="on" aria-readonly="false">**
                </div>
                <div class="v-input__append-inner">
                    <div class="v-input__icon v-input__icon--append"><i aria-hidden="true" class="v-icon fas fa-caret-down theme--light primary--text"></i></div>
                </div>
            </div>
            <div class="v-menu"></div>
        </div>
        <div class="v-text-field__details">
            <div class="v-messages theme--light primary--text">
                <div class="v-messages__wrapper"></div>
            </div>
        </div>
    </div>
</div>

The id went to the input which is not clickable, as it is readonly. You had to solve this with nasty xpath-give-me-your-parent-parent-magic:
$('//*[@id="country"]/..').click()
if the id was set to a clickable div, the automation code would be so much nicer and more readable:
$('#country"').click()
Now I am aware, that this may be tricky. If the dropdown was typable, of course, having the id on the input were totally correct. So there is decision magic necessary.

[nicoloboschi]

Perhaps a solution could be to add a "semantic" tag to each component, for example to click a select:

$('[data-vuetify-ref=v-select-open]').click()

in this way you avoid using the id (components in read and write normally use different elements).
Obviously you can have more v-select in the same page, in that case you can access it by positional inde

How other frameworks handle it?

[aglavas]

Any progress on this, so far?

I encountered this issue recently when using v-list-group component.
So component initialization would look like this (only important code):

` v-for="(item, index) in navigationComputed"
:key="index"
:class="formatNavigationTestingClass()"

`

Method formatNavigationTestingClass() will just return string "testing-class". So the end result of this would be as shown in this screenshot:

I managed to achieve something by extending v-list-group component in VUE.js. So I would use extended component which would accept testingClass property.
The extended component also has override of genHeader() method - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VList/VListGroup.ts#L137

So in the extended component testingClass is added along with the other classes in genHeader() method. So the final result is this:

Class is now being added to the correct div element.
Although the final result is satisfactory, the method used to achieve this is a bit hackish.
There are 2 major problems with this approach, so it shouldn't be considered as a long term solution.

• With future Vuetify upgrades, component code could be changed and extensions will cease to work.

• This is just the example of extension of v-list-group component. So, in order to achieve complete automated testing of the application, a lot of other components should be extended as well in a similar manner.

All in all, this is not a long term solution. Are there any plans to tackle this? Has anyone made any progress with custom solutions?

[yuwu9145]

Need a solution as well for selenium end to end testing

[johnleider]

Just an update, this issue is currently in progress and will be resolved as part of a patch release under v2.3.

[hcderaad]

Just an update, this issue is currently in progress and will be resolved as part of a patch release under v2.3.

Thanks for your work on this. Is there any ETA on this issue?