如何使用 css-modules 在站点上调整 Capybara finders？

Question

在我们的自动化测试中，代码中的典型行可能类似于：

find('.edit-icon').click

我们正在我们的项目中使用 css 模块，我被警告说 class 名称可能会发生巨大变化。一个非常滑稽的例子是这个网站在其 class 名称中使用表情符号（当您检查页面时）：

我如何为这种剧烈的变化做最好的准备？我想我们的许多规范都被打破了，但我有点担心无法在我们的项目中使用这项新技术编写测试。

Answer 1

使用自定义水豚选择器，您可以从正在完成的实际 css 查询中抽象出来并将其移动到一个位置。在您的评论中，您提到需要更改为以传入值开头的 class 属性。

Capybara.add_selector(:class_starts_with) do
  css { |locator| "[class^=\"#{locator}\"]"
end

会这样做，然后可以称为

find(:class_starts_with, 'something')

或者如果你设置 Capybara.default_selector = :class_starts_with 它只是

find('something')

与其更改 default_selector，另一种选择是只定义一个辅助方法，如 find_by_class_start 或仅调用 find with :class_starts_with 的方法（Capybara 的#find_field, 等工作).

另请注意，只有设置了一个 class 名称，上面的自定义选择器才会真正起作用，如果需要多个名称，您可以将选择器更改为 "[class^=\"#{locator}\"], [class*=\" #{locator}\"]"

How to adjust Capybara finders on a site using css-modules?