Clicks one or more named components. Each name is resolved through the per-scenario selector registries (CSS first, then XPath), so it must be registered beforehand with Given I define css selectors:, a single When I add ... css selector or XPath registration step, or a loaded selector JSON file. The click uses the browser driver's native click, which auto-scrolls the element into view and waits for it to be actionable before clicking.
The words on or a may follow click, so I click on logo and I click logo are equivalent. Multiple names separated by commas or and are clicked in order, which is handy for stepping through tabs or a short sequence of controls; if any click fails, all failures are collected and reported together. When several elements match the underlying selector, only the first match is clicked.
Accepted phrasings
When I click <name>
When I click on <name>
When I click a <name>
When we click <name>
When click <name>
When I click <name>, <name> and <name>Examples
When I click search button
When I click on logo
When click back button
When I click hero, ctaIn a real scenario
Scenario: Switch between two tabs by clicking named components
Given I define css selectors:
| tab 1 | [data-tab='1'] |
| tab 2 | [data-tab='2'] |
| tab panel | .tab-panel.active |
Given I am an anonymous user
When I go to the homepage
And I click tab 1
Then I see visible tab panel
When I click tab 2
Then I see visible tab panel