在 Capybara 测试中触发 v-text-field 的 @change

Question

我有这个规格：

checklist_item_element.fill_in 'description', with: 'Changed description'
page.find('body').click # to blur the input field
checklist_item.reload
expect(checklist_item.description).to eq('Changed description')

我有这个模板：

v-text-field.habit-card__habit-checklist__checklist-item-description(
    name="description"
    v-model="checklistItem.description"
    data-vv-name="description"
    @change="saveChecklistItem(checklistItem)"
)

我正在使用 Selenium 的 webkit 驱动程序。最后一个 expect 总是失败，因为 description 仍然是旧值而不是 Changed description。

如果我自己使用 Chrome 浏览器执行相同的操作，它绝对可以正常工作。

我猜 @change 没有被触发。我是对的吗？如果是，我该怎么做才能实现它？

Answer 1

由浏览器操作（fill_in、click 等）触发的任何操作通常不会在这些方法 return 时完成，因为水豚和驱动程序无法知道哪些操作是否会触发页面上的进一步操作，也不会触发这些操作是否与测试人员正在做的任何事情相关。这就是为什么所有 Capybaras finders/matchers 都内置了 waiting/retrying 行为，以便与页面中发生的变化同步。这也是为什么在功能测试中进行直接数据库检查通常是一种糟糕的代码味道的部分原因，因为它不提供任何与页面同步的方法。

如果你真的需要做（或坚持做）直接数据库检查，那么你需要在他们之前（在触发他们的浏览器操作之后）对任何视觉页面更改向用户指示该操作有一个期望完全的。如果没有视觉页面变化（通常表示糟糕的用户体验），那么您真正能做的就是休眠一段时间（或者可能使用提供通用等待规范匹配器的 gem 之一（waiting_rspec_matchers，等等)).

在 Capybara 测试中触发 v-text-field 的 @change

Trigger @change of v-text-field in Capybara test

rspec

capybara-webkit

vuetify.js