[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","feb93bd06ec3ee1b6a635de1012067c5b446bbad","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_155":156,"_176":177,"_178":-5},"handle","khawjaahmad","name","playwright-selector-gen","path","main.ts","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":112,"_113":-5,"_12":114,"_115":-5,"_116":20,"_117":-5,"_118":-5,"_119":33,"_14":120,"_121":-5,"_122":-5,"_123":-5,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":133,"_136":137,"_141":142,"_154":20},"id","c832f4ec-2097-11f1-a6cd-42dde27851f2","createdAt",["D",1773597169607],"deletedAt","legacyEnvVars","privacy","public","description","MCP: Fetch URL DOM and generate unique Playwright selectors","imageUrl","f404441a-b070-431b-b152-17a2208cfa70","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","018b67b5-3681-41ae-8e5a-cdcf7cd1218d","tursoName","tursoHostname","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_134":135},"profileImageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4ec015ce-90e5-4eef-7eaf-21e3da8cec00/square512","org",{"_95":96,"_138":135,"_12":114,"_139":140},"avatar","tier","free","branch",{"_143":144,"_97":45,"_103":145,"_146":104,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":98,"_153":96},"version",16,"c833c980-2097-11f1-a6cd-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":157,"_97":100,"_158":159,"_160":-5,"_161":145,"_162":163,"_164":165,"_105":166,"_143":167,"_168":169,"_170":171,"_172":20,"_173":174,"_99":175},"6eadfc22-20b1-11f1-bd80-42dde27851f2","fileId","c8376fea-2097-11f1-a6cd-42dde27851f2","parentId","branchId","branchVersion",15,"latest",true,["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",[100],"permalink","https://www.val.town/x/khawjaahmad/playwright-selector-gen/code/main.ts","extension","actionData","errors"]