> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trynota.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Browser Config
> Configure browser state for Coverage and Browser agents, and customize Coverage-only Browser Prompts.
# 🧠Browser Config
Browser Config controls the browser state both agents rely on:
* **Coverage agent:** uses Browser Config plus the Coverage-only **Prompt formatting** settings described below.
* **Browser agent:** uses the same Browser Config (environment, locale, session state, highlighting).
The result: every run starts in the right environment with the right session, and Coverage runs hand off a prompt that matches your format.
***
## Config tab (Coverage + Browser agents)
Use the **Config** tab to set the shared browser defaults both agents consume.
* **Environment selector** — pick which environment this config belongs to (e.g., `todo dev`).
* **Browser Options**
* `Highlight Elements` toggles visual cues for the agent when you provide labeled selectors.
* `Headless Mode` (currently disabled) controls whether runs show a visible browser.
* **Browser Locale** — choose the language/region so copy and formatting stay consistent.
* **Session State uploads**
* `Cookies` — upload a JSON export of authenticated cookies.
* `Storage State` — upload JSON with the `origins` block (localStorage/sessionStorage).
* Save the page to lock in the config for this environment.
> ✨ **Result:** Both agents start with the right session, locale, and highlighted elements—no brittle logins or locale drift.
***
## Prompt formatting (Coverage only)
Coverage runs include a **Prompt formatting** tab to shape the Browser Prompt Coverage sends to the Browser agent after generating workflows.
**What `prompt_config` means:** it defines the exact sections and labels the end user sees in the Browser Prompt produced by the Coverage agent (for example: Description, Preconditions, Steps, Validation). Only customized values are saved; leaving a field blank keeps the Nota defaults.
* **Section Labels:** Rename headings like `description`, `preconditions`, `steps`, `expected_result` to match your team's voice. Default fields stay required, but you can add/remove custom ones.
* **Rules Block:** Set shared rules that will be appended to every Browser Prompt (e.g., accessibility notes, data handling, element naming guidance).
* **Reset to defaults:** Clears your overrides and returns to Nota defaults.
These settings never affect standalone Browser agent runs; they only apply when Coverage generates a prompt and hands it to the Browser agent.
***
## Capture cookies and storage with Playwright
Playwright can export both cookies and local storage in a single `storageState` file. Here’s a quick workflow to produce it:
```bash theme={null}
npx playwright codegen https://app.trynota.ai/login \
--save-storage=team-env-storage-state.json
```
During codegen:
1. Log in and reach the screen your workflow should begin on.
2. Close the codegen session—Playwright saves `team-env-storage-state.json` with cookies and localStorage embedded.
That export bundles cookies and storage together; duplicate it and trim one section out so you end up with separate files for each Nota upload slot.
Prefer scripting? Use Playwright to capture both files in one pass:
```ts theme={null}
// save-session-state.ts
import { chromium } from '@playwright/test';
import { promises as fs } from 'fs';
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://app.trynota.ai/login');
await page.fill('input[type="email"]', process.env.NOTA_EMAIL ?? '');
await page.fill('input[type="password"]', process.env.NOTA_PASSWORD ?? '');
await page.click('button:has-text("Log in")');
await page.waitForURL('**/dashboard');
const storageState = await context.storageState();
await fs.writeFile(
'team-env-storage-state.json',
JSON.stringify({ origins: storageState.origins }, null, 2),
'utf-8'
);
await fs.writeFile(
'team-env-cookies.json',
JSON.stringify(storageState.cookies, null, 2),
'utf-8'
);
await browser.close();
})();
```
Run it with:
```bash theme={null}
NOTA_EMAIL=qa@example.com NOTA_PASSWORD=secret npx ts-node save-session-state.ts
```
The script saves two files in your working directory: `team-env-storage-state.json` (storage state) and `team-env-cookies.json` (cookies). The storage file keeps only the `origins` block so it aligns with Nota's storage upload expectations. Keep both under source control alongside the environment they belong to.
If you start with a `--save-storage` export from codegen, duplicate it and remove either the `cookies` or `origins` section so each upload uses a dedicated file.
### Playwright JSON formats
Playwright expects the saved files to match the shapes it produces via `context.storageState()` and `context.cookies()`. The script above writes them in this form:
`cookies.json`
```json theme={null}
[
{
"name": "session_token",
"value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
"domain": ".trynota.ai",
"path": "/",
"expires": 1725148800,
"httpOnly": true,
"secure": true,
"sameSite": "Lax"
},
{
"name": "abTestGroup",
"value": "checkout_variant_b",
"domain": "app.trynota.ai",
"path": "/",
"expires": -1,
"httpOnly": false,
"secure": true,
"sameSite": "None"
}
]
```
`storage-state.json`
```json theme={null}
{
"origins": [
{
"origin": "https://app.trynota.ai",
"localStorage": [
{
"name": "nota:userPreferences",
"value": "{\"theme\":\"dark\",\"locale\":\"en-US\"}"
},
{
"name": "nota:featureFlags",
"value": "{\"workflowPreview\":true,\"aiHints\":true}"
}
],
"sessionStorage": [
{
"name": "nota:lastVisited",
"value": "\"/workflows/1234\""
}
]
}
]
}
```
* **Cookies upload:** Provide an array of cookie objects with the Playwright keys (`name`, `value`, `domain`, etc.). Generate it with `context.cookies()` if you prefer an automated export.
* **Storage upload:** Provide an object with an `origins` array. Each origin lists the URL plus the `localStorage` and optional `sessionStorage` entries to restore.
* **Multiple domains:** Add another object to either array for every domain you need to restore state for (`https://admin.trynota.ai`, `https://analytics.trynota.ai`, etc.).
***
## Upload to Nota
1. Open **Settings → Browser Config → Config**.
2. Select the environment this state belongs to.
3. Toggle **Highlight Elements** if you want on-screen hints for labeled selectors.
4. Set the **Browser Locale** you expect in runs.
5. Upload `team-env-storage-state.json` into **Storage State**.
6. Upload `team-env-cookies.json` into **Cookies**.
7. Add highlighted element mappings (selector + friendly name) for critical UI.
8. Save the config. Both Coverage and Browser agents now start with this state.
9. (Coverage only) Switch to **Prompt formatting** to adjust section labels/rules before Coverage hands prompts to the Browser agent.
***
## Use cases & benefits
* **Skip repetitive logins:** Start every workflow already authenticated inside the dashboard.
* **Protect gated features:** Preserve feature-flag states or onboarding checkpoints stored in localStorage.
* **Regional testing:** Lock the locale to evaluate translations, currency formats, or EU-specific flows.
* **Agent guidance:** Highlight critical selectors (`Add to cart`, `Submit order`) so the AI focuses on the right actions.
* **Parallel reliability:** Every run gets the same frozen session state, reducing flakiness from rate limits or session throttles.
***
## Keep It Fresh
* **Re-export after password or SSO changes** to avoid expired sessions.
* **Version your JSON files** alongside environment docs so teammates know which state is current.
* **Pair with Rotation Rules** if session tokens expire; regenerate the storage-state JSON after each rotation window.