时间戳

首页 > 解决方案 > 使用 Cypress 访问 VueJS 中的数据模型（应用程序操作）

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

问题描述

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

链接中的示例代码：

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

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

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

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

那么，我如何公开例如HelloWorld.data.message可以从赛普拉斯访问？

Codesandbox.io 上的演示应用程序

可以通过Options/Data API吗？

标签： vue.jscypress

解决方案

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);
}

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

Vue HelloWorld 组件的实验性应用操作。

您可以在已安装的挂钩中公开 Vue 组件中的设置器

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

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

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

推荐阅读