TT#99753 Add identifiers to Vue.js components to improve selection in E2E tests

Change-Id: If059857e911b270f492e3e8cee38746e87940c30

quasar.conf.js

@@ -29,7 +29,8 @@ module.exports = function (/* ctx */) {
 			'components',
 			'vue-scrollto',
 			'constants',
-			'vue-wait'
+			'vue-wait',
+			'e2e-testing'
 		],
 
 		// https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css

src/boot/e2e-testing.js

@@ -0,0 +1,20 @@
+
+import _ from 'lodash'
+
+export default ({ app, Vue }) => {
+	Vue.mixin({
+		mounted () {
+			if (this.$vnode && this.$el && this.$el.setAttribute) {
+				let dataCy = _.get(this.$vnode, 'componentOptions.Ctor.extendOptions.name', null)
+				if (dataCy !== null && this.$vnode.key) {
+					dataCy += '--' + this.$vnode.key
+				}
+				if (dataCy !== null) {
+					this.$el.setAttribute('data-cy', _.kebabCase(dataCy))
+				} else if (process.env.DEV) {
+					console.warn('data-cy generation failed due to missing component name', this.$el)
+				}
+			}
+		}
+	})
+}