Cypress、页面内容和变量

编程问答 2022-04-29

问题描述

对与错：在 Cypress 中，不可能读取 X 页上的值，然后保留该值并将其与 Y 页上的值进行比较。

我可以从页面读取一个值并记录它：

cy.get('[data-e2e-selector=whatever]').then(elm => cy.log('Value from page X : ' + elm))

或者，例如，具有相似或部分匹配选择器的元素的数量：

cy.get('[data-e2e-selector=^whatever]').then(elm => cy.log('Number of elements like this on page X: ' + elm.length))

但是，由于 Cypress 运行的异步方式，我无法创建此变量。对？任何创建为空白的值。

我也不能将读取的值传递给方法，该方法又将其与下一页上的值进行比较：

compareTovalueOnNextPage(cy.get('[data-e2e-selector=^whatever]').then(elm => elm.length));

compareTovalueOnNextPage(value: number) { // NB: Not sure if it's a number or string yet...
    cy.get('[data-e2e-selector=^whateverNextPage]').then(elm => elm.length).should('have.length',4)
}

基本上，如果我想比较值，要么必须在同一页面上，要么需要进行硬编码。在实际端到端测试某些应用程序时，这是一个巨大的限制。很多时候，一个值是在页面 X 上创建的，基于在许多情况下应该是随机的输入，从而在测试中创建一个动态值。然后，在页面 Y 上，获取（从后端）或以其他方式显示相同的值，在摘要等中。自然，我想将页面 X 上显示的值与页面 Y/ 上显示的值进行比较概括。但这是不可能的，因为单元测试思维似乎是 Cypress 的基础。

或者我在这里遗漏了什么？有没有办法解决这个问题，不丑/不臭？我认为可以将 X 页上的值存储在一个文件中，然后在 Y 页上读取该文件。但是，Cypress 在读取文件时似乎只有 一个选项，那就是读取整个文件并寻找匹配项。所以那个文件会一团糟。或者我需要几个文件。

我意识到这是一种试图将非功能性方式强加于功能性和异步性技术的尝试。但是，如果不可能“保留”一个值并在以后使用它，那么在端到端测试方面非常限制（即使当测试是基于单元的时候不是这样）前端组件）。

更新：

根据 Kerrry 在以下答案中的建议：

cy.get('[data-e2e-selector=dellan-accordion]')
  .then(elm => cy.wrap(elm.length).as("myVariableName"));

-GO TO NEXT PAGE-

cy.get('[data-e2e-selector=betalingsplan-dellan]')
  .then(elm => elm.length)
  .should('have.length',myVariableName)

这会产生“期望 4 具有属性 'length'。

这显然意味着我无法得到长度的长度。

所以我用 'eq' 替换了 'have.length'：

cy.get('[data-e2e-selector=betalingsplan-dellan]')
  .then(elm => elm.length)
  .should('have.length',myVariableName)

我收到以下错误：

expected 4 to equal 0

所以，似乎第一个变量 - myVariable - 在第一个 cy.get() 之后消失了。

如果我在一个 get 里面做所有事情（在里面有另一个 get，我去下一页并获取元素的数量），那么它就可以工作了。但从克里展示的方式来看，它会更加灵活。但是，唉，上面的错误。

解决方法

正如 jonrsharpe 在评论中提到的，请仔细阅读 Cypress 关于变量和别名的文档。这是 Cypress 的核心概念，它将让您深入了解如何在测试步骤之间实现变量和携带值。

读者的摘要示例如下：

    cy.get('[data-e2e-selector=^whatever]')
      .then(elm => cy.wrap(elm.length).as("myVariableName"));

这样做的是 cy.wrap 将在 Cypress 命令链中从 elm.length 产生值，然后允许您将其分配给别名“myVariableName”。

在您想要比较单独页面上的值的以下测试步骤中，您可以通过以下两种方式之一访问别名的值：

使用 this.

cy.get('[data-e2e-selector=^whateverNextPage]')
  .then(elm => elm.length)
  .should('have.length',this.myVariableName)

或

通过cy.get()

cy.get("@myVariableName").then(function(variableValue){
  cy.get('[data-e2e-selector=^whateverNextPage]')
  .then(elm => elm.length)
  .should('have.length',variableValue)
})
asynchronouscypressend-to-end