Posted almost 7 years ago. Visible to the public. Repeats.

An auto-mapper for ARIA labels and BEM classes in Cucumber selectors

Spreewald Archive comes with a selector_for helper that matches an English term like the user's profile into a CSS selector. This is useful for steps that refer to a particular section of the page, like the following:

Then I should see "Bruce" within the user's profile ^^^^^^^^^^^^^^^^^^

If you're too lazy to manually translate English to a CSS selector by adding a line to features/env/selectors.rb, we already have an auto-mapper to translate English into BEM classes.

This card expands on the idea by also allowing to refer to an element by its aria-label Archive attribute. aria-label is usually employed to assist users with disabilities. It is also very practical to label things for integration tests.

With the auto-mapper below you can write this:

Then I should see "Bruce" within the user's profile

... and it will match either this:

<div aria-label="user's profile"> Bruce Wayne </div>

... or this:

<div class="user--profile"> Bruce Wayne </div>


Save this to features/support/selectors.rb, or update your file:

module HtmlSelectorsHelpers def selector_for(locator) case locator # Auto-mapper for BEM classes and ARIA labels # # Usage examples: # the main menu -> '.main-menu, [aria-label="main menu"]' # the item box's header -> '.item-box--header, [aria-label="item box's header"]' # the slider's item that is current -> ', [aria-label="slider's item that is current"]' when /^the (.*)$/ match = $1 match =~ /^(.+?)(?:'s (.+?))?(?: that (.+))?$/ bem_selector = '.' bem_selector << selectorify($1) bem_selector << '--' << selectorify($2) if $2 bem_selector << '.' << selectorify($3) if $3 bem_selector aria_selector = '[aria-label="' aria_selector << match.gsub('"', '\\"') aria_selector << '"]' [bem_selector, aria_selector].join(', ') when /^"(.+)"$/ $1 else raise "Can't find mapping from \"#{locator}\" to a selector.\n" + "Now, go and add a mapping in #{__FILE__}" end end private def selectorify(string) string.gsub(/ /, '-') end end World(HtmlSelectorsHelpers)

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for unsupported versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2).

Owner of this card:

Henning Koch
Last edit:
almost 7 years ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more