Question

我在滚动显示剩余的DOM后重新调整大小的毫秒时遇到问题，这导致滚动几乎碰到底部，缺少了几个像素，因此我需要单击按钮仍然禁用。因此，我正在寻找一种最佳且更一致的方式来等待该状况，而无需添加明确的等待方式。

我尝试等待登录后发生的所有可用XHR调用，这在大多数情况下都有效，但并非100％（对于电子，这是我们CI所使用的），我还尝试获取其他元素滚动之前，就像禁用该按钮一样，但是这段时间似乎不足以使滚动完全调整大小。

这是我的实际代码示例：

 Cypress.Commands.add('waitForRequestAndVisit', (path, url) => {
   cy.server();
   cy.route('GET', path).as('request');
   cy.visit(url);
   cy.wait('@request');
 }),

这是规格文件：

cy.waitForRequestAndVisit('**/api/v1/auth/validate_token', '/');


const termsAndConditionsScroll = '[data-testid=terms-and 
conditions]';
cy.get(termsAndConditionsScroll).scrollTo('bottom');
cy.getSubmitButton()
   .should('not.be.disabled')
   .click();

Answer 1

我编写了自己的cypress命令，以便能够继续进行一些任意的javascript处理准备就绪。

Child

然后，您可以将民意测验滚动到底部，直到提交按钮处于活动状态：

.flex-wrapper {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  text-align: center;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
}

.flex-wrapper ul li {
  text-align: left;
  margin-bottom: 0;
  padding: 4px 0;
  width: 100%;
  font-size: 22px;
  line-height: 30px;
}

.flex-wrapper ul li:nth-child(-n+4) {
  text-align: right;
}

.flex-wrapper-2 {
  display: flex;
  justify-content: center;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
}

.flex-wrapper-2 ul {
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}

.flex-wrapper-2 ul li {
  text-align: left;
  margin-bottom: 0;
  padding: 4px 0;
  font-size: 22px;
  line-height: 30px;
}

.flex-wrapper-2 ul:nth-child(1) li {
  text-align: right;
}

赛普拉斯-等待滚动调整大小

1 个答案: