使用 Svelte 进行 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 一起工作所需的条件，那么我就同意了。但我想知道：为什么这会成为一个问题？

最小复制仓库：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将应用程序交付到浏览器。