cypress - 让赛普拉斯与 StencilJS 组件配合使用时出现问题

Question

我在针对我的 Angular 应用程序的赛普拉斯测试中遇到了一些不稳定的行为：它们在针对我的本地机器时工作正常，但是当设置CYPRESS_BASE_URL为运行相同代码的远程机器时，一些测试会失败。

我想我已经将其范围缩小到 StencilJS 组件的交互。<input>考虑：我有一种使用常规元素询问用户名、密码等的表单：

<input formControlName="username" type="text">

……等等。测试可靠地与这些一起工作，这意味着这些语句正确填写了以下字段：

cy.get('[formControlName=fullname]').type(name)
cy.get('[formControlName=username]').type(username)
cy.get('[formControlName=password]').type(passwrod)

我有另一个表单，它使用了一个嵌入的 StencilJS 组件<input>，所以元素看起来像这样：

<my-input ngDefaultControl formControlName="newPassword" type="password"></my-input>
<my-input ngDefaultControl formControlName="confirmPassword" type="password"></my-input>

然后我的代码尝试填写两个字段：

cy.get('[formControlName=newPassword]').find('input').type(updated_password).blur()
cy.get('[formControlName=confirmPassword]').find('input').type(updated_password).blur()

但是这里的测试失败了：它实际上是填写第一个密码，前进到第二个字段并填写第二个——但随后第一个字段神秘地变成了空白！

Stencil 组件是一个简单的包装器<input>：

return (
  <input type={ this.type }
    value={ this.value }
    placeholder={ this.placeholder }
    onChange={ this.handleChange.bind(this) }></input>
);

我试过有无.blur(). 我尝试过使用和不使用.then(). 但是上面的测试总是在远程目标上失败，而在本地目标机器上总是成功。关于如何使这项工作可靠的任何其他建议？

标签： cypressstenciljs