赛普拉斯 - 搜索后如何使用 wait()答案

【问题标题】：Cypress - How to get around with wait() after searching赛普拉斯 - 搜索后如何使用 wait()
【发布时间】：2020-10-16 01:55:13
【问题描述】：

我有以下情况：我在搜索框中搜索一个元素。当元素出现时（可能需要一些时间），我单击加载新视图的元素。然后我尝试单击新视图中的某个按钮。由于加载搜索结果需要一些时间，因此不会加载新视图。有什么办法可以避免 wait()？

这就是我所拥有的：

 cy.get('[data-cy="search"][data-component="input_box"]').type('Find me{enter}')
 cy.wait(200) // How to avoid this???
 cy.get('[data-name="Find me"]').contains('Find me').click()// Should load a new view 
 cy.get('[data-cy = "filter"]').click() // failing here as new view is not loaded

任何建议都将受到高度赞赏。

类似的：

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case1', function (){
      // test step to launch a URL
      cy.visit("https://www.tutorialspoint.com/videotutorials/index.php");
      // enter test in the edit box
      cy.get("#search-strings").type("Java");
      // wait for some time
      cy.wait(3000); // ---> how to avoid this?
      // using jQuery selector to identify only visible elements
      // assertion to validate the number of search results
      cy.get('.clsHeadQuestion:visible'). should('have.length',19);
   });
});

【问题讨论】：

您能否提供一个简化的应用示例？但基本上，您只需要在点击过滤器后“等待”新视图
我经常这样做会等太久 :)
抱歉，没说清楚。我的意思是，在此断言之后像 cy.get('your-view-page').should('exist') 一样等待，您的视图页面已准备就绪，您可以为该页面做出更多断言
您可以了解更多关于赛普拉斯如何自动重试您的查询（等到它出现），正如我在上面的文档docs.cypress.io/guides/core-concepts/retry-ability.html中提到的那样

标签： javascript automation cypress

【解决方案1】：

在类似的情况下，您可以使用cy.route() 来获取网络请求并等待它。在您的情况下，路由将获取 n/w req 并等待“找到我”请求得到完全处理，以便您可以继续进行下一个过滤操作。

步骤：打开 chrome 控制台，导航到网络选项卡，过滤 XHR 请求。现在单击页面中的“查找我”按钮。您通常可以看到一个 GET 请求，例如，如果请求如下所示，https://example.com.au/v1/api/listview?page=2 请复制/v1/api/...中的url并添加到cy.route()的url值中，如下所示。

注意：点击 Find me 按钮，查看它的 GET 或 POST 请求，通常是 GET 请求，检查 url 是否有任何编码值，如果它有编码值，你必须使用 decodeURIComponent() 和传递里面的url如下>>url:decodeURIComponent('**/v1/api/listview?page=2**'),

beforeEach(()=>{
    cy.server();
    cy.route({
     method: 'GET',
     url:'**/v1/api/listview?page=2**',
     delay: 2000
    }).as('getLoadNewView');
  })

    it('Route waiting for loading the new view for filter action', () => {
      cy.get('[data-cy="search"][data-component="input_box"]').type('Find me{enter}')
      cy.get('[data-name="Find me"]').contains('Find me').click()// Should load a new view 
      cy.wait('@getLoadNewView');
      cy.get('[data-cy = "filter"]').click();
      })

【讨论】：

【解决方案2】：

您可以尝试在 get 中添加额外的超时时间吗？比如：

cy.get('[data-name="Find me"]', { timeout: 1000 }).contains('Find me').click()

这不是一个完美的解决方案，但有时添加这样的超时会有所帮助。

【讨论】：

【解决方案3】：

我猜想在您完成搜索栏的输入后，后台正在进行一些网络活动。当我遇到类似情况时，我通常会等待请求完成，然后检查 UI 元素。

https://www.cypress.io/blog/2019/12/23/asserting-network-calls-from-cypress-tests/，向下滚动到“等待网络调用发生”部分。

cy.wait('....') 仍然存在，但这次我等待影响 UI 的明确内容

【讨论】：