O Pick

A Chrome extension that helps AI understand your web pages during E2E test authoring. It lets you visually select elements on a page, add short human-readable labels, and export structured element context that can be pasted into ChatGPT, Claude, Cursor, GitHub Copilot, or other AI coding tools.

O Pick is useful when writing tests with frameworks such as Playwright, Cypress, Selenium, or other browser automation tools, works find with raw HTML, React, Vue, Angular, Svelte, or any other frontend stack.

The Problem

When writing E2E tests with AI assistance, complex pages can confuse the AI — dense DOM trees, generic class names, and deeply nested components make it hard for the model to identify the right elements. You end up pasting wall-of-HTML context that still misses what matters.

What O Pick Does

O Pick lets you point at the elements you care about, add a short label to each one, and export the full set of annotated element descriptors as a structured snippet ready to paste into your AI prompt.

The AI now knows exactly which elements you mean — no guessing, no overlong context.

Workflow

1. Open the page you want to test.
2. Click the O Pick toolbar icon to start annotate.
3. Add a short comment describing the element's role (e.g. "Submit button", "Error banner"), or what you want AI to do with it.
4. Repeat for every element you need the AI to understand.
5. Click Pause on the toolbar, so you can perform some click action, click toolbar icon to continue.
6. Hit Copy in the tool bar, the structured annotation block is now in your clipboard.
7. Paste it into your AI prompt and write the test.
8. You can also review the collected content by clicking Preview

Installation (Developer Mode)

1. Clone this repository.
2. Open Chrome and navigate to chrome://extensions.
3. Enable Developer mode (toggle in the top-right corner).
4. Click Load unpacked and select the extension/ folder inside this repo.
5. The O Pick icon will appear in your toolbar.