# Bad -- fragile CSS selector
When I click the element "#btn-submit-form-1"

# Good -- accessible name
When I click the button "Submit"

# Debug: check what's on the page
Then I print visible text
Then I save a screenshot as "debug-state.png"
Then I log the current URL

Given I navigate to "/dashboard"
Then I wait for the page to load
Then I should see text "Dashboard"

Then the URL should contain "/expected-path"
Then I log the current URL

DEFAULT_ADMIN_USERNAME=admin@example.com
DEFAULT_ADMIN_PASSWORD=adminpass123
DEFAULT_USER_USERNAME=user@example.com
DEFAULT_USER_PASSWORD=userpass123
API_AUTH_LOGIN_PATH=/auth/login

{ "access_token": "eyJhbG..." }

# Wrong order -- userId not set yet
When I GET "/users/{userId}"
Then I store the value at "id" as "userId"

# Correct order
When I POST "/users" with JSON body: ...
Then I store the value at "id" as "userId"
When I GET "/users/{userId}"

# These are different variables
Then I store the value at "id" as "userId"
When I GET "/users/{UserId}"  # WRONG -- capital U
When I GET "/users/{userId}"  # Correct

# Correct
When I GET "/users/{userId}"
Given I set variable "email" to "test-{uuid}@example.com"

# Wrong
When I GET "/users/{ userId }"
When I GET "/users/$userId"

# Direct property
Then I store the value at "id" as "userId"

# Nested property
Then I store the value at "data.user.id" as "userId"

# Array index
Then I store the value at "items[0].id" as "firstItemId"

# Wrong -- @ui tag doesn't have API steps
@ui
Scenario: This won't work
  When I GET "/users"  # API step not available with @ui tag

# Correct
@api
Scenario: This works
  When I GET "/users"

import { registerApiSteps, registerUiSteps, registerSharedSteps } from '@esimplicity/stack-tests/steps';

registerApiSteps(test);    // Must be called for API steps
registerUiSteps(test);     // Must be called for UI steps
registerSharedSteps(test); // Must be called for shared/cleanup steps

npm run gen

npm run gen:stubs

# Must register cleanup explicitly
When I POST "/users" with JSON body: ...
Then I store the value at "id" as "userId"
Given I register cleanup DELETE "/users/{userId}"  # Required!

# Register child cleanup BEFORE parent
Given I register cleanup DELETE "/teams/{teamId}/members/{memberId}"  # Runs 1st
Given I register cleanup DELETE "/teams/{teamId}"                     # Runs 2nd

# Temporarily disable cleanup to inspect state
Given I disable cleanup

# Doc strings use triple quotes
When I POST "/users" with JSON body:
  """
  {
    "email": "test@example.com",
    "name": "Test User"
  }
  """

# Good -- variable produces a string
"email": "{email}"

# Potential issue -- if variable contains quotes
# Use variables that produce clean string values

# GitHub Actions
- name: Install Playwright Browsers
  run: npx playwright install --with-deps chromium

// playwright.config.ts
use: {
  headless: true,  // Ensure this for CI
}

# GitHub Actions
env:
  DEFAULT_ADMIN_USERNAME: ${{ secrets.ADMIN_USERNAME }}
  DEFAULT_ADMIN_PASSWORD: ${{ secrets.ADMIN_PASSWORD }}
  API_AUTH_LOGIN_PATH: /auth/login

// playwright.config.ts
timeout: process.env.CI ? 60000 : 30000,
expect: {
  timeout: process.env.CI ? 10000 : 5000,
},

- name: Generate and run tests
  run: |
    npm run gen
    npm test

# Verify installation
npm install -D @esimplicity/stack-tests

# Check it's in node_modules
ls node_modules/@esimplicity/stack-tests

npm install -D tui-tester

# macOS
brew install tmux

# Ubuntu/Debian
sudo apt-get install tmux

# Verify
tmux -V

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "types": ["node", "@playwright/test"]
  }
}

# Pause and open Playwright Inspector
When I pause for debugging

# Print current URL
Then I log the current URL

# Print all visible text on page
Then I print visible text

# Take a screenshot
Then I save a screenshot as "debug-{step-name}.png"