填写表单后期望其为valid，但e2e测试失败求助

嘿，我看你这E2E测试卡在表单有效性断言这了——明明填完表单应该是ng-valid状态，结果断言失败。咱们来拆解下可能的问题，再给你把代码改靠谱点：

可能踩坑的地方 #

• 重复提交表单：你同时调用了element(by.id('register')).click();和element(by.css('form')).submit();，两次提交会打乱表单状态逻辑，完全没必要。
• 固定等待不可靠：browser.driver.sleep(500)这种硬编码等待很容易因为渲染速度波动出问题，Protractor本身有更智能的等待机制。
• mat-select选择逻辑有漏洞：直接在each循环里用element(by.css('mat-option'))，如果多个下拉框同时展开，可能会选中错误的选项，导致字段验证不通过。
• 没考虑异步验证：如果表单里有异步验证（比如用户名查重），提交后得等验证完成再断言状态，不然会拿到中间的无效状态。

修复后的测试代码 #

it("1: Should create a new sitter", async () => {
  browser.get('/register-sitter');

  // 填写基础信息
  await element(by.id('firstname')).sendKeys('Susan');
  await element(by.id('lastname')).sendKeys('Winston');
  await element(by.id('birthdate')).sendKeys('4/18/2018');
  await element(by.id('gender')).all(by.tagName('mat-radio-button')).get(0).click();

  // 逐个处理mat-select，确保每个下拉框选对选项
  const selectElements = await element.all(by.css('mat-select'));
  for (const select of selectElements) {
    await select.click();
    // 等待选项加载完成可点击，再选第一个
    const firstOption = element(by.css('mat-option'));
    await browser.wait(protractor.ExpectedConditions.elementToBeClickable(firstOption), 3000);
    await firstOption.click();
    // 等下拉框关闭，避免干扰下一个操作
    await browser.wait(protractor.ExpectedConditions.stalenessOf(firstOption), 3000);
  }

  // 填写账号信息
  await element(by.id('username')).sendKeys('s.w@com');
  await element(by.id('password')).sendKeys('susu123W');

  // 只点击一次注册按钮即可，表单会自动提交
  await element(by.id('register')).click();

  // 等待表单状态更新，兼容异步验证场景
  const form = element(by.css('form'));
  await browser.wait(protractor.ExpectedConditions.presenceOf(form), 3000);
  // 自定义等待，直到表单变为有效状态
  await browser.wait(async () => {
    const formClass = await form.getAttribute('class');
    return formClass.includes('ng-valid');
  }, 5000, "表单未在预期时间内变为有效状态");

  // 最终断言
  expect(await form.getAttribute('class')).toContain('ng-valid');
});

关键改进点 #

• 移除重复提交：只保留注册按钮的点击，避免状态混乱。
• 用智能等待替代硬休眠：用elementToBeClickable、stalenessOf等ExpectedConditions，让测试适配不同的渲染速度，更稳定。
• 循环处理下拉框：用for循环替代each，确保每个下拉框操作完成后再处理下一个，避免并行操作的冲突。
• 等待异步验证完成：自定义等待条件，直到表单确实变为ng-valid，解决异步验证导致的断言时机问题。

额外排查小技巧 #

• 先手动走一遍流程，确认填这些信息时表单确实能变成有效状态，排除业务逻辑本身的问题。
• 测试失败时，可以打印表单的class属性，看看是ng-invalid的话，再检查哪些字段带ng-invalid类，定位具体是哪个字段没通过验证。

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