vue.js - Create hooks for automated testing -

qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this

<template>     <div :role="$options.name">         ...     </div> </template>  <script> export default {   name: 'vmcomponentname' } </script> 

which takes name script , applies html. in browser get:

<div role="vmcomponentname">      ... </div> 

line :role="$options.name" goes in every component.

is there dryer solutions? please share.

---

additional details

i'll explain in details looking for.

imagine have vmusercreate form creates user. test case can create user.

to automatically test without role, have use following selector:

.wrapper > .wrapper > .wrapper > .submit-button

the test extremely brittle (will break lot).

if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle.

so basically, i'm looking sort of template inheritance. every component attach role automatically. because have hundreds of components , pasting $options.name every of them meh.

new vue({    el: '#app',    components: {      c1: {        name: 'vmuserexplorer',         template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'      },      c2: {        name: 'vmuserlist',         template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'      },      c3: {        name: 'vmusercreateform',         template: '<div class="wrapper" :role="$options.name"><slot></slot></div>'      },    }  });

[role="somerole"] {    background-color: lightblue;  }  .wrapper {    padding: 10px;    border: 2px solid lightblue;  }

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>  <div id="app">    <c-1>      <c-2>        <c-3>          <button class="button submit-button">submit</button>        </c-3>      </c-2>    </c-1>  </div>

if i'm understanding correctly, want globally add `role="$options.name" root element of every component?

if so, think can away global mixin on mounted lifecycle hook.

for example, this:

vue.mixin({   mounted () {     if (this.$el.setattribute && this.$options.name) {       this.$el.setattribute('role', this.$options.name)     }   }, })