如何使用CSS模块调整站点上的水豚发现者？ [英] How to adjust Capybara finders on a site using css-modules?

问题描述

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

In our automated tests, a typical line in our code might look something like:

find（'。edit-icon'）。单击

我们正在使用项目中的css-modules的方式，但是我已经警告过类名可能会发生巨大变化。一个非常奇怪的例子是该网站在其类名称中使用表情符号（当您检查页面时）：

We're on our way to using css-modules in our project and I've been warned that class names may change dramatically. A pretty zany example is this site that uses emojis in its class names (when you inspect the page):

Glenn Maddern的CSS模块

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

How might I best prepare for a change this drastic? I imagine many of our specs breaking, but I am a little worried about being unable to write tests at all with this new technology in our project.

推荐答案

使用自定义的水豚选择器，您可以从实际的CSS查询中提取内容并将其移至一个位置。在您的评论中，您提到需要更改以传递值开头的类属性。

Using custom capybara selectors you can abstract away from the actual css query being done and move it to one location. In your comments you mentioned the need to change to a class attribute that begins with a passed in value.

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

会这样做，然后可以称为

would do that and then can be called as

find(:class_starts_with, 'something')

或如果您设置Capybara.default_selector =：class_starts_with

or if you set Capybara.default_selector = :class_starts_with it would just be

find('something')

而不是更改default_selector选项是只定义一个辅助方法，例如find_by_class_start或通过：class_starts_with调用的find方法（通过Capybara的#find_field等）。

Rather than changing default_selector another option would be to just define a helper method like find_by_class_start or something that just calls find with :class_starts_with passed (how Capybara's #find_field, etc work).

也请注意自定义上面的选择器只有在设置了一个类名的情况下才真正起作用，如果期望多个，则可以将选择器更改为 [class ^ = \＃{locator} \]，[class * = \＃{locator} \]

Also note the custom selector above would only really work if only one class name was set, if multiple are expected you could change the selector to "[class^=\"#{locator}\"], [class*=\" #{locator}\"]"

这篇关于如何使用CSS模块调整站点上的水豚发现者？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！