如何应对快速行动

Question

我有一个 table 显示查询结果。当我启动查询时，会显示加载微调器，然后在服务器 returns 数据时显示结果。这个简单的场景在 Cypress 中测试起来非常棘手。

cy.get("table .loadingSpinner", {timeout: 60000}).should("be.visible");
cy.get("table .loadingSpinner", {timeout: 60000}).should("be.not.visible");
cy.get("table", {timeout: 60000}).find("tr[data-index]", {timeout: 60000}).should("have.length.gt", 0);

有时此代码在第一行失败，因为加载速度太快，赛普拉斯无法捕捉到加载微调器的可见性。最糟糕的是，这种情况使我的测试结果取决于服务器负载。显然，我不能只检查 table tr 是否有长度 > 0，它会匹配 table 中显示的先前数据，而不是我刚刚进行的查询，我想检查结果. 如何处理？

我可以等待原始服务器响应，但这不切实际，甚至可能不可能，我有几十个 table 查询不同的端点，有时不止一个查询相同的端点 table.

Answer 1

您在 table 上试过 .should("not.be.empty") 了吗？

Answer 2

您是在测试微调器的功能，还是在测试查询的结果？

如果您正在测试查询，只需执行

{
  cy.wait(100)
  cy.get("table .loadingSpinner", {timeout: 60000}).should("be.not.visible");
}

并且不要寻找它在那里，只要寻找它不在那里。根据需要增加超时。

如果您正在测试微调器，则应用程序需要放慢速度以便您有机会捕捉到它。

Answer 3

我认为可靠地测试加载程序的唯一方法是拦截和延迟响应。

见intercept - StaticResponseObject里面有延迟选项模拟慢速网络，也就是用户看到loader的场景

{
  /**
   * Serve a fixture as the response body.
   */
  fixture?: string
  /**
   * Serve a static string/JSON object as the response body.
   */
  body?: string | object | object[]
  /**
   * HTTP headers to accompany the response.
   * @default {}
   */
  headers?: { [key: string]: string }
  /**
   * The HTTP status code to send.
   * @default 200
   */
  statusCode?: number
  /**
   * If 'forceNetworkError' is truthy, Cypress will destroy the browser connection
   * and send no response. Useful for simulating a server that is not reachable.
   * Must not be set in combination with other options.
   */
  forceNetworkError?: boolean
  /**
   * Milliseconds to delay before the response is sent.
   */
  delay?: number
  /**
   * Kilobits per second to send 'body'.
   */
  throttleKbps?: number
}

如何应对快速行动

How to deal with fast actions

javascript

end-to-end

bootstrap-table

cypress