赛普拉斯，页面内容和变量

Posted 2023-04-15

【中文标题】赛普拉斯，页面内容和变量

【英文标题】：Cypress, page content and variables

【发布时间】：2021-08-20 14:48:33

【问题描述】：

对或错：在 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))

但是，由于赛普拉斯运行的异步方式，我无法创建此变量。正确的？任何创建为空白的值。

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

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/ 页上显示的值进行比较概括。但这是不可能的，因为单元测试思维似乎是赛普拉斯的基础。

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

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

更新：

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

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'。

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

所以我将 'have.length' 替换为 'eq'：

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，我转到下一页并获取元素的数量），那么它就可以工作。但是 Kerry 展示它的方式，它会更加灵活。但是，唉，上面的错误。

【问题讨论】：

你读过吗？ docs.cypress.io/guides/core-concepts/variables-and-aliases?它是异步的，但您可以访问 closure 中的值：github.com/textbook/rps-api/blob/…

我没有提到.should，我说的是.then。请实际阅读我链接到的内容。如果您不在十分钟内注销两个社区，您可能还会发现人们更倾向于在空闲时间帮助您。

【参考方案1】：

正如 jonrsharpe 在 cmets 中提到的，请彻底阅读 Cypress 关于变量和别名的文档。这是 Cypress 的核心概念，它将让您深入了解如何实现变量并在测试步骤之间传递值。

您如何实现的读者摘要示例如下：

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

这样做是cy.wrap 将在赛普拉斯命令链中产生来自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)
)

【讨论】：

您能看一下问题中的 UPDATE 吗？我正在尝试您在此处显示的方法，但效果不佳。

看起来您正试图通过变量名显式访问该变量。请看我的两个例子：第一个是使用this.上下文关键字来访问变量，所以它是this.myVariableName。第二种是使用cy.get() 来获取变量值，然后在then() 函数中使用生成的值。如果你使用这种方法，你需要像这样访问变量：cy.get("@myVariableName")

是的，我一直在尝试。 “这个”不起作用，期间。不知道你使用的是不是和我一样的环境（IntelliJ，TypeScript）。不过，它可以在没有“this”的情况下工作。你的第二个例子我实际上可以运行。第一个，不是。 :-)