如何使用 css 模块调整网站上的水豚查找器？

Question

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

find('.edit-icon').click

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

css 模块由 Glenn Maddern 设计

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

Answer 1

使用自定义水豚选择器，您可以从正在完成的实际 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 或仅使用 :class_starts_with 调用 find 的方法（Capybara 的 #find_field 等如何工作）。

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