Challenges

Vuetify is a very popular component library for Vue.js and has been in active development since 2016. The library provides users with everything that is needed to build rich and engaging web applications using the Material Design specification.

The key challenge with Vuetify is that for some objects clicks (and other events) are not handled by the object itself but by parent classes (often grand-parent or even great parent even). Whereas most (if not all) vuetify-components are automatable with selenium (BDDStack), ranorex, tosca & co, some do make the live of a test automator unnecessary hard.

Some examples:

• Optimize controls for test automation feature Request
• Simple Checkbox definition:

      baseaccTents { $("input", type:"checkbox", "data-test":"cb-form-accTents",dataState) }
      accTents { baseaccTents.parentsUntil("div", class:"v-input__slot") } //For clicking as the clicks are captured by the parents and not this element.

In order to be able to send a click() to a check box like cb-form-accTents in the mines page, you have to send the clcik to the closest parent with the class:"v-input__slot".

• Drop down list boxes require "page Down" and "TAB" characters.
• Radio buttons require jquery to be injected and then use its click, have no found out an alternative to that yet.
• To set the registered business name we need to send a set of control keys keystrokes:

boolean setRegisteredBusinessName(String value) {
      registeredBusinessName.value(value)
      registeredBusinessName << Keys.chord(Keys.ARROW_DOWN)
      registeredBusinessName << Keys.chord(Keys.ENTER)
      registeredBusinessName << Keys.chord(Keys.TAB)
      return true
    }

And still this does not work as a user would do it.

• Date fields are a special case: As the actual field is a read only field, you either have to write complex script. Again we are injecting jQuery to use some its facilities (and yes straight JS does not work). To just set the date, do the following:

          startDate.click()
          basestartDate.jquery.removeAttr("readonly") //Nasty Hack to make the dates working
          basestartDate << "2020-07-15" // Note how we cannot use .value("2020-07-15")
          basestartDate.jquery.attr("readonly","readonly") //Nasty Hack to make the dates working

Again the date field does not react to click directly, so you have to define it as follows:

      basestartDate { $("input", "data-test":"text-form-startDate",dataState) }
      startDate { basestartDate.parentsUntil("div", class:"v-input__slot") }

Traverse up the DOM to find the right parent that will process the click.

• Set a simple editable dropdown listbox entry: Requires the string to be piped in instead of just being able to set the value: motelProvince << "BC" This field is just a simple input box: motelProvince { $('input', "data-test":"select-form-motelProvince",dataState) } Again events on this field are not arriving on this field and piping in the characters was the stable way of doing instead of setting the .value().
• Last but not least is the common timing issue as experienced with a lot of component libraries and js frameworks. Often the DOM has not been fully loaded yet (or was changed due to user action) and the script times out. This does require additional sleep statements and waitFor to make sure that the page is ready for test. In angular we can query the framework, but in Vuetify we'll have to identify similar functionality, this will make the tests more robust.

Once you recognize the above issues, you can hid a lot of the complexity in your page definition and you scripts still look very standard. My estimate is that Vuetify based applications cause at least 2 to 3 times the amount of work and debugging to write proper tests against.

Well, let's use tool a,b,c..... then

As all Selenium dependent tools (anything that uses web driver) are effected that will eliminate almost all tools that you would use for this type of simulated user testing. Others tool are still dependent on the DOM and have to use that to identify the elements, I would predict that these tools will suffer from the same issues.

This issue is recognized in the Vuetify community (hence the feature request) and the many posts on issues that people are experiencing with this.

Conclusion

Testing Vuetify applications with BDDStack (Selenium) is possible, but it does require creativity, additional tooling and tenacity.