Vue.js 如何向cypress公开nuxt app的vuex应用商店？

我想为使用nuxt构建的项目使用cypress为vuex存储创建测试。问题是我找不到一种方法将存储区公开给cypress，这样我就可以在这样的测试中调度操作（代码取自）：

可以找到最接近我问题的答案。但这似乎仅适用于不使用nuxt构建的vue.js应用程序，特别是因为nuxt文档表明nuxt具有用于安装商店的功能，这是参考答案中使用的方法

---

任何帮助都将不胜感激。

您可以在插件中完成。例如，创建一个仅限客户端的插件，将store设置为window

插件/expostore.client.js

export default ({store}) => {
  window.__store__ = store
}

---

您应该通过客户端插件在nuxt中公开它：

// plugins/cypress.js

const isCypress = typeof window.Cypress !== 'undefined'

export default ({ store }) => {
  if (isCypress) {
    window.store = store
  }
}

然后，您可以在cypress中对其进行测试：

// cypress/integration/example.spec.js

describe('Store', () => {   
  it('Application store is exposed to cypress', () => {
    cy.visit('/')
    cy.window().should('have.property', 'store')
  })
})

---

我为此挣扎了几天，因为我在Cypress和我的应用程序之间遇到了某种竞争情况。我在我的

layout/default.ts

文件的挂载函数中添加了浏览器检查，而不是插件：

mounted() {
        if (window.frameElement !== null && window.frameElement.id.includes('Your App')) {
            window.store = this.$store;
        }
    },

---

在验证这种情况下是否有两个窗口时，请记住：Cypress窗口和Cypress中的应用程序窗口。

商店也可以通过NuxtJS帮助程序访问。您可以通过

窗口在Cypress中访问它：

cy.window()
  .its('$nuxt')
  .then((nuxt) => {
    console.dir(nuxt.$store)
  })

只是出于好奇。Cypress不是一个E2E测试框架吗？这不是一种混合的担忧吗？也许可以通过编程方式按下UI中的按钮来调度操作？Cypress确实专注于编写E2E测试。我确实按照你的建议写了一个测试。在这一点上，我可能还应该提到，我想要触发的存储操作是用于用户登录的。但是，每次我想访问需要登录的页面时，模拟用户点击应用程序，调用此测试将大大降低我的测试速度。太棒了！这个答案基本上就是解决办法。但我猜你忘了加一支胖箭了。我试图编辑，但编辑器要求我编辑至少6个字符。导出默认值（{store}）=>{window.\uuuu store\uuuu=store}
cy.window()
  .its('$nuxt')
  .then((nuxt) => {
    console.dir(nuxt.$store)
  })