点击后如何等待页面完成在柏树中重新加载？

Question

我得到了表单，当我触发点击提交按钮时，这会刷新当前页面。在那之后，我想做一些断言。我怎么知道页面完成刷新并且可以开始搜索元素？

cy.get('#formButton').click() // adds new item and refresh page
// do assertions on page

Answer 1

这个解决方案是posted by @msty on a similar GitHub issues:

// Navigate / submit form
cy.click('#someButtonToNavigateOnNewPage');

cy.location('pathname', {timeout: 10000})
  .should('include', '/newPage');

// Do assertions here
cy.contains('h1', 'success')

Cypress Docs 的另一个解决方案是：

// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  // we can now access the low level xhr
  // that contains the request body,
  // response body, status, etc
})

Answer 2

5 种方式：

1) 制作 SPA 不刷新，并在更改 DOM 后使用回调/承诺；

2) 设置cookie，刷新页面，每次页面加载使用条件如：

if (existsRefreshCookieAfterFormSubmit()) { ...

3) 像这样阻止表单发送：

form.onsubmit = function() { return false; };

4) 使用<a> 代替<button> 或<input>

5) 不要使用 <form> 作为输入的父级，仅使用输入。