Register a named CSS selector at runtime.
When (I |we )*add "([^"]*)" selector for "([^"]*)" css selector
Example #1: When I add "mobile logo" selector for "header img#logo" css selector
Example #2: When I add "breadcrumb" selector for ".breadcrumb" css selector
Example #3: When I add "breadcrumb first link" selector for ".breadcrumb li:nth-child(1) a" css selector
Example #4: When I add "cta button" selector for ".cta .btn-primary" css selector
Example #5: When I add "page header" selector for "header.page-header" css selector
Example #6: When I add "main nav" selector for "nav[role='navigation']" css selector
Example #7: When I add "hero image" selector for ".hero img" css selector
Example #8: When I add "footer links" selector for "footer a" css selector
Example #9: When I add "search field" selector for "input[type='search']" css selector
Example #10: When I add "submit button" selector for "button[type='submit']" css selector
Advanced:
Example #11: Later override same name → latest wins:
When I add "target" selector for "h1" css selector
And I add "target" selector for "ul" css selector
Example #12: Component (CSS) takes precedence over CSS registry with same name:
When I add "shared" selector for "ul" css selector
And I define css selectors:
| shared | h1 |
Example #13: Combine with XPath registration and use together:
When I add "cta" selector for ".cta" css selector
And I add "cta link" selector for "//a[contains(@class,'cta')]" xpath selector