[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_164":165,"_166":167},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_88":-7,"_89":90,"_29":-7,"_91":-5,"_15":92,"_93":94,"_95":96,"_97":98,"_99":100,"_101":-5,"_102":-5,"_103":-5,"_104":38,"_105":106,"_107":108,"_109":-5,"_110":-5,"_111":112},"routes/_app.x.$handle.$name.branches",{"_11":12,"_13":14,"_15":16,"_17":18},"handle","khawjaahmad","name","playwright-selector-gen","project",{"_20":28,"_13":14,"_22":36,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":38,"_49":-5,"_50":-5,"_51":52,"_53":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60,"_61":60,"_62":63,"_64":63,"_65":63,"_66":60,"_67":60,"_68":69,"_70":71,"_72":73,"_74":38},"branches",[19],{"_20":21,"_22":23,"_24":25,"_13":26,"_27":28,"_29":30,"_31":-5,"_32":-5,"_33":34,"_35":-5},"id","c833c980-2097-11f1-a6cd-42dde27851f2","createdAt",["D",1773597169607],"updatedAt",["D",1773608213762],"main","projectId","c832f4ec-2097-11f1-a6cd-42dde27851f2","version",16,"forkedBranchId","forkedBranchVersion","lockfileKey","1773608969729-esm.town_v_khawjaahmad_playwright-selector-gen@16-main","deletedAt",["D",1773597169607],"legacyEnvVars",false,"privacy","public","httpPrivacy","description","MCP: Fetch URL DOM and generate unique Playwright selectors","imageUrl","userId","f404441a-b070-431b-b152-17a2208cfa70","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","018b67b5-3681-41ae-8e5a-cdcf7cd1218d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_87":83},"org",{"_11":12,"_80":81,"_82":83,"_45":46,"_84":85,"_86":38},"branch",{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_75":-5,"_76":-5,"_77":-5,"_78":14,"_79":12},"isOwned","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","ahmad","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4ec015ce-90e5-4eef-7eaf-21e3da8cec00/square512?exp=1789559999&sig=3ddbc7973d184d4fea109451c106c20ce477a57d5e25587dc255e5052d0587ed","tier","free","canRestrictVals","profileImageUrl","branchName","path","","adoptOrgId",{"_20":28,"_13":14,"_22":160,"_35":-5,"_37":38,"_39":40,"_41":40,"_42":43,"_44":-5,"_45":46,"_47":-5,"_48":38,"_49":-5,"_50":-5,"_51":52,"_53":54,"_55":-5,"_56":-5,"_57":-5,"_58":-5,"_59":60,"_61":60,"_62":63,"_64":63,"_65":63,"_66":60,"_67":60,"_68":161,"_70":162,"_72":163,"_74":38},"tree",[151,152],"files",[151,152],"counts",{"_141":52,"_17":142,"_143":52,"_144":145,"_146":147},"contents",[113,114],"file","upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_20":134,"_13":135,"_117":136,"_119":-5,"_120":21,"_121":30,"_123":108,"_22":137,"_29":138,"_126":101,"_128":139,"_130":38,"_131":-5,"_89":140},{"_20":115,"_13":116,"_117":118,"_119":-5,"_120":21,"_121":122,"_123":108,"_22":124,"_29":125,"_126":127,"_128":129,"_130":38,"_131":132,"_89":133},"6eadfc22-20b1-11f1-bd80-42dde27851f2","main.ts","fileId","c8376fea-2097-11f1-a6cd-42dde27851f2","parentId","branchId","branchVersion",15,"latest",["D",1773608186325],7,"fileType","http","content","import { load } from \"npm:cheerio\";\nimport puppeteer from \"npm:puppeteer-core\";\n\n// ─── DOM extraction (raw context only, no selector logic) ────────────\n\nconst INTERESTING_TAGS = new Set([\n \"a\", \"button\", \"input\", \"select\", \"textarea\", \"form\", \"label\",\n \"details\", \"summary\", \"dialog\", \"nav\", \"header\", \"footer\", \"main\",\n \"aside\", \"section\", \"article\", \"img\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\",\n \"h6\", \"table\", \"th\", \"td\", \"tr\", \"ul\", \"ol\", \"li\", \"iframe\",\n \"video\", \"audio\", \"svg\",\n]);\n\nconst ATTR_NAMES = [\n \"id\", \"name\", \"class\", \"type\", \"role\", \"aria-label\", \"aria-labelledby\",\n \"aria-describedby\", \"aria-expanded\", \"aria-checked\", \"aria-selected\",\n \"aria-haspopup\", \"placeholder\", \"alt\", \"title\", \"href\", \"src\", \"for\",\n \"data-testid\", \"data-test-id\", \"data-test\", \"data-cy\", \"data-qa\", \"value\",\n \"tabindex\", \"contenteditable\", \"action\", \"method\",\n];\n\ninterface RawElement {\n index: number;\n tag: string;\n outerSnippet: string;\n attributes: Record;\n textContent: string;\n}\n\nfunction extractDOM(html: string): RawElement[] {\n const $ = load(html);\n const elements: RawElement[] = [];\n let idx = 0;\n\n $(\"*\").each((_i, el) => {\n if (el.type !== \"tag\") return;\n const tag = el.tagName.toLowerCase();\n\n const isInteresting =\n INTERESTING_TAGS.has(tag) ||\n $(el).attr(\"role\") !== undefined ||\n $(el).attr(\"data-testid\") !== undefined ||\n $(el).attr(\"data-test-id\") !== undefined ||\n $(el).attr(\"data-test\") !== undefined ||\n $(el).attr(\"data-cy\") !== undefined ||\n $(el).attr(\"aria-label\") !== undefined ||\n $(el).attr(\"tabindex\") !== undefined ||\n $(el).attr(\"contenteditable\") !== undefined;\n\n if (!isInteresting) return;\n\n const attrs: Record = {};\n for (const n of ATTR_NAMES) {\n const v = $(el).attr(n);\n if (v !== undefined && v !== \"\") attrs[n] = v;\n }\n\n let outer = $.html(el) || \"\";\n if (outer.length > 400) outer = outer.slice(0, 400) + \"…\";\n\n const text = $(el).text().trim();\n\n elements.push({\n index: idx++,\n tag,\n outerSnippet: outer,\n attributes: attrs,\n textContent: text.length > 100 ? text.slice(0, 100) + \"…\" : text,\n });\n });\n\n return elements.slice(0, 300);\n}\n\n// ─── HTML fetching via Lightpanda ────────────────────────────────────\n\nasync function fetchHTML(targetUrl: string): Promise {\n const lpdToken = Deno.env.get(\"LPD_TOKEN\") || \"\";\n const lpdRegion = Deno.env.get(\"LPD_REGION\") || \"euwest\";\n\n if (!lpdToken) {\n throw new Error(\"LPD_TOKEN env var not set. Get one at https://console.lightpanda..io/signup\");\n }\n\n const wsEndpoint = `wss://${lpdRegion}.cloud.lightpanda.io/ws?token=${lpdToken}`;\n\n const browser = await puppeteer.connect({ browserWSEndpoint: wsEndpoint });\n try {\n const context = await browser.createBrowserContext();\n const page = await context.newPage();\n\n await page.goto(targetUrl, { waitUntil: \"networkidle2\", timeout: 15000 });\n const html = await page.content();\n\n await page.close();\n await context.close();\n\n return html;\n } finally {\n await browser.disconnect();\n }\n}\n\n// ─── AI call ─────────────────────────────────────────────────────────\n\nconst SYSTEM_PROMPT = `You are a Playwright test automation expert. You receive raw DOM elements extracted from a web page. Your ONLY job is to produce the best Playwright TypeScript locators for each element.\n\nPLAYWRIGHT LOCATOR PRIORITY (from official Playwright docs — follow strictly):\n1. getByRole() — ARIA role + accessible name. ALWAYS try first.\n2. getByLabel() — Form fields with an associated .\n3. getByPlaceholder() — Inputs with placeholder text.\n4. getByText() — Visible text content. Prefer exact:true.\n5. getByAltText() — Images with alt attribute.\n6. getByTitle() — Elements with title attribute.\n7. getByTestId() — data-testid / data-test / data-cy attributes.\n8. page.locator(css) — SHORT CSS only (#id, [data-test], 1-2 levels max). LAST RESORT.\n9. page.locator(xpath) — ABSOLUTE LAST RESORT for truly complex DOM traversal.\n\nRULES:\n- Return ONLY a valid JSON array. No markdown fences, no commentary, no explanation.\n- For EACH element, return an object with:\n { \"index\": , \"tag\": \"\", \"locators\": [ { \"method\": \"\", \"playwrightCode\": \"\", \"confidence\": \"high\"|\"medium\"|\"low\" } ] }\n- Provide exactly 3 locators per element, ranked best to fallback.\n- NEVER generate deep nested CSS like \"html > body > div > div > ...\". These are garbage.\n- NEVER generate nth-child/nth-of-type chains longer than 1 level.\n- playwrightCode must be valid, copy-paste-ready Playwright TypeScript.\n- If an element genuinely only supports 1-2 good locators, return only those (don't pad with garbage).\n- For getByRole, ALWAYS include { name: \"...\" } when accessible name exists.\n- Think carefully about uniqueness. If visible text appears multiple times, prefer a more specific method.`;\n\nasync function callAI(\n elements: RawElement[],\n apiKey: string,\n apiUrl: string,\n model: string,\n): Promise {\n const batchSize = 30;\n const allResults: any[] = [];\n\n for (let i = 0; i < elements.length; i += batchSize) {\n const batch = elements.slice(i, i + batchSize);\n\n const res = await fetch(apiUrl, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model,\n max_tokens: 4096,\n system: SYSTEM_PROMPT,\n messages: [{\n role: \"user\",\n content: `Generate Playwright locators for these DOM elements:\\n\\n${JSON.stringify(batch, null, 2)}`,\n }],\n }),\n });\n\n if (!res.ok) {\n const errText = await res.text();\n throw new Error(`AI API ${res.status}: ${errText}`);\n }\n\n const data = await res.json();\n const text = data.content\n ?.filter((c: any) => c.type === \"text\")\n .map((c: any) => c.text)\n .join(\"\") || \"\";\n\n const cleaned = text.replace(/```json\\s*/g, \"\").replace(/```\\s*/g, \"\").trim();\n const parsed = JSON.parse(cleaned);\n allResults.push(...(Array.isArray(parsed) ? parsed : [parsed]));\n }\n\n return allResults;\n}\n\n// ─── HTTP handler ────────────────────────────────────────────────────\n\nexport default async function handler(req: Request): Promise {\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, X-Api-Key\",\n },\n });\n }\n\n const cors = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n };\n\n if (req.method === \"GET\") {\n return new Response(\n JSON.stringify({ status: \"ok\", service: \"playwright-selector-gen\" }),\n { status: 200, headers: cors },\n );\n }\n\n if (req.method !== \"POST\") {\n return new Response(\n JSON.stringify({ error: \"Method not allowed\" }),\n { status: 405, headers: cors },\n );\n }\n\n // Auth\n const expectedKey = Deno.env.get(\"X_API_KEY\");\n const providedKey = req.headers.get(\"X-Api-Key\") || req.headers.get(\"x-api-key\");\n\n if (!expectedKey || providedKey !== expectedKey) {\n return new Response(\n JSON.stringify({ error: \"Unauthorized\" }),\n { status: 401, headers: cors },\n );\n }\n\n try {\n const body = await req.json();\n const targetUrl: string = body.url;\n const tagFilter: string[] | undefined = body.filter;\n\n if (!targetUrl) {\n return new Response(\n JSON.stringify({ error: \"Missing 'url' in request body\" }),\n { status: 400, headers: cors },\n );\n }\n\n // AI config\n const aiKey = Deno.env.get(\"ANTHROPIC_API_KEY\") || \"\";\n const aiUrl = Deno.env.get(\"ANTHROPIC_URL\") || \"https://api.z.ai/api/anthropic/v1/messages\";\n const aiModel = Deno.env.get(\"ANTHROPIC_MODEL\") || \"anthropic/claude-sonnet-4-20250514\";\n\n if (!aiKey) {\n return new Response(\n JSON.stringify({ error: \"ANTHROPIC_API_KEY env var not set\" }),\n { status: 500, headers: cors },\n );\n }\n\n // Fetch rendered HTML via Lightpanda\n let html: string;\n try {\n html = await fetchHTML(targetUrl);\n } catch (fetchErr: any) {\n return new Response(\n JSON.stringify({ error: `Failed to fetch URL: ${fetchErr.message}` }),\n { status: 502, headers: cors },\n );\n }\n\n // Extract DOM\n let rawElements = extractDOM(html);\n\n if (tagFilter && tagFilter.length > 0) {\n const filterSet = new Set(tagFilter.map((t) => t.toLowerCase()));\n rawElements = rawElements.filter((e) => filterSet.has(e.tag));\n }\n\n if (rawElements.length === 0) {\n return new Response(\n JSON.stringify({\n error: \"No interactive elements found in the DOM\",\n htmlLength: html.length,\n hint: \"Lightpanda rendered the page but found no matching elements. The page may require authentication or the URL may be incorrect.\",\n url: targetUrl,\n }),\n { status: 422, headers: cors },\n );\n }\n\n // AI generates all locators\n const elements = await callAI(rawElements, aiKey, aiUrl, aiModel);\n\n return new Response(\n JSON.stringify({\n url: targetUrl,\n totalElements: rawElements.length,\n elements,\n }, null, 2),\n { status: 200, headers: cors },\n );\n } catch (err: any) {\n return new Response(\n JSON.stringify({ error: err.message || \"Internal error\" }),\n { status: 500, headers: cors },\n );\n }\n}\n","deleted","label","playwright",[116],"7f0a8f86-20b1-11f1-bd80-42dde27851f2","README.md","cd60ff56-209a-11f1-9ae1-42dde27851f2",["D",1773608213762],5,"# Playwright Selector Generator\n\n**Endpoint:** `https://playwright.val.run`\n\nAI-powered service that fetches any URL's rendered DOM via [Lightpanda](https://lightpanda.io) headless browser and generates Playwright-native locators. The AI model does **all** selector generation — zero algorithmic logic in the code.\n\n---\n\n## Authentication\n\nEvery POST request requires the `X-Api-Key` header.\n\n```bash\ncurl -X POST https://playwright.val.run \\\n -H \"Content-Type: application/json\" \\\n -H \"X-Api-Key: your_endpoint_key\" \\\n -d '{\"url\": \"https://www.saucedemo.com\"}'\n```\n\n---\n\n## Environment Variables\n\n| Env Var | Required | Purpose |\n|----------------------|----------|------------------------------------------------|\n| `X_API_KEY` | Yes | Protects the endpoint |\n| `ANTHROPIC_API_KEY` | Yes | Z.AI / Anthropic API key for the model |\n| `ANTHROPIC_URL` | No | API endpoint (default: `https://api.z.ai/api/anthropic/v1/messages`) |\n| `ANTHROPIC_MODEL` | No | Model identifier (default: `anthropic/claude-sonnet-4-20250514`) |\n| `LPD_TOKEN` | Yes | Lightpanda cloud token ([sign up](https://console.lightpanda.io/signup)) |\n| `LPD_REGION` | No | Lightpanda region: `euwest` (default) or `uswest` |\n\n---\n\n## How It Works\n\nEvery request goes through Lightpanda's headless browser. No raw `fetch()`, no fallbacks.\n\n```\nPOST { url } + X-Api-Key\n │\n ▼\n┌─ Lightpanda Cloud ────────────┐\n│ puppeteer.connect() via CDP │\n│ WebSocket to Lightpanda │\n│ Full JS rendering │\n│ networkidle2 wait │\n│ page.content() → HTML │\n└──────────┬────────────────────┘\n │\n ▼\n┌─ Parse DOM (cheerio) ─────────┐\n│ Extract raw elements: │\n│ tag, attributes, outerHTML, │\n│ text content │\n│ │\n│ 0 elements? → 422 error │\n└──────────┬────────────────────┘\n │\n ▼\n┌─ AI Model (Z.AI) ────────────┐\n│ Receives raw DOM data. │\n│ Generates ALL locators. │\n│ Ranks by Playwright priority.│\n│ Returns JSON. │\n└──────────┬────────────────────┘\n │\n ▼\n JSON response (200)\n```\n\n---\n\n## API\n\n### `GET /`\n\nHealth check.\n\n```json\n{ \"status\": \"ok\", \"service\": \"playwright-selector-gen\" }\n```\n\n### `POST /`\n\n**Headers:**\n\n| Header | Required | Description |\n|---------------|----------|--------------------------|\n| `X-Api-Key` | Yes | Endpoint access key |\n| `Content-Type` | Yes | `application/json` |\n\n**Body:**\n\n| Field | Type | Required | Description |\n|----------|------------|----------|------------------------------------------|\n| `url` | `string` | Yes | Page URL to analyze |\n| `filter` | `string[]` | No | Only return elements matching these tags |\n\n### Response (200)\n\n```json\n{\n \"url\": \"https://www.saucedemo.com\",\n \"totalElements\": 8,\n \"elements\": [\n {\n \"index\": 0,\n \"tag\": \"input\",\n \"locators\": [\n {\n \"method\": \"getByPlaceholder\",\n \"playwrightCode\": \"page.getByPlaceholder('Username')\",\n \"confidence\": \"high\"\n },\n {\n \"method\": \"getByRole\",\n \"playwrightCode\": \"page.getByRole('textbox', { name: 'Username' })\",\n \"confidence\": \"high\"\n },\n {\n \"method\": \"getByTestId\",\n \"playwrightCode\": \"page.getByTestId('username')\",\n \"confidence\": \"high\"\n }\n ]\n }\n ]\n}\n```\n\n---\n\n## Locator Priority\n\nThe AI follows the [official Playwright recommendation](https://playwright.dev/docs/locators):\n\n| Rank | Method | Used For |\n|------|----------------------|-----------------------------------------|\n| 1 | `getByRole()` | ARIA role + accessible name |\n| 2 | `getByLabel()` | Form fields with associated `` |\n| 3 | `getByPlaceholder()` | Inputs with placeholder text |\n| 4 | `getByText()` | Visible text content |\n| 5 | `getByAltText()` | Images with `alt` attribute |\n| 6 | `getByTitle()` | Elements with `title` attribute |\n| 7 | `getByTestId()` | `data-testid` / `data-test` / `data-cy` |\n| 8 | `locator()` CSS | Short CSS only — absolute last resort |\n| 9 | `locator()` XPath | Only for truly complex DOM traversal |\n\nEach element gets up to 3 locators ranked best → fallback. Deep nested selectors are never generated.\n\n---\n\n## Error Responses\n\n| Status | Meaning |\n|--------|----------------------------------------------|\n| `401` | Missing or invalid `X-Api-Key` header |\n| `400` | Missing `url` in request body |\n| `405` | Method not allowed (use POST) |\n| `422` | No elements found after rendering |\n| `500` | Missing env vars / AI API error |\n| `502` | Lightpanda could not fetch the URL |\n",[135],"pulls",1,"forks","envVars",{"_148":138,"_150":52},"connections",{"_148":52,"_149":52},"count","unfilledCount","emptyCount",{"_20":134,"_13":135,"_117":136,"_119":-5,"_120":21,"_121":30,"_123":108,"_22":157,"_29":138,"_126":101,"_128":139,"_130":38,"_131":-5,"_154":158,"_89":159},{"_20":115,"_13":116,"_117":118,"_119":-5,"_120":21,"_121":122,"_123":108,"_22":153,"_29":125,"_126":127,"_128":129,"_130":38,"_131":132,"_154":155,"_89":156},["D",1773608186325],"children",[],[116],["D",1773608213762],[],[135],["D",1773597169607],{"_11":12,"_87":83},{"_11":12,"_80":81,"_82":83,"_45":46,"_84":85,"_86":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_75":-5,"_76":-5,"_77":-5,"_78":14,"_79":12},"ctx",{"_68":-5,"_110":197,"_198":199,"_200":201,"_202":38,"_203":38,"_204":38,"_205":108,"_206":-5,"_207":-7,"_208":-7,"_209":52,"_210":38,"_211":38,"_212":-5,"_213":38,"_214":38,"_215":38,"_216":-5},"ENV",{"_168":169,"_170":171,"_172":26,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1