时间戳

首页 > 解决方案 > 如何使用 cypress 找到与特定对象对应的元素？

javascript - 如何使用 cypress 找到与特定对象对应的元素？

问题描述

我刚开始使用 Cypress，它引起了我的注意。但是，当我尝试更具体地测试我的测试时，我发现它很难。我试图自动化的页面有一个如下所示的表单：

<form>
   <div class="mb-3">
      <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
         <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Email address</label>
         <div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="email" placeholder="Enter your email address" type="email" class="MuiInputBase-input MuiInput-input" value=""></div>
         <p class="MuiFormHelperText-root Mui-error">Please enter a valid email address</p>
      </div>
   </div>
   <div class="mb-3">
      <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
         <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated Mui-error Mui-error" data-shrink="false">Password</label>
         <div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-error Mui-error MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="true" name="password" placeholder="Enter your password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
         <p class="MuiFormHelperText-root Mui-error">Password should have minimum of 8 chars.</p>
      </div>
   </div>
   <div class="mb-3">
      <div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth">
         <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false">Confirm password</label>
         <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" name="password_confirm" placeholder="Confirm password" type="password" class="MuiInputBase-input MuiInput-input" value=""></div>
      </div>
   </div>
   <div class="form-group pt-2 mb-4">By clicking the <strong>Create account</strong> button below you agree to our terms of service and privacy statement.</div>
   <button class="MuiButtonBase-root MuiButton-root MuiButton-contained mb-5 MuiButton-containedPrimary MuiButton-containedSizeLarge MuiButton-sizeLarge" tabindex="0" type="submit"><span class="MuiButton-label">Create Account</span><span class="MuiTouchRipple-root"></span></button>
</form>

在这里，我有与“电子邮件”和“密码”字段相关的错误消息，这两个元素都在

在各自的下。我可以通过使用以下语句轻松验证错误消息：

cy.get('p').contains('Please enter a valid email address')
and
cy.get('p').contains('Password should have minimum of 8 chars')

但我想做的是，获取元素并找到孩子

我的 div 元素，然后获取我的文本

元素。我为什么要这样做是为了确保我尝试验证的错误消息实际上对应于我的测试元素。

我怎样才能实现它？提前致谢！

标签： javascriptcypress

解决方案

您可以通过从帮助文本中遍历 DOM 来做到这一点：

cy.get("p")
  .contains("Please enter a valid email address")
  .then(($el) => {
    expect($el.siblings("label").text()).to.eq("Email address");
  });

cy.get("p")
  .contains("Password should have minimum of 8 chars")
  .then(($el) => {
    expect($el.siblings("label").text()).to.eq("Password");
  });

推荐阅读