Chrome Extension Installation & Setup

Test Garden integrates into your web application using a zero-code Chrome Extension. This is the only setup required to record and play back test flows in the dashboard, ensuring absolutely zero overhead or code alterations for your production website.

1. Installing the Extension (Developer Mode)

During the beta phase, you can load the Chrome Extension locally in developer mode:

1. Download the Extension Folder: Locate the /extension directory in the Test Garden workspace.
2. Open Extensions Manager: In Google Chrome, navigate to chrome://extensions/.
3. Enable Developer Mode: In the top-right corner of the Extensions page, toggle the "Developer mode" switch to ON.
4. Load Unpacked: Click the "Load unpacked" button in the top-left corner.
5. Select Directory: Select the /extension folder from your local workspace.
6. The Test Garden Helper extension is now active!

2. Supported Environments & Capabilities

Depending on the backend technology used in the website domain under test, you will unlock different capabilities:

If your app uses Supabase

Test Garden provides a native, premium integration with Supabase Auth:

• 1-Click Auto-Auth Bypass: Dynamically injects authenticated user sessions directly into your local storage and browser cookies, allowing you to test protected dashboard routes instantly without going through a login form.
• Full E2E Testing: Record visual actions, verify DOM states, and run multi-user flow checks.

If your app uses other Auth Providers

Test Garden is fully compatible with standard Web APIs and HTML5 DOM, so it supports other tech stacks (e.g. NextAuth, Clerk, Firebase, or custom databases) for E2E tests:

• E2E Visual Testing: Record clicks, keystrokes, scroll actions, and run visual assertions.
• Manual Login flows: To test protected paths, you can record a manual login flow (typing credentials into the login page) as part of your test steps. Note: Automatic one-click auth bypass is currently only supported for Supabase.

3. Content Security Policy (CSP) Configuration

Since Test Garden runs and records your application inside a viewport <iframe> in the dashboard, your server headers must allow frame embedding from the Test Garden dashboard origin.

If your website implements a Content Security Policy (CSP) header, make sure to add the following directive:

frame-ancestors (Embedding Permission)

Allows the Test Garden Dashboard to render your site in the iframe:

Content-Security-Policy: frame-ancestors 'self' https://doxupymfgyahmarztyqu.supabase.co http://localhost:3000;

Testing on Vercel Preview vs Production Deployments

If you host your application on Vercel, the production environment might enforce strict, pre-configured headers (such as X-Frame-Options: SAMEORIGIN or restrictive CSP headers) that prevent iframe embedding and block script injection from the helper extension.

To avoid modifying your production security headers, we strongly recommend:

• Testing on Vercel Preview Branches: Always register and test your Vercel Preview branch domains (e.g. https://my-app-git-branch-team.vercel.app) in the Test Garden dashboard instead of the main production domain.
• Open Security Config: Vercel preview environments do not enforce production security rules, allowing the Test Garden Chrome Extension to load and inject scripts correctly.

4. How the Extension Works

Once installed, the extension runs in the background and coordinates with the Test Garden dashboard:

• Automatic Injection: When it detects that a website loaded inside the iframe is registered in your Test Garden workspace, it injects the recording helper (recorder.js) directly into the iframe's DOM.
• Authentication Bypass (Supabase only): It securely reads the auth role configured for the active test and performs programmatic login using your target website's Supabase credentials.
• Element Selection: It handles element selection highlight overlays during "Inspect Mode" for visual assertion recording.