vuetifyjs / vuetifyjs/vuetify

[Feature Request] Optimize controls for test automation

Open
#7,295 22 comments 25 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

S: needs docs update T: enhancement testing
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.