TestCafe chrome：无头间歇性失败并发出 Vue 事件

如何解决TestCafe chrome：无头间歇性失败并发出 Vue 事件

• Chrome：版本 91.0.4472.114（官方版本）(x86_64)
• testcafe：1.14.2

Vue 代码

模板

<input
  id="amount"
  v-model="amount"
  min="0"
  name="amount"
  class="input-field"
  :placeholder="labelPlaceholder"
  @input="validateAmount"
>

事件发射器

validateAmount() {
  ...
  this.$root.$emit('new-amount',this.id,this.valid,this.amount);
},

事件接收器

this.$root.$on('new-amount',(id,valid,amount) => {
  if (this.id === id) {
    this.amount = amount;
    this.validamount = valid; // In the screenshot below
  }
});

测试代码

带有 chrome:headless 的 testcafe（浏览器模式有效）间歇性地失败，用于 Vue 事件发射的测试。不管测试是否等待 2 秒，结果都是一样的，但是当它启用 Quarantine mode 时它通过了（虽然我不想使用它）

test('Should be enabled when a valid value is entered',async (t) => {
  await t
    .typeText(amount,'1')
    .expect(amount.value)
    .eql('1');
  await t.wait(2000);
  const after = button.withAttribute('disabled','disabled').exists;
  await t.expect(after).notOk();
});

结果 testcafe 测试（错误截图）

1) AssertionError: expected true to be falsy

用户的结果（必须）

解决方法

由于启用 quarantine mode 解决了问题，我认为问题的发生是因为有时事件未在 2 秒内触发。 尝试按以下方式重写您的代码：

test('Should be enabled when a valid value is entered',async (t) => {
    await t
        .typeText(amount,'1')
        .expect(amount.value).eql('1');
        .expect(button.hasAttribute('disabled')).notOk();
});