Question

我在Vue.js项目（Nuxt.js）中使用赛普拉斯。我无法管理的主要问题是如何了解vuex商店已准备就绪。假设我有一个按钮，可以调用axios来获取一些数据。然后，数据通过变异进入商店，Vue会将其呈现在模板中。在商店建立之前，我要与之交互的下一个元素为空。但是柏树正试图对其进行检查。

商店建成后，如何调用下一个柏树动作（例如cy.get）？

我的项目更复杂。但是核心问题是，柏树有时不等待建店并尝试进一步工作。我们第一次使用cy.wait(1000)，但这似乎不是一个完美的决定。

<div>
    <button data-cy="fetchDataBtn" @click="fetchData">get items</button>
    <ul>
        <li v-for="item in items">
           <p>{{ item.title }}</p>
           <button
                @click="fetchProduct(item.id)"
            >
                buy {{ item.name }}
            </button>
        </li>
    </ul>
</div> 

    <script>
    import { mapState } from 'vuex';
    export default {
        name: 'App',
        computed: {
            ...mapState('list', ['items'])
        }
    } 
    </script>

我希望出现以下情况：

cy.get([‘data-cy=fetchDataBtn’]).click()
// wait for store is ready and list is already rendered 
// (NOT cy.wait('GET', 'url_string') or cy.wait(milliseconds))
cy.contains(‘button’, 'buyItemName').click()

Answer 1

看看这篇帖子Testing ... with Vuex Store ...，关键是在窗口中添加对Vue应用程序的引用

const app = new Vue({
  store,
  el: '.todoapp'
  //
})
if (window.Cypress) {
  // only available during E2E tests
  window.app = app
}

然后在继续测试DOM之前测试商店的适当密钥

const getStore = () => cy.window().its('app.$store')

it('has loading, newTodo and todos properties', () => {
  getStore().its('state').should('have.keys', ['loading', 'newTodo', 'todos'])
})

但是，它甚至可以更简单！

您说

在商店建立之前，我要与之交互的下一个元素为空。

使用正确的命令组合，赛普拉斯将等待通过axios提取的内容，只要您选择正确的'indicator'元素并测试其 content 例子

cy.contains('my.next.element.i.want.to.interact.with', 'the.content.fetched.with.axios', { timeout: 10000 })

此操作最多等待10秒钟，以显示获取的内容（或更早显示）。没有超时参数，它最多等待5秒，这可能就足够了。

注意，赛普拉斯链接命令有一个微妙的陷阱。

不使用

cy.get('my.next.element.i.want.to.interact.with')
  .contains('the.content.fetched.with.axios')

因为您的Vue模板可能从一开始就具有element标签或类，但是其内容最初是空的，因此该模式 将不等待您想要查看的内容 。它将仅比较初始内容（什么都没有），而无需等待提取完成。

用赛普拉斯测试vuex

1 个答案: