Declarative Design (The Art of Abstracting UI)

You've mastered the grammar of Gherkin — Given, When, Then, in the right order, one check per scenario. Now comes the module that separates a scenario that merely parses from one that actually survives.

Why This Module Matters

Here's the classic mistake, and almost every QA and BA makes it at least once: writing a scenario as a literal script of clicks. "Given the user opens the browser and navigates to /login." "When they click the blue button labeled Submit." It reads like a recorded macro, not a business rule — and it behaves like one too. The moment a designer moves that button, renames the field, or the team migrates the whole login page to a new framework, every scenario like this breaks, even though the actual business rule ("valid credentials log you in") never changed.

The fix is a discipline called declarative design: writing steps that describe what is true and what the user intends, never how they physically interact with a screen. A declarative scenario doesn't know or care whether the button is blue, square, or labeled "Submit" versus "Log In" — it only cares that valid credentials result in access.

What You'll Learn

• Why UI-click scripts are brittle, noisy, and useless as documentation for non-developers
• How to tell declarative ("what/why") steps apart from imperative ("how") steps
• How to name business states using domain vocabulary instead of technical or UI vocabulary
• Why a purely declarative scenario needs zero changes when the UI is redesigned — because it never referenced the UI in the first place

Your Practice Challenge

After the lessons, you'll take on Phrase It Right — an interactive challenge where you pick, from a dropdown for each of a login scenario's Given/When/Then steps, the declarative phrasing (business intent) instead of the imperative one (clicks and field names). Not every combination is a fully declarative scenario — try different combinations to find all 5 outcomes, including what happens when only one step still leaks UI details.