使用赛普拉斯

Question

我关注this blog。 window.app属性在添加所描述的代码之后确实出现在控制台中，但是我不能引用博客中提到的app.$store（并且它类似于在组件中引用存储的方式）。我可以引用app.store确实包含来自我的vuex商店的属性，但它不包含app.store.state，只包含getter（和调度等）。

E.g。使用const getStore = () => cy.window().its('app.store')，它会给出：

我希望能够直接获得状态变量，而不仅仅是我为getter做过一次。怎么了？这是因为我在我的vuex商店中使用了命名空间吗？

编辑： 它也可能与我将商店分配到窗口的方式有关。我使用的是Quasar Framework，它在当前版本（> 0.15）中根据它使用的quasar.conf.js文件中的设置进行了大量配置。我通过将此代码添加为quasar plugin：

来分配商店

export default ({ app, store, Vue }) => {
  if (window.Cypress) { // should only be available during E2E tests
    window.app = app
  }
}

这样做确实给了我提到的app.store，但不是app.$store（包括state）。生成Quasar配置并显示在文件中，添加此插件后包含：

/**
 * THIS FILE IS GENERATED AUTOMATICALLY.
 * DO NOT EDIT.
 *
 * You are probably looking on adding initialization code.
 * Use "quasar new plugin <name>" and add it there.
 * One plugin per concern. Then reference the file(s) in quasar.conf.js > plugins:
 * plugins: ['file', ...] // do not add ".js" extension to it.
 **/
import './quasar'
import Vue from 'vue'
Vue.config.productionTip = false
import 'quasar-app-styl'
import 'src/css/app.styl'
import App from 'src/App'
import router from 'src/router'
import store from 'src/store'

const app = {
  el: '#q-app',
  router,
store,
  ...App
}

const plugins = []

import pluginCypress_vuex_store from 'src/plugins/cypress_vuex_store'
plugins.push(pluginCypress_vuex_store)

import pluginVuelidate from 'src/plugins/vuelidate'
plugins.push(pluginVuelidate)

plugins.forEach(plugin => plugin({ app, router, store, Vue }))

new Vue(app)

正如您所看到的，插件是初始化Vue应用程序的一部分，而博客和您建议的方式，它是在Vue初始化之后附加的。由于Quasar自动生成配置，我不知道如何在初始化后执行'window.app = app'以查看是否会导致我的问题......

Answer 1

在我的Vue应用程序中也是如此。见section

  

在我们编写测试之前，我们需要决定如何访问商店参考。为了允许通过Vue实例测试和控制应用程序，我更喜欢在窗口对象上保留对组件的引用。在app.js中，将window.app设置为可测试性。

const app = new Vue({
  store,
  el: '.todoapp'
  //
})
window.app = app

最后一行是关键，当我添加测试代码的工作方式与广告一样。

请注意，要调整的文件可能是 main.js ，而不是 app.js 。

Quasar - Special App Plugin：Boot

参考this doc，您可以通过生成此特殊插件，然后将其更改为

来实现正确的赛普拉斯window.app参考

export default ({ app, Vue }) => {
  // do some logic here...

  // ... then, kick off our Quasar website/app:
  window.app = new Vue(app)
  // "app" has everything cooked in by Quasar CLI,
  // you don't need to inject it with anything at this point
}

请注意，这不是标准的quasar应用插件。