This step registers multiple named CSS selectors in a single data table, making it the preferred way to set up a scenario's full selector vocabulary in one place. Each row of the table must have exactly two columns: the first is the human-readable name and the second is the CSS selector string. Rows with an empty name or empty selector are silently skipped.
Selectors registered here are added to the same CSS registry as those registered one-at-a-time with When I add ... css selector. Registrations from Given I define css selectors: override any earlier entries with the same name, including those pre-loaded from worldParameters.selectors.css or from JSON files. You can call this step multiple times in one scenario to add more names or override specific entries without redefining the rest.
Accepted phrasings
Given I define css selectors:
| name | css-selector |
Given we define css selectors:
| name | css-selector |
When I define css selectors:
| name | css-selector |
And I define css selectors:
| name | css-selector |
Given define css selectors:
| name | css-selector |
Examples
Given I define css selectors:
| header | header.site-header |
| nav | nav.primary-nav |
| content | .main-content |
| footer | footer.site-footer |
Given I define css selectors:
| logo | .site-logo |
| search | #search-input |
Given we define css selectors:
| modal | .modal-dialog |
| overlay | .modal-backdrop |
Given I define css selectors:
| left | .col-left |
| center | .col-center |
| right | .col-right |
In a real scenario
Scenario: Homepage layout renders in the correct vertical order
Given I navigate to "https://example.org/"
And I am viewing the site on a xl screen
And I define css selectors:
| header | header.site-header |
| nav | nav.primary-nav |
| hero | .hero-banner |
| content | .main-content |
| footer | footer.site-footer |
Then I see visible header, nav, hero, content, footer
And I see header above nav
And I see nav above hero
And I see hero above content
And I see content above footer