Posted over 2 years ago. Visible to the public. Repeats.

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

Spreewald 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 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)

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Author of this card:

Henning Koch
Last edit:
over 2 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