​

🧭 Browser Config

​

Meet the Browser Configuration UI

• Environment selector — decide which environment the config belongs to.
• Browser Options
  • Highlight Elements toggles onscreen guidance for the Nota agent (useful when you supply selector labels).
  • Headless Mode (when enabled) determines whether automated runs show the browser window.
• Browser Locale — pick the language/region (en-US, fr-FR, etc.) so workflows render the right copy.
• Session State uploads
  • Cookies — drop a JSON export containing authenticated cookies.
  • Storage State — upload a JSON file with localStorage/sessionStorage values.
• Finish with Save Configuration to persist the setup.

✨ Result: Workflows jump directly into the right state—no brittle “login” steps or inconsistent locale settings.

​

Capture Cookies and Storage with Playwright

npx playwright codegen https://app.trynota.ai/login \
  --save-storage=team-env-storage-state.json

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.

// 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();
})();

NOTA_EMAIL=[email protected] NOTA_PASSWORD=secret npx ts-node save-session-state.ts

​

Playwright JSON formats

[
  {
    "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"
  }
]

{
  "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.). You can 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.
2. Select the environment that should receive the session state.
3. Toggle Highlight Elements if you plan to supply labeled selectors.
4. Choose the Browser Locale that matches how you expect the UI to render.
5. Upload team-env-storage-state.json (or your storage-state file) into Storage State.
6. Upload team-env-cookies.json (or your cookies file) into Cookies.
7. Add highlighted element mappings (selector + friendly name) so the Nota agent can prioritize important UI.
8. Click Save Configuration.

​

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.