Posted about 3 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:

Copy
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:

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

… and it will match either this:

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

… or this:

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

Code

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

Copy
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 -> '.slider--item.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)

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Avatar
Henning Koch
Last edit:
about 3 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 cookies to improve usability and analyze traffic.
Accept or learn more