css - 如何使用 css-modules 调整网站上的 Capybara 查找器？

Question

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

find('.edit-icon').click

我们正在我们的项目中使用 css-modules，我被警告过类名可能会发生巨大变化。一个非常滑稽的例子是这个网站在它的类名中使用了表情符号（当你检查页面时）：

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

score 3 · Accepted Answer

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

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 并传递 :class_starts_with 的东西（Capybara 的#find_field 等如何工作）。

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

1 回答 1