【.com快速翻译】端到端测试虽然困难、耗时，并且有大量问题需要解决。但如果工具使用得当，效果可以事半功倍。赛普拉斯测试框架提供快速、简单和可靠的浏览器测试。可以帮助解决大部分端到端测试的痛点，让编写测试变得有趣。但是，要避免一些错误，以便您可以充分利用Cypress。在这篇博文中，我们将介绍在使用Cypress进行测试时应避免的5个常见错误。使用id和class来选择元素使用id和class来选择元素是有问题的，因为它们主要用于行为和样式目的，因此经常更改。这样做会导致您可能不想要的脆弱测试。相反，您应该始终尝试使用data-cy或data-test-id。因为它们专用于测试目的，这使得它们与行为或样式脱钩，因此更加可靠。例如，假设我们有一个输入元素：应该使用id或class来测试这个元素，你应该使用data-tested://Don'tcy.get("#main").something();cy.get(".input-box").something();//Docy.get("[data-testid=name]").something();有时需要使用文本（例如按钮标签）来进行断言或操作。虽然这很好，但请记住，如果文本更改，则会导致测试失败。将赛普拉斯命令视为Promises赛普拉斯测试由赛普拉斯命令组成，例如Cypress.get和Cypress.visit。类似于Promises，但不是真正的Promises。这意味着，我们不能使用像async-await这样的语法来使用它们。例如：//这不会工作constelement=awaitcy.get("[data-testid=element]");//用element做点什么cy在.then命令的帮助下完成。它将保证下一个命令仅在上一个命令完成后运行。//这个是有效的当使用像Promise这样的命令时，它可能不像你预期的那样工作，因为Cypress命令就像Promises，但不是真正的Promises。在Cypress测试中使用任意等待在编写Cypress测试时，我们希望在真实场景中模拟真实用户的行为。由于网络延迟和设备限制等因素，现实世界的应用程序是异步且缓慢的。在为这类应用程序编写测试时，我们倾向于在cy.wait命令中使用任意值。这种方法的问题在于，虽然它在开发中运行良好，但不能保证始终稳定。因为底层系统依赖于网络请求之类的东西，这些东西是异步的，几乎无法预测。//可能有效（有时）cy.get("[data-testid=element]").performSomeAsyncAction();//等待1000mscy.wait(1000);//在操作完成后做其他事情，我们应该等待视觉元素完成加载。它不仅更接近真实世界的用例，而且还提供了更可靠的结果。仔细想想，使用您的应用程序的用户可能会等待加载等视觉提示来确定操作是否完成，而不是等待任意长的时间。//正确的方式cy.get("[data-testid=element]").performSomeAsyncAction();//等待加载完成cy.get("[data-testid=loader]").should("not.be.visible");//现在我们知道之前的动作已经完成；moveahead例如，Cypress命令cy.get在断言之前等待一个元素，当然你可以修改预定义的超时值，超时的妙处在于它们只会等待一个条件被满足，而不是等待整个持续时间就像cy.wait命令一样。在Cypress测试中使用不同的域Cypress的一个限制是它不允许在单个测试中使用多个域名。如果您尝试在单个测试块中使用多个域，赛普拉斯将发出安全警告。如果您确实需要在一次测试中访问多个域。我们可以通过将测试逻辑拆分为单个测试文件中的多个测试块来做到这一点。例如，您可以将其视为多步骤测试：describe("TestPageBuilder",()=>{it("Step1:VisitAdminappanddosomething",{//...});it("第2步：访问网站应用程序并断言"，{//...});});我们在Webiny使用类似的方法来测试PageBuilder应用程序。以这种方式编写测试时要记住一些事情：您不能依赖持久存储，无论它是测试块中的变量还是本地存储。因为，当我们使用配置中定义的baseURL以外的域发出Cypress命令时，Cypress会执行拆卸和完全重新加载。由于与上述相同的问题，将针对每个此类测试块运行“之前”和“之后”等块。因此，在采用这种方法并相应地调整测试之前，请注意这些问题。混合异步和同步代码赛普拉斯命令是异步的，它们不返回值，它们生成一个值。当我们运行Cypress时，它不会立即执行命令，而是串行读取它们并将它们排队。只有在它一个一个地执行它们之后。因此，如果您编写混合异步和同步代码的测试，您将得到错误的结果。例如：it("doesnotworkasweexpect",()=>{cy.visit("your-application")//什么都没有发生yetcy.get("[data-testid=submit]")//仍然什么都没有发生"将立即评估为0cy.get(".another-selector")}else{/**此代码块将始终运行，因为代码执行时“el.length”为0*/cy.get(".optional-selector")}})相反，使用cy.then命令在命令完成后运行代码。例如：it("doesworkasweexpect",()=>{cy.visit("your-application")//什么都没发生yetcy.get("[data-testid=submit]")//还是什么都没有happening.click()//不，没什么。then(()=>{//将这段代码放在.then()中确保//它在cypress命令“执行”之后运行letel=Cypress.$(".new-el")//在.then()之后计算if(el.length){cy.get(".another-selector")}else{cy.get(".optional-selector")}})})总结Cypress是一个强大的端到端测试工具，但有时我们会犯错误，导致体验不愉快。通过避免常见错误，我们可以使端到端测试过程更加顺畅和有趣。【翻译稿件，合作网站转载请注明原译者和出处.com】
