使用 Cypress 访问 VueJS 中的数据模型（应用程序操作）

Question

我最近看到了这篇博文：停止使用页面对象并开始使用应用程序操作。它描述了一种方法，应用程序公开其模型，以便赛普拉斯可以访问它以设置某些状态以进行测试。

来自链接的示例代码：

// app.jsx code
var model = new app.TodoModel('react-todos');

if (window.Cypress) {
  window.model = model
}

我想在我的 VueJS 应用程序中尝试这种方法，但我正在努力解决如何公开“模型”。

我知道可以按照此处所述公开 Vuex 商店：将 vuex 商店公开给赛普拉斯，但我需要访问组件的data().

那么，我如何公开例如HelloWorld.data.message可以从 Cypress 访问？

可以通过选项/数据 API吗？

Answer 1

Vue 非常擅长为插件等提供内部结构。只是console.log()为了发现数据在运行时的位置。

比如读取Vue内部数据，

从应用程序级别（main.js）

const Vue = new Vue({...
if (window.Cypress) {
  window.Vue = Vue;
}

然后在测试中

cy.window().then(win => {
  const message = win.Vue.$children[0].$children[0].message; 
}

或从组件级别

mounted() {
  if (window.Cypress) {
    window.HelloWorld = this;
  }
}

然后在测试中

cy.window().then(win => {
  const message = win.HelloWorld.message; 
}

但是引用文章中的操作意味着设置数据，而在 Vue 中这意味着您应该使用它Vue.set()来保持可观察性。

由于 Vue 暴露在this.$root，

cy.window().then(win => {
  const component = win.HelloWorld;
  const Vue = component.$root;
  Vue.$set(component, 'message', newValue);
}

PS 使用的需要Vue.set()可能会在 v3 中消失，因为它们通过代理实现可观察性 - 您可能只能分配值。

您可以在挂载钩子的 Vue 组件中公开一个 setter

mounted() {
  this.$root.setHelloWorldMessage = this.setMessage;
},
methods: {
  setMessage: function (newValue) {
    this.message = newValue;
  }
}

但是现在我们正在研究一种情况，其中 Cypress 测试看起来像是应用程序的另一个需要访问 HelloWorld 状态的组件。

在这种情况下，您引用的 Vuex 方法似乎是处理事情的更简洁的方法。