Cypress和React的测试工作流程

Question

我对开发和测试工作流程有疑问。我使用的是Cypress，但这个主题适合任何端到端测试。

问题是如何在浏览器中选择图元？

1、显式选择器，如每个元素或组件上的数据cy或自动化id。

2、通过屏幕上的可见文本选择元素，然后通过DOM层次结构导航到特定元素。

Answer 1

您编写的每个测试都将包含元素的选择器。为了省去很多麻烦，您应该编写对更改具有弹性的选择器。

我们经常看到用户在针对他们的元素时遇到问题，因为：

您的应用程序可能使用动态类或更改的ID您的选择器会中断对CSS样式或JS行为的开发更改幸运的是，可以避免这两个问题。

不要以基于CSS属性的元素为目标，例如：id、class、tag不要针对可能更改其文本内容的元素添加数据-*属性，使更容易定位元素

<button
id="main"
class="btn btn-large"
name="submission"
role="button"
data-cy="submit"
>
Submit
</button>

然后例如点击按钮

cy.get("[data-cy=submit]")
.should("be.visible")
.click()

您也可以在dom中搜索特定的文本。

cy.get("button")
.should("be.visible")
.contains("Submit")
.click()

Answer 2

自定义命令commands.js

Cypress.Commands.add("sendBtn", () => {
cy.get("[data-cy=cy_send_btn]")
.should("be.visible")
.click()
})

在测试文件中

it("Add test description here", function() {
.
. 
.
.
cy.sendBtn()
})

上面显示的自定义命令，您将能够在其他测试文件中多次使用所有发送按钮。您的测试将更加孤立和高效。