cypress - 使用 Svelte : Button is sometimes clicked, 的 Flaky cypress 测试有时不会

Question

我正在使用 Cypress 测试我的 SvelteKit 网站。我有时会遇到不稳定的测试，类似于此处描述的情况:https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/ .简而言之， Cypress 有时会在附加事件监听器之前找到并单击按钮——结果，单击无处可去。建议的解决方案是简单地重新尝试单击，直到附加了适当的监听器。这也适用于我的情况。然而，尽管我确实理解为什么这在博文中给出的示例(它是一个大型日历模式)中可能是一个问题，但我发现很难证明使用简单的 Svelte 按钮时会出现此问题。

这是一个简单的按钮示例，在单击时会显示一些内容:

<script>
  let hide = true;
</script>

<button
  on:click={() => {
    console.log('clicked');
    hide = false;
  }}>
  Show
</button>

<span class:hide>Content</span>

<style>
  .hide {
    visibility: hidden;
  }
</style>

相应的测试有时通过，有时失败:

it('reveals content on click', () => {
  cy.contains('Show').click();
  cy.contains('Content').should('be.visible');
});

同样，我知道这可以通过重新尝试单击按钮来解决。如果这就是让 Cypress 与 Svelte/SvelteKit 一起工作所需要的，那对我来说没问题。但我想知道:为什么这会成为一个问题？

最小复制 repo :https://github.com/sophiamersmann/test-svelte-kit-cypress

Answer 1

我认为问题在于Vite，它使用ES模块来加载页面及其组件。

在 cy.visit() 之前添加截距似乎可以提供一致的结果。(注意要拦截的 URL 可能会有所不同，您可以从 devtools Network 的最后一个条目中获取它)。

beforeEach(() => {
  cy.intercept('index.svelte?svelte&type=style&lang.css').as('svelte')
  cy.visit('/');
  cy.wait('@svelte')
});

使用 cypress-grep燃烧测试

npx cypress run --env burn=100

拦截

没有拦截

---

为什么不补水？

如果您创建一个等效的 Svelte 应用并将 hydratable 设置为 true，它将通过燃烧测试 - IMO，因为它使用 rollup vite 将应用交付给浏览器。