Interaction Steps
Interaction steps are browser actions that navable performs before auditing a page. Use them to log in, dismiss cookie banners, navigate to a specific tab, or reach any page state that isn't accessible by simply loading a URL.
Why Interaction Steps?
Many pages can't be audited by just loading their URL. They may require:
- Authentication — Logging in before accessing protected content.
- Cookie consent — Dismissing a consent dialog that overlays the page.
- Navigation — Clicking through menus, tabs, or modals to reach the right content.
Interaction steps tell navable exactly how to prepare each page before running the accessibility scan.
Setting Up Steps for a URL
- In the Accessibility Overview, find the URL in the URL table.
- Click Set up in the Interaction steps column.
- Choose one of the three methods below to define your steps.
Once configured, the button changes to show X/Y Profiles — indicating how many of your browser profiles have steps configured (e.g., "2/2 Profiles" means both Desktop and Mobile profiles have steps).
Three Ways to Create Steps
The step configuration panel has three tabs:
Steps Editor
Write interaction steps by hand using the form editor. Add steps one by one, choose the action type, provide a CSS selector and value, and reorder them via drag-and-drop. You can also switch to a JSON view to edit the raw step definitions directly. Steps must be tested before they can be saved.
The available step types are:
| Step Type | Description | Example |
|---|---|---|
| Navigate | Go to a URL | Navigate to the login page |
| Click | Click an element | Click the "Sign In" button |
| Fill | Enter text into a field | Type a username into the email input |
| Select | Choose a dropdown option | Select "Admin" from the role dropdown |
| Press | Press a keyboard key | Press Enter to submit a form |
| Wait for Selector | Wait for an element to appear | Wait for the dashboard to load |
Steps can reference secrets stored in Audit Settings to fill in login credentials without exposing them in the step configuration.
Recorder
Paste a Playwright script to convert it into steps. Use
Playwright Codegen
(npx playwright codegen) or the VS Code Playwright extension to record your
browser interactions, then copy the generated script and paste it into the
recorder tab. Click Convert to parse the script into steps, then Adopt to
Steps Editor to review, test, and save them.
AI Assistant
Describe your goal in natural language (e.g., "Accept cookie banner and log in") and let the AI agent discover the steps automatically. You can optionally select saved secrets for authenticated flows (e.g., login credentials). The AI agent tests each step during discovery, so the returned steps are already verified. Once the AI returns results with screenshots, click Adopt interaction steps to move them into the Steps Editor for saving. See AI Step Discovery for more details.
Global Interaction Steps
For actions that should run before every URL (e.g., dismissing a cookie banner that appears on all pages):
- Click Global Interaction Steps above the URL table.
- Define the shared steps.
- Enable the Global first toggle on individual URLs to run global steps before URL-specific steps.
The Global first toggle in the URL table controls the execution order: when enabled, global steps run first, then the URL's own steps.
Browser Profiles
Each URL can have different interaction steps per browser profile (Desktop, Mobile, etc.). When you click Set up or the profiles indicator, you can configure steps for each active browser profile separately. Configure browser profiles in Settings → Audit Settings. See Settings.