cypress - 点击后cypress记录多个url重定向

Question

我有一个场景，点击提交按钮将重定向到 /redirect1 页面，我们将在其中进行一些验证并自动重定向到 /redirect2 并进行一些其他验证并重定向到 /success 页面。

我需要验证在单击提交按钮时它会移动到 /redirect1 页面，然后移动到 /redirect2 页面并最终登陆 /success 页面

如何使用 cypress 自动执行此过程

标签： cypress

Answer 1

我喜欢非常具体地说明我期望发生的事情，所以我通常会做以下事情：

安排：

1. 指定您将要调用/需要等待的 API 端点（这不是必需的，但您可以确保在调用解决之前断言不会运行）

   cy.server()
   cy.route('POST', '**/registration').as('registerCall')
   cy.route('POST', '**/verification').as('verifyCall')
   

   （您可以通过精确的 String、Glob 或 RegEx 匹配路由，https: //docs.cypress.io/api/commands/route.html#Syntax ）

行为：

2. 一拍即合

   cy.visit('/')
     .getByText('Start the process')
     .click()
   

断言：

3. a）如果您希望它立即重定向，请为其断言

   cy.url().should('eq', `${BASE_URL}/redirect1`)
   

或者

3. b) 如果您只在此之后进行 API 调用和重定向，让我们等待它解析然后断言。我们指定我们正在等待的 API 调用，@后跟我们在上面设置的别名 ( cy.route(...).as(yourAlias))。我为我的第一个 API 调用设置了别名，registerCall因此我们等待它解决，然后再做出进一步的断言：

   cy.wait('@registerCall')
   
   cy.url().should('eq', `${BASE_URL}/redirect1`)
   

4. 如果您希望出现一些文本/加载器，请检查它

   cy.findByTestId('loader-component').should('be.visible')
   cy.getByText(/^please wait$/i).should('be.visible')
   

5. 等待下一次 API 调用，之后检查路由变化

   cy.wait('@verifyCall')
   
   cy.url().should('eq', `${BASE_URL}/redirect2`)
   

6. ...链接你们其他人的断言。这可以永远持续下去。

希望这会有所帮助，让我知道我是否有不清楚的地方！

PS getByText（以及其他很酷的选择器）来自cypress-testing-library，它构建在dom-testing-library之上，允许您像用户一样导航您的应用程序，即主要通过查找文本。