Cypress测试：如何等待用户手动输入验证码后继续执行

你可以利用Cypress断言的自动重试机制实现等待用户输入验证码的需求。Cypress的.should()命令会持续检查目标元素状态，直到条件满足或超时（默认4秒，可自定义），刚好适配手动输入验证码的场景。

修改后的测试代码 #

it('Create Account', () => {
  cy.visit('http://localhost:4200/');
  // 点击前置按钮
  cy.get('.btn').click();
  cy.get('.bottom-box--inner > .flex > .btn').click();
  cy.get('.flex > .btn-primary').click();
  cy.get('.flex > .btn-primary').click();
  cy.get('#ion-input-0').click();
  // 输入用户名
  cy.get('#ion-input-0').type('username');
  cy.get('#ion-input-1').click();
  // 输入用户邮箱
  cy.get('#ion-input-1').type('user@email.com');
  cy.get('.p-5 > .btn').click();

  // 等待用户手动输入验证码（替换为你的验证码输入框选择器）
  cy.get('#你的验证码输入框选择器')
    .should('not.have.value', '') // 等待输入框不为空
    .should('have.value', (value) => {
      // 可选：验证输入为6位数字
      expect(value).to.match(/^\d{6}$/);
    });

  // 输入完成后自动点击确认按钮
  cy.get('app-otp.ng-star-inserted > .ion-no-border > .ios > .p-5 > .btn').click();
});

关键说明 #

• 选择器替换：将#你的验证码输入框选择器替换为实际的验证码输入框元素选择器（如果是多输入框组成的OTP组件，可改为检查所有输入框均有值）。
• 超时自定义：若默认4秒不够用，可通过.should({ timeout: 60000 }, 'not.have.value', '')设置更长超时（比如60秒），给用户足够时间查收并输入验证码。
• 格式验证：可选添加6位数字的正则校验，避免无效输入导致后续测试失败。

内容的提问来源于stack exchange，提问作者Benjamin