为自动化测试创建钩子

Question

QA 人员最近抱怨他们无法自动化前端测试。因为我们的 html 从外面看起来都一样。所以作为一个懒惰的黑客，我做了这个

<template>
    <div :role="$options.name">
        ...
    </div>
</template>

<script>
export default {
  name: 'VmComponentName'
}
</script>

它只是从脚本中获取 name 并将其应用于 html。这样在浏览器中你会得到：

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

第 :role="$options.name" 行进入每个组件。

是否有任何DRYer 解决方案？请分享。

其他详细信息

我会详细解释我要找的东西。

假设我有 VmUserCreate，这是创建用户的表单。测试用例是 Can create user.

要在没有角色的情况下自动测试它，我将不得不使用以下选择器：

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

测试会非常脆弱（会折断很多）。

如果我使用角色，我可以使用 [role="VmUserCreateForm"] .submit-button 选择器。折叠起来不那么脆。

所以基本上，我正在寻找的是某种模板继承。每个组件都会自动附加角色。因为我有数百个组件并将 $options.name 粘贴到每个组件中都是 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>

Answer 1

如果我的理解正确，你想全局添加 `role="$options.name" 到每个组件的根元素？

如果是这样，我认为您可以使用在 mounted 生命周期挂钩上执行此操作的全局混合。

例如，像这样：

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

为自动化测试创建钩子

Create hooks for automated testing

integration-testing

vue.js

vuejs2

其他详细信息