测试具有多个连续页面的 webapp 时出错答案

【问题标题】：Error when testing webapp with multiple sequential pages测试具有多个连续页面的 webapp 时出错
【发布时间】：2019-08-02 22:03:40
【问题描述】：

我正在测试一个 ASP.NET webapp（我无权访问的代码），其中包含多个连续页面，在 Cypress 脚本中具有以下相关部分：

describe("Calculation", function() {

  // ...

  context("Pages", function() {

    // ... 

    // Page 1
    it("With all inputs", function() {
      cy.visit(url)
      // ... setting input fields ...
      cy.get(next).click()
      cy.get('.stg-error-mark').should('have.length', 0)
    })
  
    // Page 2
    it("No selection", function() {
      cy.get(next).click()
      cy.get('.stg-error-mark').should('have.length', 2)
    })
  })
})

第 2 页it(...) 的命令日志包含：

...
- 点击
(FORM SUB) -- 提交表单-- ← 第 2 页在 Cypress 的 App Preview 中看起来不错。
(PAGE LOAD) -页面已加载-- ← 网络应用在应用预览中显示以下错误。
...

错误

输入交易被自动取消，因为它没有持续太久。请重新开始。

如果在Page 2 的it(...) 中没有visit() 编辑Page 1，则webapp 似乎缺少一些内部状态。

我知道将所有相关的页面代码部分放入 (describe-global) functions 并越来越多地调用它们，这样在每个测试中总是从 Page 1 开始。但是，由于这个应用程序有 33 个不同的功能路径和 5 到 6 个连续页面（取决于用户在前一页上的输入），我想避免这种代码膨胀、混乱、容易出错和耗时的函数链接——并且全局变量是魔鬼。

更新

从理论到实践，这是功能路径图：

  +------ Seite 1 -------+----- Seite 2 -----+------ Seite 3 ------+------ Seite 4 ------+- Seite 5.1 -+- Seite 5.2 -+
  |    Wohneinheiten     |   Fördermodell    |   1. Wohneinheit    |   2. Wohneinheit    | Berechnung  | Berechnung  |
  |         2/4          |        8/2        |        12/10        |         6/5         |   Input     |   Output    |
  |                      |                   |                     |                     |             |             |
  |    Wohneinheiten:    |   ▼ Modell        |  Heizwärmebedarf:   |                     |             |             |
  |  +- <no> --->(X)     |  +-▼ Passiv ------>-- HWB: ----------------------------------->------------->             |
  |  |                   |  |                |   +- !]0..10]       |                     |             |             |
  |  +- WE1: --->(X)     |  |                |      +--->(X)       |                     |             |             |
  |  |                   |  |                |                     |                     |             |             |
  |  +- WE2: --->(X)     |  +-▼ Punkte ------>-- HWB: ----------------------------------->------------->             |
  |  |                   |  |                |   +- !]10..49]      |                     |             |             |
  |  +- WE1:             |  |                |      +--->(X)       |                     |             |             |
  |  |  +- AV-V: -------->--+                |                     |                     |             |             |
  |  |                   |  |                |  +-▼ PV ---------------------------------->------------->             |
  >--+                   |  |                |  +-▼ Solar ------------------------------->------------->             |
  |  |                   |  +-▼ Niedrig ----->--+-x WRL --------------------------------->------------->             |
  |  |                   |  |                |  +- <no> --->(X)    |                     |             |             |
  |  +- WE2:             |  |                |                     |                     |             |             |
  |  |  +- AV-V: --->(X) |  +-▼ Niedrigst --->--▼ Heizsystem ---------------------------->------------->             |
  |  |                   |  |                |    +-▼ Elektrisch   |                     |             |             |
  |  |                   |  +-▼ <no> --->(X) |        +-▼ PV2kWp   |                     |             |             |
  |  |                   |                   |        |   +--->(X) |                     |             |             |
  |  |                   |                   |        +-o WRL      |                     |             |             |
  |  |                   |                   |            +--->(X) |                     |             |             |
  |  +- WE1:             |                   |                     |                     |             |             |
  |     +- WE2:          |   ▼ Modell        |  Heizwärmebedarf:   |  Heizwärmebedarf:   |             |             |
  |        +- AV-V: ----->--+-▼ Passiv ------>-- HWB: ------------->-- HWB: ------------->------------->             |
  |                      |  |                |   +- !]0..10]       |   +- !]0..10]       |             |             |
  +----------------------+  |                |      +--->(X)       |      +--->(X)       |             |             |
                         |  |                |                     |                     |             |             |
                         |  +-▼ Punkte ------>-- HWB: ------------->-- HWB: ------------->------------->             |
                         |  |                |   +- !]10..49]      |   +- !]10..49]      |             |             |
                         |  |                |      +--->(X)       |      +--->(X)       |             |             |
                         |  |                |                     |                     |             |             |
                         |  +-▼ Niedrig ----->--+-▼ PV  ----------->--+-▼ PV  ----------->------------->             |
                         |  |                |  +-▼ Solar --------->  +-▼ Solar --------->------------->             |
                         |  |                |  +-x WRL ----------->  +-x WRL ----------->------------->             |
                         |  |                |  +- <no> --->(X)    |  +- <no> --->(X)    |             |             |
                         |  |                |                     |                     |             |             |
                         |  +-▼ Niedrigst --->--▼ Heizsystem ------>--▼ Heizsystem ------>------------->             |
                         |  |                |    +-▼ Elektrisch   |    +-▼ Elektrisch   |             |             |
                         |  +-▼ <no> --->(X) |        +-▼ PV2kWp   |        +-▼ PV2kWp   |             |             |
                         |                   |        |   +--->(X) |        |   +--->(X) |             |             |
                         |                   |        +-x WRL      |        +-x WRL      |             |             |
                         |                   |            +--->(X) |            +--->(X) |             |             |
                         +-------------------+---------------------+---------------------+-------------+-------------+
Legend:
  : ...... Textbox
  .. ..... Interval
  ▼ ...... Dropdown-Listbox or selection
  x,o .... Checkbox (checked, unchecked)
  <no> ... No input or selection
  ! ...... Not
  (X) .... Error
  > ...... Proceed to page or error

现在一切都清楚了，不是吗？（：好的，在编辑器中它看起来不那么压倒性的绿色和更高更宽的视图。）

在Seite 1上输入WE2的情况下，下部的Seite 3和Seite 4相同且重复。

【问题讨论】：

反对者介意解释一下吗？我很高兴听到如何改进我的问题。

标签： javascript asp.net web-applications functional-testing cypress

【解决方案1】：

（我不是反对者）

我不确定您的问题到底是什么——您需要提供更多信息：

错误来自哪里以及触发它的原因是什么？
你确定你不拆除状态/cookies/等吗？测试用例之间？

无论哪种方式，一般情况下，您不应在一个测试用例依赖于前一个测试用例的测试用例之间共享状态，并且测试用例必须按给定顺序运行。测试用例 (it) 应该相互独立并且自给自足。

不遵守此最佳做法会导致复杂的测试用例难以维护。您也无法切换 it.only 来测试单个案例，等等。

当您不拥有整个代码库（在团队项目中）时，这一点尤其重要，因为有人可能会更改测试的运行方式（例如，清除测试之间的状态；随机化测试顺序...）。

【讨论】：

感谢您的回答。例如，我知道单元测试应该是自包含/自给自足的。这是否也适用于一般的功能测试？然而，从Page 1 开始每个测试似乎是唯一的方法，it.only 是一个好点。
是的，我想说它普遍适用——cypress docs 中甚至提到过它
感谢您的链接。我访问了很多 Cypress 的文档页面，但没有那个页面。正如我所担心的那样：我必须将所有相关代码外部化为describe-全局函数和变量，因为似乎不可能链接beforeEach，例如let beforeEachP2 = function() { beforeEach( function() { beforeEachP1(); ... }; beforeEachP2();，是吗？似乎只有一个 beforeEach 在一个 context 中运行：第一个被调用。
是的，您不能在手动调用的函数中声明beforeEach。你应该让 mocha（赛普拉斯使用）自己做它的事情。但是每个嵌套的describe/context 可以有自己的beforeEach。另请注意，describe 和 context 是同一件事——我不会同时使用这两者，因为这可能表明它们都有不同的用途。
是的，但是 beforeEach 或 it 在每个嵌套的 desribed/context 在这种情况下都不足以支持我。每次测试都必须从头开始 (Page 1)，重复执行相同的代码。在每个 beforeEach 或 it 中乘以它并不是真正的 DRY。

【解决方案2】：

我通过我在问题中提到的试图避免的方法解决了这个问题：将相关代码外部化到describe-global functions。这就是我上面提到的所有内容，但至少是DRY。

describe("Calculation", function() {

  let P1withAllInputs = function() {
    cy.visit(url)
    // ... setting input fields ...
    cy.get(next).click()
    cy.get('.stg-error-mark').should('have.length', 0)
  }

  context("Page 1", function() {

    // ... 

    it("With all inputs", function() {
      P1withAllInputs()
    })
  })

  context("Page 2", function() {

    P1withAllInputs()

    // ... 

    it("No selection", function() {
      cy.get(next).click()
      cy.get('.stg-error-mark').should('have.length', 2)
    })
  })
})

【讨论】：