This step registers a named CSS selector in the current scenario's selector registry at runtime. The first argument is a human-readable name you will use in other steps; the second argument is any valid CSS selector string. Once registered, the name can be passed to position, visibility, focus, or click steps without repeating the raw CSS.
Registration is per-scenario: the registry is reset before every scenario and pre-populated from worldParameters.selectors.css and any JSON files listed in worldParameters.selectors.files. Inline When I add calls override pre-loaded entries of the same name - the last registration wins. The CSS registry takes priority over the XPath registry when both contain the same name.
Accepted phrasings
When I add "NAME" selector for "CSS" css selector
When we add "NAME" selector for "CSS" css selector
And I add "NAME" selector for "CSS" css selector
And we add "NAME" selector for "CSS" css selector
Examples
When I add "mobile logo" selector for "header img#logo" css selector
When I add "breadcrumb" selector for ".breadcrumb" css selector
When I add "cta button" selector for ".cta .btn-primary" css selector
When I add "search field" selector for "input[type='search']" css selector
When I add "main nav" selector for "nav[role='navigation']" css selector
In a real scenario
Scenario: Page header elements are visible at desktop size
Given I am viewing the site on a xl screen
When I add "page header" selector for "header.site-header" css selector
And I add "logo" selector for "header.site-header .logo" css selector
And I add "primary nav" selector for "nav[role='navigation']" css selector
Then I see visible page header, logo, primary nav
And I see logo to the left of primary nav
And I see logo inside of page header