Attaches DamageBDD to a real browser session.

This step:

• Starts (or connects to) the browser
• Prepares it for interaction
• Must appear before any browser action

Given I attach CDP

Use this once per scenario.

Opens a web page and waits until it finishes loading.

When I open "https://example.com"

This behaves like:

• Typing the address into the browser
• Pressing Enter
• Waiting until the page is ready

Waits until a specific element appears on the page.

And I wait for "#login-button"

Use this:

• After opening a page
• After clicking a button
• Before typing into a field

Waits until visible text appears anywhere on the page.

And I wait until the page contains "Welcome back"

This prevents timing-related failures.

Clicks an element using its identifier.

And I click "#submit"

Use this when you know the element identifier.

Types text into a form field.

And I type "alice@example.com" into "#email"

This behaves like real typing.

Presses the Enter key on the currently focused element.

And I press Enter

Useful for:

• Login forms
• Search boxes

Checks that the given text is visible on the page.

Then the page should contain "Dashboard"

This verifies what the user actually sees.

Reads visible text from the page and stores it for later use.

And I save text of "#order-id" as "OrderId"

You can later use this value in other checks.

Simulates a screen of the given size.

Given I set viewport to 390 x 844

This is useful for:

• Mobile testing
• Tablet testing
• Responsive layout checks

Like the previous step, but with explicit scaling.

Given I set viewport to 1440 x 900 scale 1

Ensures two elements are visually the same size.

Then the element "#logo-header" should be the same size as "#logo-footer"

Allows a small tolerance.

Then the element "#card1" should be the same size as "#card2" within 2 px

Checks that text is centered according to styling rules.

Then the text of element "#title" should be center aligned

Checks what the human eye perceives as centered.

Then the text of element "#title" should be visually centered within 2 px

Checks horizontal alignment.

Then the elements "#price" and "#buy-button" should be horizontally aligned at center

Checks vertical alignment.

Then the elements "#icon" and "#label" should be vertically aligned at center

Ensures the page does not scroll sideways.

Then the page should have no horizontal overflow

Allows a small tolerance.

Then the page should have no horizontal overflow within 1 px

Ensures an element stays on screen.

Then the element "#menu" should be within the viewport horizontally

Asserts that no JavaScript runtime errors or uncaught exceptions occurred on the page.

This step fails if:

• Any `Runtime.exceptionThrown` event is observed
• Any console message with level `error` is emitted

This guarantees that the page executed cleanly at the JavaScript runtime level, not merely that it rendered successfully.

Asserts that a console log message containing the given text was emitted.

This step is useful for:

• Verifying application lifecycle milestones
• Confirming feature flags or execution paths
• Ensuring client-side initialization completed

The match is a substring match against the console message text.

Asserts that the browser console contains no messages with level `error`.

This step is stricter than DOM-based checks and will fail the feature if any JavaScript errors, failed imports, or runtime violations are logged.

• Console logs are captured directly from the browser runtime via CDP
• No DOM inspection or JavaScript injection is used
• Logs are accumulated across the scenario execution
• Errors cannot be hidden by try/catch or silent failures

This makes console verification suitable for:

• Continuous integration
• Economic verification (paid test execution)
• Frontend regression detection
• Trust-minimized browser validation