Spreewald
Show archive.org snapshot
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
Show archive.org snapshot
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>
Code
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 -> '.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)
