Cypress-如何在搜索后使用wait()四处走动

Question

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

这就是我所拥有的：

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);
});
});

Answer 1

您能尝试在get中添加一个额外的超时吗？类似于：

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

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

Answer 2

在类似的情况下，您可以使用cy.route()来获取网络请求并等待它；找到我"请求得到完全处理，以便您可以继续执行下一个筛选器操作。

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

注意：点击"查找我"按钮，看到它是一个GET或POST请求，通常它会是GET请求，检查url是否有任何编码值，如果它有编码值，你必须使用decodeURIComponent()，并按如下方式将url传递到内部>gt；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();
})

Answer 3

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

https://www.cypress.io/blog/2019/12/23/asserting-network-calls-from-cypress-tests/，向下滚动至"等待网络呼叫发生"部分。

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