1import{f as a,j as e,L as r}from"./vendor-v3-CKZtOP1w.js";import{u as G,g as J}from"./useSEO-v3-C8XvnJAz.js";import{f as Z,d as R}from"./index-v3-D1Jq9f17.js";import{F as L}from"./Footer-v3-DZz4ctp5.js";import{aC as y,C as E,f as D,x as X,ao as ee,c as x,am as M,H as te,p as N,aE as B,i as O,W,_ as F,j as H,aG as se}from"./vendor-lucide-v3-B2wMSyKk.js";import{a as V,C as q,b as Q}from"./bg_cta_dark-v3-RSNkSxVt.js";import{b as _}from"./bg_sandboxes-v3-DxvwDYUx.js";import{b as Y}from"./bg_tracks-v3-Bu1vnq9b.js";import{b as U}from"./bg_faq-v3-CQgHLE3J.js";import"./vendor-monaco-loader-v3-Bh295Nfa.js";import"./vendor-firebase-v3-CzGFsIq1.js";function $({recipientName:c="Alex Morgan",credentialId:g="PLW-2026-QA-8492",issueDate:p="OCTOBER 2026",isMobile:S=!1}){const[m,l]=a.useState(!1),A=()=>{navigator.clipboard.writeText(`https://playwrightpad.com/verify/${g}`),l(!0),setTimeout(()=>l(!1),2e3)};return e.jsx("div",{className:"relative group w-full select-none",children:e.jsx("div",{className:"relative rounded-2xl p-[3px] bg-gradient-to-br from-[#d4af37] via-[#1b1c19] to-[#aa771c] shadow-[0_20px_60px_-15px_rgba(0,0,0,0.3),0_0_0_1px_rgba(197,160,89,0.25)] transition-all duration-300",children:e.jsxs("div",{className:"relative rounded-[13px] bg-[#fdfbf7] text-[#1b1c19] overflow-hidden p-5 sm:p-7 md:p-9 border border-[#e8dfcf]",children:[e.jsxs("svg",{className:"absolute inset-0 w-full h-full pointer-events-none opacity-[0.035]",xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"100%",children:[e.jsx("defs",{children:e.jsxs("pattern",{id:"guilloche",width:"60",height:"60",patternUnits:"userSpaceOnUse",children:[e.jsx("circle",{cx:"30",cy:"30",r:"28",fill:"none",stroke:"#8c6d36",strokeWidth:"0.8"}),e.jsx("circle",{cx:"30",cy:"30",r:"20",fill:"none",stroke:"#8c6d36",strokeWidth:"0.5",strokeDasharray:"2,2"}),e.jsx("circle",{cx:"30",cy:"30",r:"12",fill:"none",stroke:"#8c6d36",strokeWidth:"0.5"}),e.jsx("path",{d:"M0 30 Q15 0 30 30 T60 30",fill:"none",stroke:"#8c6d36",strokeWidth:"0.5"}),e.jsx("path",{d:"M30 0 Q0 15 30 30 T30 60",fill:"none",stroke:"#8c6d36",strokeWidth:"0.5"})]})}),e.jsx("rect",{width:"100%",height:"100%",fill:"url(#guilloche)"})]}),e.jsx("div",{className:"absolute inset-2 sm:inset-3 md:inset-3.5 border-2 border-[#c5a059]/70 rounded-lg pointer-events-none"}),e.jsx("div",{className:"absolute inset-2.5 sm:inset-3.5 md:inset-4 border border-[#c5a059]/30 rounded-md pointer-events-none"}),e.jsx("div",{className:"absolute inset-3.5 sm:inset-5 md:inset-5.5 border border-dashed border-[#8c6d36]/25 rounded pointer-events-none"}),e.jsxs("svg",{className:"absolute top-3 left-3 sm:top-4 sm:left-4 w-7 h-7 sm:w-10 sm:h-10 text-[#c5a059] pointer-events-none",viewBox:"0 0 48 48",fill:"none",stroke:"currentColor",children:[e.jsx("path",{d:"M4 24C4 12.954 12.954 4 24 4",strokeWidth:"2.5",strokeLinecap:"round"}),e.jsx("path",{d:"M8 24C8 15.163 15.163 8 24 8",strokeWidth:"1.2",strokeLinecap:"round"}),e.jsx("path",{d:"M4 4L18 18M4 4H14M4 4V14",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",fill:"#c5a059"})]}),e.jsxs("svg",{className:"absolute top-3 right-3 sm:top-4 sm:right-4 w-7 h-7 sm:w-10 sm:h-10 text-[#c5a059] pointer-events-none",viewBox:"0 0 48 48",fill:"none",stroke:"currentColor",children:[e.jsx("path",{d:"M44 24C44 12.954 35.046 4 24 4",strokeWidth:"2.5",strokeLinecap:"round"}),e.jsx("path",{d:"M40 24C40 15.163 32.837 8 24 8",strokeWidth:"1.2",strokeLinecap:"round"}),e.jsx("path",{d:"M44 4L30 18M44 4H34M44 4V14",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("circle",{cx:"38",cy:"10",r:"2.5",fill:"#c5a059"})]}),e.jsxs("svg",{className:"absolute bottom-3 left-3 sm:bottom-4 sm:left-4 w-7 h-7 sm:w-10 sm:h-10 text-[#c5a059] pointer-events-none",viewBox:"0 0 48 48",fill:"none",stroke:"currentColor",children:[e.jsx("path",{d:"M4 24C4 35.046 12.954 44 24 44",strokeWidth:"2.5",strokeLinecap:"round"}),e.jsx("path",{d:"M8 24C8 32.837 15.163 40 24 40",strokeWidth:"1.2",strokeLinecap:"round"}),e.jsx("path",{d:"M4 44L18 30M4 44H14M4 44V34",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("circle",{cx:"10",cy:"38",r:"2.5",fill:"#c5a059"})]}),e.jsxs("svg",{className:"absolute bottom-3 right-3 sm:bottom-4 sm:right-4 w-7 h-7 sm:w-10 sm:h-10 text-[#c5a059] pointer-events-none",viewBox:"0 0 48 48",fill:"none",stroke:"currentColor",children:[e.jsx("path",{d:"M44 24C44 35.046 35.046 44 24 44",strokeWidth:"2.5",strokeLinecap:"round"}),e.jsx("path",{d:"M40 24C40 32.837 32.837 40 24 40",strokeWidth:"1.2",strokeLinecap:"round"}),e.jsx("path",{d:"M44 44L30 30M44 44H34M44 44V34",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}),e.jsx("circle",{cx:"38",cy:"38",r:"2.5",fill:"#c5a059"})]}),e.jsxs("div",{className:"relative z-10 flex flex-col items-center text-center",children:[e.jsxs("div",{className:"flex items-center justify-center gap-2 mb-1.5",children:[e.jsx("div",{className:"h-[1px] w-6 sm:w-12 bg-gradient-to-r from-transparent to-[#c5a059]"}
1),e.jsxs("div",{className:"flex items-center gap-1.5 text-[#8c6d36]",children:[e.jsx(y,{size:13,className:"text-[#c5a059]"}),e.jsx("span",{className:"font-mono text-[9px] sm:text-[10px] uppercase font-black tracking-[0.25em]",children:"Playwright Pad Accreditation Council"}),e.jsx(y,{size:13,className:"text-[#c5a059]"})]}),e.jsx("div",{className:"h-[1px] w-6 sm:w-12 bg-gradient-to-l from-transparent to-[#c5a059]"})]}),e.jsx("div",{className:"text-[8px] sm:text-[9px] font-mono uppercase font-bold tracking-[0.18em] text-[#737672] mb-3",children:"Standard SDET Competency Verification Registry ⢠ISO/IEC 17024 Benchmark"}),e.jsxs("div",{className:"relative my-1",children:[e.jsx("h3",{className:"font-serif font-black text-xl sm:text-2xl md:text-3xl lg:text-[32px] tracking-[0.12em] text-[#1b1c19] uppercase leading-tight",children:"Certificate of Completion"}),e.jsx("div",{className:"text-[10px] sm:text-[11px] font-serif tracking-[0.2em] text-[#8c6d36] font-bold uppercase mt-0.5",children:"& Professional SDET Engineering Excellence"})]}),e.jsx("p",{className:"font-serif italic text-xs sm:text-[13px] text-[#5b5e5a] mt-2 mb-1",children:"This is to officially certify that"}),e.jsxs("div",{className:"relative my-2 py-1 px-8 inline-flex flex-col items-center",children:[e.jsx("div",{className:"font-serif font-black text-lg sm:text-2xl md:text-3xl text-[#1b1c19] tracking-wide relative",children:c}),e.jsxs("div",{className:"flex items-center gap-2 w-full max-w-[260px] sm:max-w-[340px] mt-1",children:[e.jsx("div",{className:"h-[1.5px] flex-1 bg-gradient-to-r from-transparent via-[#c5a059] to-[#8c6d36]"}),e.jsx("div",{className:"w-1.5 h-1.5 rotate-45 bg-[#c5a059]"}),e.jsx("div",{className:"h-[1.5px] flex-1 bg-gradient-to-l from-transparent via-[#c5a059] to-[#8c6d36]"})]}),e.jsx("span",{className:"text-[8px] font-mono uppercase tracking-[0.25em] text-[#737672] mt-0.5",children:"Verified Candidate ⢠Engineer of Record"})]}),e.jsx("p",{className:"text-[11px] sm:text-xs text-[#5b5e5a] leading-relaxed max-w-xl mx-auto mt-1 mb-2 font-medium",children:"has satisfactorily completed all rigorous practical challenges, solving deterministic browser automation suites and validating enterprise architecture in"}),e.jsx("div",{className:"px-3.5 py-1 rounded bg-[#f4f1ea] border border-[#c4c7c7] text-[#9e3e4f] font-serif font-extrabold text-xs sm:text-sm tracking-[0.06em] uppercase shadow-xs mb-4",children:"Playwright Test Automation & SDET Engineering"}),e.jsxs("div",{className:"w-full max-w-2xl my-2 p-2.5 sm:p-3 rounded-lg bg-white border border-[#c4c7c7] shadow-xs",children:[e.jsxs("div",{className:"text-[9px] font-mono font-bold uppercase tracking-wider text-[#5b5e5a] mb-2 flex items-center justify-between",children:[e.jsx("span",{children:"Verified Practical Competency Benchmarks:"}),e.jsxs("span",{className:"text-[#9e3e4f] font-mono font-bold flex items-center gap-1.5 uppercase text-[9px]",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-[#9e3e4f]"}),"Verified Practical Mastery"]})]}),e.jsxs("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-1.5 text-left",children:[e.jsxs("div",{className:"p-1.5 rounded bg-[#fcfbf9] border border-[#c4c7c7] flex items-center gap-1.5",children:[e.jsx("div",{className:"w-4 h-4 rounded-full bg-[#9e3e4f] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(E,{size:9,strokeWidth:3.5})}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-[#1b1c19] truncate",title:"Page Object Model",children:"Page Object Model"})]}),e.jsxs("div",{className:"p-1.5 rounded bg-[#fcfbf9] border border-[#c4c7c7] flex items-center gap-1.5",children:[e.jsx("div",{className:"w-4 h-4 rounded-full bg-[#9e3e4f] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(E,{size:9,strokeWidth:3.5})}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-[#1b1c19] truncate",title:"Dynamic Locators",children:"Dynamic Locators"})]}),e.jsxs("div",{className:"p-1.5 rounded bg-[#fcfbf9] border border-[#c4c7c7] flex items-center gap-1.5",children:[e.jsx("div",{className:"w-4 h-4 rounded-full bg-[#9e3e4f] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(E,{size:9,strokeWidth:3.5})}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-[#1b1c19] truncate",title:"Route Mocking",children:"Route Mocking"})]}),e.jsxs("div",{className:"p-1.5 rounded bg-[#fcfbf9] border border-[#c4c7c7] flex items-center gap-1.5",children:[e.jsx("div",{className:"w-4 h-4 rounded-full bg-[#9e3e4f] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(E,{size:9,strokeWidth:3.5})}),e.jsx("span",{className:"text-[10px] font-mono font-bold text-[#1b1c19] truncate",title:"CI/CD Automation",children:"CI/CD Headless"})]})]})]}),e.jsxs("div",{className:"w-full max-w-2xl pt-4 pb-2 mt-1 grid grid-cols-3 items-center border-t border-[#c5a059]/40",children:[e.jsxs("div",{className:"flex flex-col items-center text-center",children:[e.jsx("span",{className:"font-mono text-[8px] sm:text-[9px] uppercase font-bold tracking-[0.2em] text-[#737672]",children:"Issued By"}),e.jsx("div",{className:"font-headings font-black text-sm sm:text-base tracking-tight text-[#1b1c19] uppercase mt-1",children:"PlaywrightPad"}),e.jsx("div",{className:"w-16 h-[1.5px] bg-[#c5a059] my-1"}),e.jsx("span",{className:"font-mono text-[8px] sm:text-[9px] uppercase text-[#8
1c6d36] font-bold",children:"Official Platform"})]}),e.jsxs("div",{className:"flex flex-col items-center justify-center relative -mt-3 sm:-mt-5",children:[e.jsxs("div",{className:"absolute top-12 flex justify-center gap-1.5 pointer-events-none z-0",children:[e.jsx("div",{className:"w-4 sm:w-5 h-8 sm:h-10 bg-[#9e3e4f] border-x border-b border-[#732938] shadow-md",style:{clipPath:"polygon(0% 0%, 100% 0%, 100% 100%, 50% 82%, 0% 100%)",transform:"rotate(12deg)"}}),e.jsx("div",{className:"w-4 sm:w-5 h-8 sm:h-10 bg-[#9e3e4f] border-x border-b border-[#732938] shadow-md",style:{clipPath:"polygon(0% 0%, 100% 0%, 100% 100%, 50% 82%, 0% 100%)",transform:"rotate(-12deg)"}})]}),e.jsxs("div",{className:"relative z-10 w-16 h-16 sm:w-20 sm:h-20 rounded-full flex items-center justify-center p-1 shadow-[0_6px_20px_rgba(140,109,54,0.4),0_0_0_1px_rgba(255,255,255,0.8)_inset] bg-gradient-to-br from-[#ffd700] via-[#d4af37] to-[#8c6d36] transition-transform duration-300 hover:scale-105",children:[e.jsx("div",{className:"absolute inset-0 rounded-full border-2 border-dashed border-[#ffec99]/60 pointer-events-none"}),e.jsxs("div",{className:"w-13 h-13 sm:w-16 sm:h-16 rounded-full border border-[#8c6d36] bg-gradient-to-tr from-[#c5a059] via-[#f7e7a9] to-[#d4af37] flex flex-col items-center justify-center text-center p-1 shadow-inner",children:[e.jsx(D,{size:13,className:"text-[#5a421b] mb-0.5"}),e.jsx("span",{className:"font-mono font-black text-[6px] sm:text-[7px] tracking-widest uppercase text-[#4a3412] leading-none",children:"OFFICIAL"}),e.jsx("span",{className:"font-serif font-black text-[7px] sm:text-[8px] uppercase tracking-wider text-[#1b1c19] leading-tight",children:"SEAL"}),e.jsxs("div",{className:"flex gap-0.5 text-[#5a421b] mt-0.5",children:[e.jsx("span",{className:"text-[6px] leading-none",children:"â
"}),e.jsx("span",{className:"text-[6px] leading-none",children:"â
"}),e.jsx("span",{className:"text-[6px] leading-none",children:"â
"})]})]})]}),e.jsx("div",{className:"text-[8px] font-mono font-black tracking-widest text-[#8c6d36] uppercase mt-4 sm:mt-5",children:"ACCREDITED 2026"})]}),e.jsxs("div",{className:"flex flex-col items-center text-center",children:[e.jsx("span",{className:"font-mono text-[8px] sm:text-[9px] uppercase font-bold tracking-[0.2em] text-[#737672]",children:"Accredited By"}),e.jsx("div",{className:"font-headings font-black text-sm sm:text-base tracking-tight text-[#1b1c19] uppercase mt-1",children:"PlaywrightPad"}),e.jsx("div",{className:"w-16 h-[1.5px] bg-[#c5a059] my-1"}),e.jsx("span",{className:"font-mono text-[8px] sm:text-[9px] uppercase text-[#8c6d36] font-bold",children:"SDET Certification"})]})]}),e.jsxs("div",{className:"w-full mt-3 pt-3 border-t border-[#e8dfcf] flex items-center justify-between flex-wrap gap-2 text-left",children:[e.jsxs("div",{className:"flex flex-col gap-0.5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("span",{className:"font-mono text-[9px] sm:text-[10px] font-bold text-[#1b1c19]",children:["CREDENTIAL ID: ",e.jsx("code",{className:"bg-[#f4f1ea] px-1.5 py-0.5 rounded border border-[#c4c7c7] text-[#1b1c19] font-bold",children:g})]}),e.jsxs("button",{onClick:A,title:"Copy verification link",className:"text-[#737672] hover:text-[#1b1c19] transition-colors p-0.5 border-none bg-transparent cursor-pointer inline-flex items-center",children:[e.jsx(X,{size:11}),m&&e.jsx("span",{className:"ml-1 text-[9px] text-[#9e3e4f] font-bold",children:"Copied!"})]})]}),e.jsxs("div",{className:"text-[8px] sm:text-[9px] font-mono text-[#737672] flex items-center gap-1.5 flex-wrap",children:[e.jsxs("span",{children:["ISSUED: ",p]}),e.jsx("span",{children:"â¢"}),e.jsx("span",{className:"text-[#1b1c19] font-bold",children:"SHA-256 VALIDATED"}),e.jsx("span",{children:"â¢"}),e.jsx("span",{children:"PUBLIC REGISTRY"})]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("div",{className:"text-right hidden sm:block",children:[e.jsx("div",{className:"text-[8px] font-mono font-bold uppercase tracking-wider text-[#1b1c19]",children:"Scan to Verify"}),e.jsx("div",{className:"text-[7px] font-mono text-[#737672]",children:"Cryptographic Ledger"})]}),e.jsx("div",{className:"p-1.5 bg-white rounded-lg border border-[#c4c7c7] shadow-xs flex items-center justify-center text-[#1b1c19]",children:e.jsx(ee,{size:26,className:"text-[#1b1c19]"})})]})]})]})]})})})}const K="/assets/bg_certification-v3-BKXXZOaU.webp";function ae(){const[c,g]=a.useState("checkout"),[p,S]=a.useState(null),[m,l]=a.useState("pass"),[A,k]=a.useState(!1),j=a.useRef(null),v=s=>{if(s&&s.preventDefault(),l("pass"),j.current){j.current.scrollIntoView({behavior:"smooth",block:"start"}),k(!0),setTimeout(()=>k(!1),2800);try{window.history.pushState(null,"","#certificate-section")}catch{}}};a.useEffect(()=>{const s=()=>{var t;(window.location.hash==="#certificate-section"||window.location.hash==="#certificate-section-mobile")&&(l("pass"),(t=j.current)==null||t.scrollIntoView({behavior:"smooth",block:"start"}),k(!0),setTimeout(()=>k(!1),2800))},i=setTimeout(s,250);
1return window.addEventListener("hashchange",s),()=>{clearTimeout(i),window.removeEventListener("hashchange",s)}},[]);const[d,C]=a.useState(!1),[o,u]=a.useState(-1),[h,w]=a.useState(!1),b={checkout:{title:"E-Commerce Promo Engine",file:"tests/checkout.spec.ts",target:"QuickMart Sandbox v2",code:`test('apply 50% discount & assert total', async ({ page }) => { 2 await page.goto('/demo/shop'); 3 await page.getByTestId('add-item-1').click(); 4 await page.getByPlaceholder('Promo code').fill('SAVE50'); 5 await page.getByRole('button', { name: 'Apply' }).click(); 6 await expect(page.getByTestId('cart-total')).toHaveText('$25.00'); 7});`,steps:[{text:"Connecting to Chromium CDP headless session",time:"0.04s"},{text:'page.goto("/demo/shop") -> HTTP 200 OK',time:"0.16s"},{text:'Resolved locator getByTestId("add-item-1") -> Click',time:"0.29s"},{text:'Filled promo input "SAVE50" -> Click "Apply"',time:"0.41s"},{text:'Assertion: expect(cart-total).toHaveText("$25.00") -> PASS',time:"0.52s"}]},auth:{title:"2FA Auth & Session State",file:"tests/session.spec.ts",target:"Apex Bank Portal",code:`test('bypass OTP & save storageState', async ({ page, context }) => { 8 await page.goto('/demo/login'); 9 await page.getByLabel('Work Email').fill('[email protected]'); 10 await page.getByRole('button', { name: 'Authenticate' }).click(); 11 await context.storageState({ path: 'state.json' }); 12 await expect(page.getByTestId('user-badge')).toBeVisible(); 13});`,steps:[{text:"Spawning isolated browser context",time:"0.03s"},{text:'page.goto("/demo/login") -> Handshake complete',time:"0.14s"},{text:"Filled user credentials and triggered authentication",time:"0.31s"},{text:"Extracted encrypted session cookie -> state.json",time:"0.43s"},{text:"Assertion: expect(user-badge).toBeVisible() -> PASS",time:"0.50s"}]},mocking:{title:"Stripe API Route Interception",file:"tests/payment-mock.spec.ts",target:"SaaS Billing Module",code:`test('mock payment failure webhook', async ({ page }) => { 14 await page.route('**/v1/charges', route => { 15 route.fulfill({ status: 402, body: JSON.stringify({ error: 'card_declined' }) }); 16 }); 17 await page.goto('/checkout'); 18 await page.getByRole('button', { name: 'Pay' }).click(); 19 await expect(page.getByText('Card Declined')).toBeVisible(); 20});`,steps:[{text:"Registered network route interception **/v1/charges",time:"0.02s"},{text:"Navigated to checkout and triggered transaction",time:"0.18s"},{text:"Intercepted POST /v1/charges -> Injected HTTP 402 stub",time:"0.33s"},{text:'Assertion: expect("Card Declined").toBeVisible() -> PASS',time:"0.47s"}]}}[c],z=()=>{if(d)return;C(!0),w(!1),u(0);const s=b.steps.length;let i=0;const t=setInterval(()=>{i++,i<s?u(i):(clearInterval(t),u(s-1),w(!0),C(!1))},450)},f=s=>{g(s),C(!1),w(!1),u(-1)},T=[{q:"Do I need to install Node.js, npm, or VS Code to practice?",a:"Zero installation required. Playwright Pad runs authentic browser instances with Playwright pre-installed directly in your browser. You can write, execute, and debug real tests immediately."},{q:"How does the Playwright Certification work?",a:"Unlike trivia-based multiple-choice quizzes, our certification tests practical hands-on capability. You complete real automation challenges (locating dynamic elements, eliminating flaky timeouts, and building Page Object Models). Once your test suite passes validation, your official digital certificate is issued instantly."},{q:"Can I add this certificate to my LinkedIn profile and resume?",a:"Yes! Every certificate includes a unique cryptographic verification ID and permanent URL that hiring managers and recruiters can click to verify your skill benchmarks and completed projects."},{q:"I have only done Manual Testing or Selenium. Can I learn Playwright?",a:"Yes, absolutely. The curriculum starts with the fundamentals of Playwright (how modern locators and auto-waiting eliminate flaky tests) and guides you step-by-step into enterprise SDET architecture."},{q:"Is it really free to start?",a:"Yes! Core learning tracks, interactive exercises, sandboxes, and foundational challenges are 100% free with no credit card required."}];return e.jsxs("div",{className:"w-full max-w-full bg-[#fbf9f4] text-[#1b1c19] overflow-x-hidden pb-24 font-sans select-none antialiased",children:[e.jsxs("div",{className:"bg-[#1b1c19] text-white px-3.5 py-2 text-[10px] font-mono border-b border-white/10 flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-emerald-400 animate-pulse flex-shrink-0"}),e.jsx("span",{className:"text-white font-black tracking-wider up
20percase",children:"PLAYWRIGHT WORKSTATION"}),e.jsx("span",{className:"text-white/40 hidden xs:inline",children:"|"}),e.jsx("span",{className:"text-white/70 hidden xs:inline",children:"v1.44 Engine"})]}),e.jsx("div",{className:"flex items-center gap-1.5",children:e.jsx("span",{className:"px-2 py-0.5 rounded bg-white text-[#1b1c19] font-black text-[9px] uppercase tracking-wide",children:"0s Config"})})]}),e.jsxs("section",{className:"px-4 pt-6 pb-6 relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:V,alt:"",role:"presentation",width:"800",height:"600",fetchPriority:"high",loading:"eager",decoding:"async",className:"w-full h-full object-cover object-center opacity-55 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#fbf9f4]/40 via-transparent to-[#fbf9f4]/70"})]}),e.jsx("div",{className:"absolute inset-0 testing-grid-bg opacity-20 pointer-events-none z-0"}),e.jsxs("div",{className:"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#00201c] text-white text-[10px] font-mono uppercase tracking-wider mb-3 relative z-10 shadow-xs",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-emerald-400"}),e.jsx("span",{children:"PLAYWRIGHT PRACTICE & CERTIFICATION"})]}),e.jsx("h1",{className:"text-2xl xs:text-[28px] font-black tracking-tight leading-[1.15] text-[#1b1c19] mb-3 font-headings relative z-10 break-words",children:"Master Playwright on the #1 Practice Website"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed max-w-sm mb-5 font-normal relative z-10",children:"The interactive web lab for QA engineers and SDETs. Write, run, and debug tests in a real browser sandboxâthen validate your capability with an accredited certificate."}),e.jsxs("div",{className:"space-y-2 relative z-10",children:[e.jsxs(r,{to:"/lobby?category=playwright",className:"w-full py-3.5 px-5 rounded bg-[#1b1c19] hover:bg-black text-white font-extrabold text-xs uppercase tracking-wider flex items-center justify-center gap-2 shadow-md active:scale-95 transition-all no-underline cursor-pointer",children:[e.jsx("span",{children:"Start Practicing â Free"}),e.jsx(x,{size:15})]}),e.jsxs("button",{type:"button",onClick:v,className:"w-full py-3.5 px-5 rounded bg-white hover:bg-[#f5f3ee] border-2 border-[#1b1c19] text-[#1b1c19] font-extrabold text-xs uppercase tracking-wider flex items-center justify-center gap-2 transition-all cursor-pointer shadow-xs active:scale-95",children:[e.jsx(D,{size:15,className:"text-[#9e3e4f]"}),e.jsx("span",{children:"Inspect Official Certificate"})]})]}),e.jsxs("div",{className:"grid grid-cols-2 gap-2 mt-5 relative z-10",children:[e.jsxs("div",{className:"bg-white p-2.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-lg font-black text-[#1b1c19] font-headings",children:"0 min"}),e.jsx("div",{className:"text-[9px] font-bold uppercase text-[#444748] mt-0.5",children:"Setup Time"})]}),e.jsxs("div",{className:"bg-white p-2.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-lg font-black text-[#1b1c19] font-headings",children:"50+"}),e.jsx("div",{className:"text-[9px] font-bold uppercase text-[#444748] mt-0.5",children:"Live Drills"})]}),e.jsxs("div",{className:"bg-white p-2.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-lg font-black text-[#9e3e4f] font-headings",children:"100%"}),e.jsx("div",{className:"text-[9px] font-bold uppercase text-[#444748] mt-0.5",children:"In-Browser"})]}),e.jsxs("div",{className:"bg-white p-2.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-lg font-black text-[#1b1c19] font-headings",children:"8,000+"}),e.jsx("div",{className:"text-[9px] font-bold uppercase text-[#444748] mt-0.5",children:"Engineers"})]})]})]}),e.jsx(q,{isMobile:!0}),e.jsxs("section",{className:"px-4 py-8 bg-[#1e201c] text-white",children:[e.jsxs("div",{className:"text-center mb-4",children:[e.jsx("span",{className:"text-[10px] font-mono font-bold uppercase tracking-wider text-emerald-400 bg-[#00201c] px-2 py-0.5 rounded border border-emerald-500/30",children:"CHROMIUM TEST RUNNER"}),e.jsx("h2",{className:"text-xl font-black font-headings mt-2 text-white",children:"Run Real Tests in Browser"}),e.jsx("p",{className:"text-xs text-white/70 mt-1 max-w-sm mx-auto font-mono",children:"Execute authentic CDP automation commands against real application DOMs."})]}),e.jsxs("div",{className:"rounded-xl bg-[#2a2a2b] border border-[#454545] shadow-xl overflow-hidden",children:[e.jsxs("div",{className:"px-3 py-2 bg-[#252526] flex items-center justify-between border-b border-[#3e3e42]",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("div",{className:"w-2.5 h-2.5 rounded-full bg-[#ff5f56]"}),e.jsx("div",{className:"w-2.5 h-2.5 rounded-full bg-[#ffbd2e]"}),e.jsx("div",{className:"w-2.5 h-2.5 rounded-full bg-[#27c93f]"}),e.jsx("span",{className:"text-[11px] font-mono text-white/60 ml-2",children:b.file})]}),e.jsx("span",{className:"text-[10px] font-mono text-white/70",children:b.target})]}),e.jsxs("div",{className:"px-2 py-1.5 bg-[#1e1e1e] border-b border-[#3a3a3c] flex items-center gap-1.5 overflow-x-auto",children:[e.jsx("button",{onClick:()=>f("checkout"),className:`px-2.5 py-1 rounded text-[11px] font-mono font-bold whitespace-nowrap transition-all cursor-pointer ${c==="checkout"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70"}`,children:"01. Promo"}),e.jsx("button",{onClick:()=>f("auth"),className:`px-2.5 py-1 rounded text-[11px] font-mono font-bold whitespace-nowrap transition-all cursor-pointer ${c==="auth"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70"}`,children:"02. 2FA State"}),e.jsx("button",{onClick:()=>f("mocking"),className:`px-2.5 py-1 rounded text-[11px] font-mono font-bold whitespace-nowrap transition-all cursor-pointer ${c==="mocking"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70"}`,children:"03. Intercept"})]}),e.jsx("pre",{className:"p-3 text-[11px] font-mono leading-relaxed text-zinc-200 overflow-x-auto bg-[#181818] min-h-[130px] border-b border-[#3a3a3c]",children:e.jsx("code",{children:b.code})}),e.jsxs("div",{className:"p-3 bg-[#121212] text-[11px] font-mono",children:[e.jsxs("div",{className:"flex items-center justify-between text-white/50 uppercase tracking-wider mb-2 font-bold text-[10px]",children:[e.jsx("span",{children:"Execution Log"}),e.jsx("span",{children:h?"Exit: 0":d?"Executing...":"Ready"})]}),o===-1&&!h&&e.jsxs("div",{className:"text-white/50 py-2 flex items-center gap-1.5 text-xs",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-white/40"}),e.jsx("span",{children:"Tap âRun Scriptâ below to dispatch CDP test actions."})]}),o>=0&&e.jsx("div",{className:"space-y-1 py-0.5",children:b.steps.slice(0,o+1).map((s,i)=>e.jsxs("div",{className:`flex items-start gap-1.5 text-[11px] ${i===o&&d?"text-amber-300 font-bold":"text-emerald-400"}`,children:[e.jsxs("span",{className:"text-white/40 select-none",children:["[",s.time,"]"]}),e.jsxs("span",{children:[i===o&&d?"ⶠ":"â ",s.text]})]},i))}),h&&e.jsxs("div",{className:"mt-2.5 pt-2 border-t border-white/10 flex items-center justify-between text-emerald-400 font-bold text-xs",children:[e.jsx("span",{children:"1 test passed (Chromium)"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[9px] font-black uppercase bg-emerald-600 text-white",children:"PASSED"})]})]}),e.jsxs("div",{className:"p-3 bg-[#252526] border-t border-[#3e3e42] flex items-center justify-between gap-3",children:[e.jsx("span",{className:"text-[10px] font-mono text-white/60 hidden xs:inline",children:"Engine: Chromium Headless"}),e.jsxs("button",{onClick:z,disabled:d,className:"w-full xs:w-auto px-5 py-2.5 rounded bg-[#9e3e4f] hover:bg-[#853443] disabled:opacity-50 text-white font-headings font-black text-xs uppercase tracking-wider flex items-center justify-center gap-1.5 shadow-md active:scale-95 transition-all cursor-pointer",children:[e.jsx(M,{size:13,fill:"white"}),e.jsx("span",{children:d?"Running Spec...":h?"Re-Run Test":"Run Script"})]})]})]}),e.jsx("div",{className:"mt-3 text-center",children:e.jsxs(r,{to:"/ide",className:"text-xs font-mono font-bold text-white/80 hover:text-white hover:underline inline-flex items-center gap-1.5",children:[e.jsx("span",{children:"Open Complete Mobile IDE Sandbox"}),e.jsx(te,{size:12})]})})]}),e.jsxs("section",{id:"certificate-section-mobile",ref:j,className:"px-4 py-8 bg-white border-b border-[#c4c7c7] scroll-mt-16 relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:K,alt:"",role:"presentation",width:"800",height:"600",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-25 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-white/60 via-trans
20parent to-white/60"})]}),e.jsxs("div",{className:"mb-5 text-center relative z-10",children:[e.jsxs("div",{className:"inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[#1b1c19] text-white text-[10px] font-mono uppercase tracking-wider mb-2",children:[e.jsx(y,{size:13,className:"text-white"}),e.jsx("span",{children:"ACCREDITED CREDENTIAL"})]}),e.jsx("h2",{className:"text-xl font-black font-headings text-[#1b1c19]",children:"Playwright Certified SDET Credential"}),e.jsx("p",{className:"text-xs text-[#444748] mt-1 max-w-xs mx-auto leading-relaxed",children:"Validate your automation capability with a verifiable digital certificate recognized by hiring teams."})]}),e.jsxs("div",{className:"flex rounded bg-[#f5f3ee] p-1 mb-4 border border-[#c4c7c7] max-w-xs mx-auto",children:[e.jsx("button",{onClick:()=>l("pass"),className:`flex-1 py-1.5 text-xs font-bold rounded transition-all cursor-pointer ${m==="pass"?"bg-white text-[#1b1c19] shadow-xs":"text-[#444748]"}`,children:"Official Certificate"}),e.jsx("button",{onClick:()=>l("syllabus"),className:`flex-1 py-1.5 text-xs font-bold rounded transition-all cursor-pointer ${m==="syllabus"?"bg-white text-[#1b1c19] shadow-xs":"text-[#444748]"}`,children:"Exam Benchmarks"})]}),m==="pass"&&e.jsx("div",{className:`transition-all duration-700 rounded-2xl ${A?"ring-4 ring-[#c5a059] shadow-[0_0_30px_rgba(197,160,89,0.5)] scale-[1.015]":""}`,children:e.jsx($,{isMobile:!0})}),m==="syllabus"&&e.jsxs("div",{className:"rounded-xl bg-[#fbf9f4] p-4 border border-[#c4c7c7] space-y-2.5 text-xs text-[#1b1c19] font-mono",children:[e.jsx("div",{className:"text-[10px] font-bold text-[#1b1c19] uppercase tracking-wider",children:"Exam Benchmark Criteria (100% Practical):"}),e.jsxs("div",{className:"p-2.5 rounded bg-white border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Scenario 1: Dynamic E-Commerce Flow"}),e.jsx("div",{className:"text-[11px] text-[#444748] mt-0.5",children:"Automate item selection, coupon logic, and assert shopping cart state across viewports."})]}),e.jsxs("div",{className:"p-2.5 rounded bg-white border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Scenario 2: Flaky Async Resolution"}),e.jsx("div",{className:"text-[11px] text-[#444748] mt-0.5",children:"Replace brittle sleeps with Playwright auto-waiting assertions on slow-loading data tables."})]}),e.jsxs("div",{className:"p-2.5 rounded bg-white border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Scenario 3: Network Interception & Mocking"}),e.jsx("div",{className:"text-[11px] text-[#444748] mt-0.5",children:"Intercept payment gateway routes and mock 402/500 failure responses without backend servers."})]})]}),e.jsxs("div",{className:"mt-4 space-y-2 text-xs text-[#444748]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(N,{size:15,className:"text-[#9e3e4f] flex-shrink-0"}),e.jsxs("span",{children:["Direct ",e.jsx("strong",{children:"Add to LinkedIn Profile"})," credential button"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(N,{size:15,className:"text-[#9e3e4f] flex-shrink-0"}),e.jsx("span",{children:"Permanent shareable verification link for hiring teams"})]})]}),e.jsx("div",{className:"mt-5",children:e.jsxs(r,{to:"/tracks",className:"w-full py-3.5 px-5 rounded bg-[#1b1c19] hover:bg-black text-white font-extrabold text-xs uppercase tracking-wider flex items-center justify-center gap-2 shadow-md no-underline cursor-pointer transition-all",children:[e.jsx("span",{children:"Start Practice Towards Certificate"}),e.jsx(x,{size:14})]})})]}),e.jsxs("section",{className:"px-4 py-8 bg-[#fbf9f4] border-b border-[#c4c7c7] relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:_,alt:"",role:"presentation",width:"800",height:"600",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-25 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#fbf9f4]/60 via-trans
20parent to-[#fbf9f4]/60"})]}),e.jsxs("div",{className:"text-center mb-6 relative z-10",children:[e.jsx("span",{className:"text-[10px] font-mono font-bold uppercase tracking-wider text-white bg-[#1b1c19] px-2 py-0.5 rounded",children:"TARGET LAB ENVIRONMENTS"}),e.jsx("h2",{className:"text-xl font-black font-headings mt-2 text-[#1b1c19]",children:"Practice on Live Realistic Sandboxes"}),e.jsx("p",{className:"text-xs text-[#444748] mt-1 max-w-xs mx-auto",children:"Test against real frontend architectures built specifically for hands-on automation challenges."})]}),e.jsxs("div",{className:"space-y-3 relative z-10",children:[e.jsxs(r,{to:"/sandbox/ecommerce",className:"p-3.5 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] flex items-start gap-3 transition-colors no-underline text-inherit block shadow-xs",children:[e.jsx("div",{className:"w-10 h-10 rounded bg-[#1b1c19] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(B,{size:18})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h3",{className:"text-xs font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"QuickMart E-Commerce"}),e.jsx("span",{className:"text-[9px] font-mono font-bold bg-[#f5f3ee] text-[#1b1c19] border border-[#c4c7c7] px-1.5 py-0.5 rounded",children:"14 Drills"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1 leading-relaxed",children:"Cart synchronization, promo code engines, out-of-stock badges, and payment checkout flows."})]})]}),e.jsxs(r,{to:"/sandbox/banking",className:"p-3.5 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] flex items-start gap-3 transition-colors no-underline text-inherit block shadow-xs",children:[e.jsx("div",{className:"w-10 h-10 rounded bg-[#1b1c19] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(O,{size:18})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h3",{className:"text-xs font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"Apex FinBank Portal"}),e.jsx("span",{className:"text-[9px] font-mono font-bold bg-[#f5f3ee] text-[#1b1c19] border border-[#c4c7c7] px-1.5 py-0.5 rounded",children:"16 Drills"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1 leading-relaxed",children:"2FA SMS tokens, transaction history tables, dynamic date filters, and PDF statement exports."})]})]}),e.jsxs(r,{to:"/sandbox/healthcare",className:"p-3.5 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] flex items-start gap-3 transition-colors no-underline text-inherit block shadow-xs",children:[e.jsx("div",{className:"w-10 h-10 rounded bg-[#1b1c19] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(W,{size:18})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h3",{className:"text-xs font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"CarePulse Healthcare"}),e.jsx("span",{className:"text-[9px] font-mono font-bold bg-[#f5f3ee] text-[#1b1c19] border border-[#c4c7c7] px-1.5 py-0.5 rounded",children:"10 Drills"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1 leading-relaxed",children:"Interactive appointment calendars, doctor slot selection, file upload reports, and modal dialogs."})]})]}),e.jsxs(r,{to:"/sandbox/saas",className:"p-3.5 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] flex items-start gap-3 transition-colors no-underline text-inherit block shadow-xs",children:[e.jsx("div",{className:"w-10 h-10 rounded bg-[#1b1c19] text-white flex items-center justify-center flex-shrink-0 shadow-xs",children:e.jsx(F,{size:18})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("h3",{className:"text-xs font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"CloudMetrics Admin"}),e.jsx("span",{className:"text-[9px] font-mono font-bold bg-[#f5f3ee] text-[#1b1c19] border border-[#c4c7c7] px-1.5 py-0.5 rounded",children:"12 Drills"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1 leading-relaxed",children:"Virtual infinite scroll tables, dark mode toggle assertions, user permissions, and CSV bulk exports."})]})]})]})]}),e.jsxs("section",{className:"px-4 py-8 bg-white border-b border-[#c4c7c7] relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:Y,alt:"",role:"presentation",width:"800",height:"600",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-20 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-white/70 via-trans
20parent to-white/70"})]}),e.jsxs("div",{className:"relative z-10",children:[e.jsxs("div",{className:"text-center mb-5",children:[e.jsx("span",{className:"text-[10px] font-mono font-bold uppercase tracking-wider text-[#1b1c19] bg-[#f5f3ee] border border-[#c4c7c7] px-2 py-0.5 rounded",children:"FRAMEWORK BENCHMARK"}),e.jsx("h2",{className:"text-xl font-black font-headings mt-2 text-[#1b1c19]",children:"Why Teams Choose Playwright"})]}),e.jsxs("div",{className:"bg-[#fbf9f4] rounded border border-[#c4c7c7] p-4 space-y-3 text-xs shadow-xs",children:[e.jsxs("div",{className:"border-b border-[#c4c7c7]/60 pb-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between text-[11px] font-bold",children:[e.jsx("span",{className:"text-[#444748]",children:"Wait Mechanism"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[9px] font-black uppercase bg-[#1b1c19] text-white",children:"Auto-Waiting"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1.5 leading-relaxed",children:"Playwright checks element visibility, stability, and hit-target before dispatching actions. Eliminates arbitrary `sleep()` timeouts."})]}),e.jsxs("div",{className:"border-b border-[#c4c7c7]/60 pb-2.5",children:[e.jsxs("div",{className:"flex items-center justify-between text-[11px] font-bold",children:[e.jsx("span",{className:"text-[#444748]",children:"Architecture"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[9px] font-black uppercase bg-[#1b1c19] text-white",children:"Direct CDP Sockets"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1.5 leading-relaxed",children:"Bypasses HTTP JSON-Wire proxy latency. Tests run 3x to 5x faster with bi-directional event control."})]}),e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between text-[11px] font-bold",children:[e.jsx("span",{className:"text-[#444748]",children:"Network Interception"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[9px] font-black uppercase bg-[#1b1c19] text-white",children:"Native `page.route()`"})]}),e.jsx("p",{className:"text-[11px] text-[#444748] mt-1.5 leading-relaxed",children:"Mock API calls, abort heavy assets to speed up execution, and test server crashes on the fly."})]})]})]})]}),e.jsx("section",{className:"px-4 py-10 bg-[#f5f3ee] border-b border-[#c4c7c7] relative overflow-hidden",id:"mobile-comparison",children:e.jsxs("div",{className:"relative z-10",children:[e.jsxs("div",{className:"text-center mb-6",children:[e.jsx("span",{className:"text-[10px] font-mono font-bold uppercase tracking-wider text-[#1b1c19] bg-white border border-[#c4c7c7] px-2.5 py-0.5 rounded",children:"COMPETITIVE BENCHMARK"}),e.jsx("h2",{className:"text-xl font-black font-headings mt-2 text-[#1b1c19]",children:"Why PlaywrightPad Beats Alternatives"}),e.jsx("p",{className:"text-xs text-[#444748] mt-1 max-w-sm mx-auto",children:"Compare PlaywrightPad with official docs and local setups for automated browser testing."})]}),e.jsxs("div",{className:"space-y-3 mb-6",children:[e.jsxs("div",{className:"p-4 rounded-xl bg-white border border-[#c4c7c7] shadow-xs",children:[e.jsx("span",{className:"text-[9px] font-mono font-black uppercase text-[#9e3e4f] tracking-wider block mb-1",children:"AEO DIRECT DEFINITION"}),e.jsx("h3",{className:"text-sm font-black text-[#1b1c19] font-headings mb-1",children:"What is Playwright Pad?"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Playwright Pad is the #1 free online Playwright IDE, compiler, and practice website. Run and debug real Playwright tests in Chromium with zero installation, 4 real-world sandboxes, and an accredited SDET credential."})]}),e.jsxs("div",{className:"p-4 rounded-xl bg-white border border-[#c4c7c7] shadow-xs",children:[e.jsx("span",{className:"text-[9px] font-mono font-black uppercase text-[#9e3e4f] tracking-wider block mb-1",children:"CORE ADVANTAGE"}),e.jsx("h3",{className:"text-sm font-black text-[#1b1c19] font-headings mb-1",children:"Why Practice Online Instead of Local Setup?"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Skip downloading Node.js, CLI dependencies, and dummy apps. Playwright Pad provides instant in-browser test execution, built-in POM generation, and real-time selector testing on live sandboxes."})]})]}),e.jsxs("div",{className:"space-y-2 text-xs",children:[e.jsxs("div",{className:"p-3.5 rounded-lg bg-white border border-[#c4c7c7] flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"In-Browser CDP Execution"}),e.jsx("div",{className:"text-[10px] text-[#444748]",children:"Instant real Chromium runner"})]}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-900 font-mono",children:"0s Setup"})]}),e.jsxs("div",{className:"p-3.5 rounded-lg bg-white border border-[#c4c7c7] flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Live Realistic Sandboxes"}),e.jsx("div",{className:"text-[10px] text-[#444748]",children:"Banking, E-Commerce, Health"})]}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-900 font-mono",children:"4 Full Apps"})]}),e.jsxs("div",{className:"p-3.5 rounded-lg bg-white border border-[#c4c7c7] flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"POM & Selectors Hub"}),e.jsx("div",{className:"text-[10px] text-[#444748]",children:"One-click code & locator tools"})]}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-900 font-mono",children:"Built-In Free"})]}),e.jsxs("div",{className:"p-3.5 rounded-lg bg-white border border-[#c4c7c7] flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"300+ Interview Q&As"}),e.jsx("div",{className:"text-[10px] text-[#444748]",children:"Curated SDET interview questions"})]}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-bold bg-emerald-100 text-emerald-900 font-mono",children:"Included"})]})]})]})}),e.jsxs("section",{className:"px-4 py-10 bg-[#fbf9f4] border-b border-[#c4c7c7] relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:U,alt:"",role:"presentation",width:"800",height:"600",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-65 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#fbf9f4]/40 via-trans
20parent to-[#fbf9f4]/50"})]}),e.jsxs("div",{className:"relative z-10",children:[e.jsxs("div",{className:"text-center mb-5",children:[e.jsx("span",{className:"text-[10px] font-mono font-bold uppercase tracking-wider text-white bg-[#1b1c19] px-2 py-0.5 rounded",children:"FREQUENTLY ASKED QUESTIONS"}),e.jsx("h2",{className:"text-xl font-black font-headings mt-2 text-[#1b1c19]",children:"Everything You Need to Know"})]}),e.jsx("div",{className:"space-y-2",children:T.map((s,i)=>e.jsxs("div",{className:"rounded border border-[#c4c7c7] overflow-hidden bg-white/95 backdrop-blur-xs shadow-xs",children:[e.jsxs("button",{onClick:()=>S(p===i?null:i),className:"w-full p-3.5 text-left text-xs font-bold text-[#1b1c19] flex items-center justify-between gap-2 cursor-pointer",children:[e.jsx("span",{children:s.q}),e.jsx(H,{size:15,className:`text-[#444748] flex-shrink-0 transition-transform duration-200 ${p===i?"rotate-180":""}`})]}),p===i&&e.jsx("div",{className:"px-3.5 pb-3.5 pt-1 text-xs text-[#444748] leading-relaxed border-t border-[#c4c7c7]/50 bg-[#fbf9f4]",children:s.a})]},i))})]})]}),e.jsxs("section",{className:"px-4 py-12 text-center bg-[#1b1c19] text-white relative overflow-hidden border-t border-white/10",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:Q,alt:"",role:"presentation",width:"800",height:"600",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-30 mix-blend-screen"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#1b1c19]/80 via-transparent to-[#1b1c19]/80"})]}),e.jsxs("div",{className:"relative z-10",children:[e.jsx("div",{className:"w-10 h-10 rounded bg-[#9e3e4f] text-white flex items-center justify-center mx-auto mb-3 shadow-md font-bold",children:e.jsx(y,{size:20})}),e.jsx("h2",{className:"text-xl font-black font-headings text-white leading-tight",children:"Ready to Level Up Your QA Career?"}),e.jsx("p",{className:"text-xs text-white/70 mt-2 max-w-xs mx-auto leading-relaxed mb-5 font-mono",children:"Write tests on real sandboxes. Earn your accredited credential. Zero setup required."}),e.jsxs(r,{to:"/lobby?category=playwright",className:"w-full max-w-xs mx-auto py-3.5 px-6 rounded bg-[#9e3e4f] hover:bg-[#853443] text-white font-extrabold text-xs uppercase tracking-wider shadow-md transition-all flex items-center justify-center gap-2 no-underline cursor-pointer active:scale-95",children:[e.jsx("span",{children:"Start Practicing for Free"}),e.jsx(x,{size:15})]})]})]}),e.jsxs("div",{className:"fixed bottom-0 inset-x-0 bg-[#1b1c19]/95 backdrop-blur-md border-t border-white/10 px-4 py-2.5 flex items-center justify-between gap-3 z-40 shadow-2xl lg:hidden",children:[e.jsxs("div",{className:"flex flex-col",children:[e.jsxs("span",{className:"text-[11px] font-bold text-white leading-tight flex items-center gap-1.5 font-mono",children:[e.jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"}),"Playwright Practice & Cert"]}),e.jsx("span",{className:"text-[10px] text-white/60 font-mono",children:"100% In-Browser ⢠Free"})]}),e.jsxs(r,{to:"/lobby?category=playwright",className:"py-2 px-4 rounded bg-[#9e3e4f] text-white font-extrabold text-xs uppercase tracking-wider shadow-xs flex items-center gap-1.5 no-underline cursor-pointer active:scale-95 transition-transform",children:[e.jsx("span",{children:"Start Free"}),e.jsx(x,{size:13,strokeWidth:2.5})]})]})]})}const ie="/assets/live_preview_checkout-v3-BHeuZdhG.webp";function ne(){const[c,g]=a.useState("checkout"),[p,S]=a.useState(null),[m,l]=a.useState("pass"),[A,k]=a.useState(null),[j,v]=a.useState(!1),d=a.useRef(null),C=t=>{if(t&&t.preventDefault(),l("pass"),d.current){d.current.scrollIntoView({behavior:"smooth",block:"start"}),v(!0),setTimeout(()=>v(!1),2800);try{window.history.pushState(null,"","#certificate-section")}catch{}}};a.useEffect(()=>{const t=()=>{var I;window.location.hash==="#certificate-section"&&(l("pass"),(I=d.current)==null||I.scrollIntoView({behavior:"smooth",block:"start"}),v(!0),setTimeout(()=>v(!1),2800))},n=setTimeout(t,250);return window.addEventListener("hashchange",t),()=>{clearTimeout(n),window.removeEventListener("hashchange",t)}},[]);const[o,u]=a.useState(!1),[h,w]=a.useState(-1),[P,b]=a.useState(!1),f={checkout:{title:"E-Commerce Promo Engine",file:"tests/checkout.spec.ts",target:"QuickMart Sandbox v2",code:`import { test, expect } from '@playwright/test'; 21
22test('apply 50% promo code & assert cart total', async ({ page }) => { 23 await page.goto('/demo/shop'); 24 await page.getByTestId('add-item-1').click(); 25 await page.getByPlaceholder('Promo code').fill('SAVE50'); 26 await page.getByRole('button', { name: 'Apply' }).click(); 27 await expect(page.getByTestId('cart-total')).toHaveText('$25.00'); 28});`,steps:[{text:"Connecting to Chromium CDP headless session via WebSocket",time:"0.04s"},{text:'page.goto("/demo/shop") -> HTTP 200 OK (DOMContentLoaded in 42ms)',time:"0.16s"},{text:'Resolved locator getByTestId("add-item-1") -> Dispatched click event',time:"0.29s"},{text:'Filled promo input "SAVE50" -> Clicked button "Apply"',time:"0.41s"},{text:'Assertion: expect(cart-total).toHaveText("$25.00") -> PASSED in 11ms',time:"0.52s"}]},auth:{title:"2FA Auth & Session State",file:"tests/session.spec.ts",target:"Apex Bank Portal",code:`import { test, expect } from '@playwright/test'; 29 30test('authenticate 2FA & save storageState', async ({ page, context }) => { 31 await page.goto('/demo/login'); 32 await page.getByLabel('Work Email').fill('[email protected]'); 33 await page.getByRole('button', { name: 'Authenticate' }).click(); 34 await context.storageState({ path: 'state.json' }); 35 await expect(page.getByTestId('user-badge')).toBeVisible(); 36});`,steps:[{text:"Spawning isolated browser context (Zero storage pollution)",time:"0.03s"},{text:'page.goto("/demo/login") -> TLS Handshake & DOM ready',time:"0.14s"},{text:"Filled credentials and dispatched login action",time:"0.31s"},{text:"Extracted encrypted session cookie into state.json storage",time:"0.43s"},{text:"Assertion: expect(user-badge).toBeVisible() -> PASSED",time:"0.50s"}]},mocking:{title:"Stripe API Route Interception",file:"tests/payment-mock.spec.ts",target:"SaaS Billing Module",code:`import { test, expect } from '@playwright/test'; 37 38test('mock payment failure webhook', async ({ page }) => { 39 await page.route('**/v1/charges', route => { 40 route.fulfill({ status: 402, body: JSON.stringify({ error: 'card_declined' }) }); 41 }); 42 await page.goto('/checkout'); 43 await page.getByRole('button', { name: 'Pay Now' }).click(); 44 await expect(page.getByText('Card Declined')).toBeVisible(); 45});`,steps:[{text:"Registered network route interception **/v1/charges",time:"0.02s"},{text:"Navigated to checkout and triggered payment transaction",time:"0.18s"},{text:"Intercepted POST /v1/charges -> Injected HTTP 402 stub payload",time:"0.33s"},{text:'Assertion: expect("Card Declined").toBeVisible() -> PASSED',time:"0.47s"}]}}[c],T=()=>{if(o)return;u(!0),b(!1),w(0);const t=f.steps.length;let n=0;const I=setInterval(()=>{n++,n<t?w(n):(clearInterval(I),w(t-1),b(!0),u(!1))},400)},s=t=>{g(t),u(!1),b(!1),w(-1)},i=[{q:"Do I need to install Node.js, npm, or VS Code on my machine?",a:"Zero installation required. Playwright Pad runs authentic browser instances with Playwright pre-installed in the cloud and directly in your browser. You can write, execute, and debug real tests on your laptop immediately without environment conflicts."},{q:"How does the Playwright Certification work?",a:"Unlike trivia-based multiple-choice quizzes, our certification tests practical hands-on capability. You complete real automation challenges (locating dynamic elements, eliminating flaky timeouts, and building Page Object Models). Once your test suite passes automated validation, your official digital certificate is issued instantly."},{q:"Can I add this certificate to my LinkedIn profile and resume?",a:"Yes! Every certificate includes a unique cryptographic verification ID and permanent URL that hiring managers and recruiters can click to verify your skill benchmarks and completed projects."},{q:"I have only done Manual Testing or Selenium. Is this right for me?",a:"Yes, exactly for you. The curriculum starts with the fundamentals of Playwright (how modern locators and auto-waiting eliminate flaky tests) and guides you step-by-step into enterprise SDET architecture."},{q:"Is it really free to start?",a:"Yes! Core learning tracks, interactive exercises, sandboxes, and foundational challenges are 100% free with no credit card required."},{q:"Does Playwright Pad support both JavaScript and TypeScript?",a:"Yes. Both TypeScript and JavaScript are first-class citizens. You can choose your preferred language for drills, IDE sessions, and certification asse
45ssments."}];return e.jsxs("div",{className:"w-full bg-[#fbf9f4] text-[#1b1c19] overflow-x-hidden font-sans select-none antialiased",children:[e.jsx("div",{className:"bg-[#1b1c19] text-white px-6 py-2.5 text-xs font-mono border-b border-white/10 flex items-center justify-between",children:e.jsxs("div",{className:"max-w-[1400px] w-full mx-auto flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-emerald-400 animate-pulse flex-shrink-0"}),e.jsx("span",{className:"text-white font-black tracking-wider uppercase",children:"PLAYWRIGHT WORKSTATION"}),e.jsx("span",{className:"text-white/30",children:"|"}),e.jsx("span",{className:"text-white/80",children:"v1.44 CDP Engine"}),e.jsx("span",{className:"text-white/30",children:"|"}),e.jsx("span",{className:"text-white/60",children:"Chromium Headless & Cloud VM"})]}),e.jsxs("div",{className:"flex items-center gap-3 text-xs",children:[e.jsx("span",{className:"px-2.5 py-0.5 rounded bg-white text-[#1b1c19] font-black text-[10px] uppercase tracking-wide",children:"0s Local Config"}),e.jsx("span",{className:"text-white/60",children:"50+ Live Drills"}),e.jsx("span",{className:"text-white/30",children:"â¢"}),e.jsx("span",{className:"text-emerald-400 font-bold",children:"100% Free to Start"})]})]})}),e.jsxs("section",{className:"relative w-full pt-12 pb-16 px-8 overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:V,alt:"",role:"presentation",width:"1920",height:"1080",fetchPriority:"high",loading:"eager",decoding:"async",className:"w-full h-full object-cover object-center lg:object-[60%_center] opacity-60 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-[#fbf9f4]/85 via-[#fbf9f4]/40 to-transparent"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#fbf9f4]/60"})]}),e.jsx("div",{className:"absolute inset-0 testing-grid-bg opacity-20 pointer-events-none z-0"}),e.jsxs("div",{className:"max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10",children:[e.jsxs("div",{className:"lg:col-span-6 space-y-6",children:[e.jsxs("div",{className:"inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-[#00201c] text-white text-xs font-mono uppercase tracking-wider shadow-xs",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-emerald-400"}),e.jsx("span",{children:"PLAYWRIGHT PRACTICE & CERTIFICATION PLATFORM"})]}),e.jsx("h1",{className:"text-4xl xl:text-5xl font-black tracking-tight leading-[1.12] text-[#1b1c19] font-headings",children:"Master Playwright on the #1 Practice Website"}),e.jsx("p",{className:"text-base text-[#444748] leading-relaxed max-w-xl font-normal",children:"The browser-first learning and execution platform for QA engineers and SDETs. Write, run, and debug real tests in live sandboxes with zero local configurationâthen validate your capability with an accredited certificate."}),e.jsxs("div",{className:"flex items-center gap-4 pt-2",children:[e.jsxs(r,{to:"/lobby?category=playwright",className:"px-8 py-4 rounded bg-[#1b1c19] hover:bg-black text-white font-black text-xs uppercase tracking-wider flex items-center gap-2.5 shadow-md active:scale-[0.98] transition-all no-underline cursor-pointer",children:[e.jsx("span",{children:"Start Practicing â Free"}),e.jsx(x,{size:16})]}),e.jsxs("button",{type:"button",onClick:C,className:"px-8 py-4 rounded bg-white hover:bg-[#f5f3ee] border-2 border-[#1b1c19] text-[#1b1c19] font-black text-xs uppercase tracking-wider flex items-center gap-2 transition-all cursor-pointer shadow-xs active:scale-[0.98]",children:[e.jsx(D,{size:16,className:"text-[#9e3e4f]"}),e.jsx("span",{children:"Inspect Official Certificate"})]})]}),e.jsxs("div",{className:"grid grid-cols-4 gap-3 pt-6 border-t border-[#c4c7c7]/60",children:[e.jsxs("div",{className:"bg-white p-3.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-xl font-black text-[#1b1c19] font-headings",children:"0 min"}),e.jsx("div",{className:"text-[10px] font-bold uppercase text-[#444748] mt-0.5",children:"Setup Time"})]}),e.jsxs("div",{className:"bg-white p-3.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-xl font-black text-[#1b1c19] font-headings",children:"50+"}),e.jsx("div",{className:"text-[10px] font-bold uppercase text-[#444748] mt-0.5",children:"Live Drills"})]}),e.jsxs("div",{className:"bg-white p-3.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-xl font-black text-[#9e3e4f] font-headings",children:"100%"}),e.jsx("div",{className:"text-[10px] font-bold uppercase text-[#444748] mt-0.5",children:"In-Browser"})]}),e.jsxs("div",{className:"bg-white p-3.5 rounded border border-[#c4c7c7] shadow-xs text-center",children:[e.jsx("div",{className:"text-xl font-black text-[#1b1c19] font-headings",children:"8,000+"}),e.jsx("div",{className:"text-[10px] font-bold uppercase text-[#444748] mt-0.5",children:"Engineers"})]})]})]}),e.jsxs("div",{className:"lg:col-span-6 relative",children:[e.jsxs("div",{className:"rounded-xl bg-[#323233] border border-[#454545] shadow-2xl overflow-hidden",children:[e.jsxs("div",{className:"px-4 py-2.5 bg-[#2a2a2b] flex items-center justify-between border-b border-[#454545]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#ff5f56]"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#ffbd2e]"}),e.jsx("div",{className:"w-3 h-3 rounded-full bg-[#27c93f]"}),e.jsx("span",{className:"text-xs font-mono text-white/60 ml-3",children:f.file})]}),e.jsx("span",{className:"text-xs font-mono text-white/70",children:f.target})]}),e.jsxs("div",{className:"px-4 py-2 bg-[#252526] border-b border-[#3e3e42] flex items-center gap-2",children:[e.jsx("button",{onClick:()=>s("checkout"),className:`px-3 py-1 rounded text-xs font-mono font-bold transition-all cursor-pointer ${c==="checkout"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70 hover:text-white"}`,children:"01. Checkout Promo"}),e.jsx("button",{onClick:()=>s("auth"),className:`px-3 py-1 rounded text-xs font-mono font-bold transition-all cursor-pointer ${c==="auth"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70 hover:text-white"}`,children:"02. 2FA StorageState"}),e.jsx("button",{onClick:()=>s("mocking"),className:`px-3 py-1 rounded text-xs font-mono font-bold transition-all cursor-pointer ${c==="mocking"?"bg-white text-[#1b1c19] shadow-xs font-black":"bg-white/10 text-white/70 hover:text-white"}`,children:"03. Network Intercept"})]}),e.jsx("pre",{className:"p-4 text-xs font-mono leading-relaxed text-zinc-200 overflow-x-auto bg-[#1e1e1e] min-h-[160px]",children:e.jsx("code",{children:f.code})}),e.jsxs("div",{className:"border-t border-[#3a3a3c] bg-[#141414] p-4 text-xs font-mono",children:[e.jsxs("div",{className:"flex items-center justify-between text-white/50 uppercase tracking-wider mb-2 font-bold text-[11px]",children:[e.jsx("span",{children:"Terminal Execution Log"}),e.jsx("span",{children:P?"Exit Status: 0 OK":o?"Executing CDP...":"Ready"})]}),h===-1&&!P&&e.jsxs("div",{className:"text-white/50 py-3 flex items-center gap-2",children:[e.jsx("span",{className:"w-2 h-2 rounded-full bg-white/40"}
45),e.jsx("span",{children:"Click âRun Scriptâ to simulate live Chromium CDP test execution."})]}),h>=0&&e.jsx("div",{className:"space-y-1.5 py-1",children:f.steps.slice(0,h+1).map((t,n)=>e.jsxs("div",{className:`flex items-start gap-2.5 transition-all ${n===h&&o?"text-amber-300 font-bold":"text-emerald-400"}`,children:[e.jsxs("span",{className:"text-white/40 select-none",children:["[",t.time,"]"]}),e.jsxs("span",{children:[n===h&&o?"ⶠ":"â ",t.text]})]},n))}),P&&e.jsxs("div",{className:"mt-3 pt-2.5 border-t border-white/10 flex items-center justify-between text-emerald-400 font-bold",children:[e.jsxs("span",{className:"flex items-center gap-1.5 text-white",children:[e.jsx(N,{size:15,className:"text-emerald-400"}),e.jsx("span",{children:"1 test passed (all assertions verified in real Chromium)"})]}),e.jsx("span",{className:"px-2.5 py-0.5 rounded text-[10px] font-black uppercase bg-emerald-600 text-white shadow-xs",children:"PASSED"})]})]}),e.jsxs("div",{className:"p-3.5 bg-[#2a2a2b] border-t border-[#454545] flex items-center justify-between",children:[e.jsx("span",{className:"text-xs font-mono text-white/60",children:"Engine: Native CDP WebAssembly & Cloud VM"}),e.jsxs("button",{onClick:T,disabled:o,className:"px-6 py-2.5 rounded bg-[#9e3e4f] hover:bg-[#853443] disabled:opacity-50 text-white font-headings font-black text-xs uppercase tracking-wider flex items-center gap-2 shadow-md active:scale-95 transition-all cursor-pointer",children:[e.jsx(M,{size:14,fill:"white"}),e.jsx("span",{children:o?"Running CDP Spec...":P?"Re-Run Test":"Run Script"})]})]})]}),e.jsxs("div",{className:"absolute -right-6 -bottom-8 bg-white p-3 rounded-xl border border-[#c4c7c7] shadow-2xl hidden xl:block select-none pointer-events-none z-20",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3 mb-2 px-0.5",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-2 h-2 rounded-full bg-rose-600 animate-pulse"}),e.jsx("span",{className:"text-[10px] font-black uppercase tracking-wider text-[#1b1c19]",children:"LIVE PREVIEW"})]}),e.jsx("span",{className:"text-[9px] font-mono font-bold text-[#444748] bg-[#f5f3ee] px-1.5 py-0.5 rounded border border-[#c4c7c7]",children:"Chromium Target"})]}),e.jsx("div",{className:"w-64 bg-white rounded-lg overflow-hidden border border-[#c4c7c7] shadow-xs relative",children:e.jsx("img",{src:ie,alt:"QuickMart Live Browser Automation Preview",width:"256",height:"160",decoding:"async",className:"w-full h-auto object-contain block",loading:"lazy"})})]})]})]})]}),e.jsx(q,{}),e.jsxs("section",{id:"certificate-section",ref:d,className:"py-16 px-8 bg-white border-y border-[#c4c7c7] scroll-mt-20 relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:K,alt:"",role:"presentation",width:"1920",height:"1080",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-25 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-white/70 via-transparent to-white/70"})]}),e.jsx("div",{className:"max-w-[1400px] mx-auto relative z-10",children:e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-12 gap-12 items-center",children:[e.jsxs("div",{className:"lg:col-span-6 space-y-6",children:[e.jsxs("div",{className:"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#1b1c19] text-white text-xs font-mono uppercase tracking-wider",children:[e.jsx(y,{size:14,className:"text-white"}),e.jsx("span",{children:"OFFICIAL INDUSTRY ACCREDITATION"})]}),e.jsx("h2",{className:"text-3xl xl:text-4xl font-black font-headings text-[#1b1c19]",children:"Playwright Certified SDET Credential"}),e.jsx("p",{className:"text-sm text-[#444748] leading-relaxed",children:"Not a multiple-choice quiz. An accredited practical credential proving your ability to automate dynamic web applications, eliminate flaky timeouts, and design enterprise Page Object Models."}),e.jsxs("div",{className:"flex rounded bg-[#f5f3ee] p-1 border border-[#c4c7c7] max-w-sm",children:[e.jsx("button",{onClick:()=>l("pass"),className:`flex-1 py-2 text-xs font-bold rounded transition-all cursor-pointer ${m==="pass"?"bg-white text-[#1b1c19] shadow-xs":"text-[#444748]"}`,children:"Official Certificate"}),e.jsx("button",{onClick:()=>l("syllabus"),className:`flex-1 py-2 text-xs font-bold rounded transition-all cursor-pointer ${m==="syllabus"?"bg-white text-[#1b1c19] shadow-xs":"text-[#444748]"}`,children:"Exam Benchmarks"})]}),m==="pass"?e.jsxs("div",{className:"space-y-3 text-sm text-[#444748] pt-2",children:[e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx(N,{size:18,className:"text-[#9e3e4f] flex-shrink-0"}),e.jsxs("span",{children:["Direct ",e.jsx("strong",{children:"Add to LinkedIn Profile"})," credential integration"]})]}),e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx(N,{size:18,className:"text-[#9e3e4f] flex-shrink-0"}),e.jsxs("span",{children:["Permanent shareable cryptographic verification ID (",e.jsx("code",{children:"#PLW-2026-QA-8492"}),")"]})]}),e.jsxs("div",{className:"flex items-center gap-2.5",children:[e.jsx(N,{size:18,className:"text-[#9e3e4f] flex-shrink-0"}),e.jsx("span",{children:"Endorsed proof of solving real-world broken test scenarios"})]})]}):e.jsxs("div",{className:"space-y-2.5 text-xs text-[#1b1c19] font-mono pt-2",children:[e.jsxs("div",{className:"p-3 rounded bg-[#fbf9f4] border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Benchmark 1: Dynamic E-Commerce Flow"}),e.jsx("div",{className:"text-xs text-[#444748] mt-0.5",children:"Automate c
45art synchronization, promo coupon engines, and payment state."})]}),e.jsxs("div",{className:"p-3 rounded bg-[#fbf9f4] border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Benchmark 2: Flaky Async Resolution"}),e.jsx("div",{className:"text-xs text-[#444748] mt-0.5",children:"Eliminate brittle sleeps with Playwright auto-waiting assertions on dynamic tables."})]}),e.jsxs("div",{className:"p-3 rounded bg-[#fbf9f4] border border-[#c4c7c7]",children:[e.jsx("div",{className:"font-bold text-[#1b1c19]",children:"Benchmark 3: Route Interception & Mocking"}),e.jsx("div",{className:"text-xs text-[#444748] mt-0.5",children:"Intercept backend API routes and mock 402/500 gateway errors without server changes."})]})]}),e.jsx("div",{className:"pt-2",children:e.jsxs(r,{to:"/tracks",className:"px-8 py-4 rounded bg-[#1b1c19] hover:bg-black text-white font-black text-xs uppercase tracking-wider inline-flex items-center gap-2 shadow-md no-underline cursor-pointer transition-all",children:[e.jsx("span",{children:"Start Practice Towards Certificate"}),e.jsx(x,{size:16})]})})]}),e.jsx("div",{className:"lg:col-span-6",children:e.jsx("div",{className:`transition-all duration-700 rounded-2xl ${j?"ring-4 ring-[#c5a059] shadow-[0_0_40px_rgba(197,160,89,0.5)] scale-[1.02]":""}`,children:e.jsx($,{})})})]})})]}),e.jsxs("section",{className:"py-16 px-8 relative overflow-hidden bg-[#fbf9f4] border-b border-[#c4c7c7]",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:_,alt:"",role:"presentation",width:"1920",height:"1080",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-25 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#fbf9f4]/60 via-trans
45parent to-[#fbf9f4]/60"})]}),e.jsxs("div",{className:"max-w-[1400px] mx-auto relative z-10",children:[e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("span",{className:"text-xs font-mono font-bold uppercase tracking-wider text-white bg-[#1b1c19] px-3 py-1 rounded",children:"TARGET LAB ENVIRONMENTS"}),e.jsx("h2",{className:"text-3xl font-black font-headings mt-3 text-[#1b1c19]",children:"Practice on Live Realistic Sandboxes"}),e.jsx("p",{className:"text-sm text-[#444748] mt-1.5 max-w-xl mx-auto",children:"Not toy âhello worldâ forms. Test against real frontend architectures built specifically for hands-on automation challenges."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6",children:[e.jsxs(r,{to:"/sandbox/ecommerce",className:"p-6 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] hover:border-[#1b1c19] transition-all no-underline text-inherit flex flex-col justify-between group shadow-xs hover:-translate-y-1",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-12 h-12 rounded bg-[#1b1c19] text-white flex items-center justify-center shadow-xs",children:e.jsx(B,{size:22})}),e.jsx("span",{className:"text-xs font-mono font-bold bg-[#fbf9f4] text-[#1b1c19] border border-[#c4c7c7] px-2 py-0.5 rounded",children:"14 Drills"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"QuickMart E-Commerce"}),e.jsx("p",{className:"text-xs text-[#444748] mt-2 leading-relaxed",children:"Cart synchronization, promo code engines, out-of-stock badges, and multi-step payment checkout flows."})]}),e.jsxs("div",{className:"text-xs font-bold text-[#9e3e4f] flex items-center gap-1 mt-4 group-hover:translate-x-1 transition-transform",children:[e.jsx("span",{children:"Open Sandbox"}),e.jsx(x,{size:14})]})]}),e.jsxs(r,{to:"/sandbox/banking",className:"p-6 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] hover:border-[#1b1c19] transition-all no-underline text-inherit flex flex-col justify-between group shadow-xs hover:-translate-y-1",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-12 h-12 rounded bg-[#1b1c19] text-white flex items-center justify-center shadow-xs",children:e.jsx(O,{size:22})}),e.jsx("span",{className:"text-xs font-mono font-bold bg-[#fbf9f4] text-[#1b1c19] border border-[#c4c7c7] px-2 py-0.5 rounded",children:"16 Drills"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"Apex FinBank Portal"}),e.jsx("p",{className:"text-xs text-[#444748] mt-2 leading-relaxed",children:"2FA SMS tokens, transaction data tables, dynamic date filters, and PDF statement downloads."})]}),e.jsxs("div",{className:"text-xs font-bold text-[#9e3e4f] flex items-center gap-1 mt-4 group-hover:translate-x-1 transition-transform",children:[e.jsx("span",{children:"Open Sandbox"}),e.jsx(x,{size:14})]})]}),e.jsxs(r,{to:"/sandbox/healthcare",className:"p-6 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] hover:border-[#1b1c19] transition-all no-underline text-inherit flex flex-col justify-between group shadow-xs hover:-translate-y-1",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-12 h-12 rounded bg-[#1b1c19] text-white flex items-center justify-center shadow-xs",children:e.jsx(W,{size:22})}),e.jsx("span",{className:"text-xs font-mono font-bold bg-[#fbf9f4] text-[#1b1c19] border border-[#c4c7c7] px-2 py-0.5 rounded",children:"10 Drills"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"CarePulse Healthcare"}),e.jsx("p",{className:"text-xs text-[#444748] mt-2 leading-relaxed",children:"Interactive appointment calendars, doctor slot selection, file upload reports, and modal dialogs."})]}),e.jsxs("div",{className:"text-xs font-bold text-[#9e3e4f] flex items-center gap-1 mt-4 group-hover:translate-x-1 transition-transform",children:[e.jsx("span",{children:"Open Sandbox"}),e.jsx(x,{size:14})]})]}),e.jsxs(r,{to:"/sandbox/saas",className:"p-6 rounded bg-white hover:bg-[#f5f3ee] border border-[#c4c7c7] hover:border-[#1b1c19] transition-all no-underline text-inherit flex flex-col justify-between group shadow-xs hover:-translate-y-1",children:[e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-12 h-12 rounded bg-[#1b1c19] text-white flex items-center justify-center shadow-xs",children:e.jsx(F,{size:22})}),e.jsx("span",{className:"text-xs font-mono font-bold bg-[#fbf9f4] text-[#1b1c19] border border-[#c4c7c7] px-2 py-0.5 rounded",children:"12 Drills"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] uppercase tracking-wide font-headings",children:"CloudMetrics Admin"}),e.jsx("p",{className:"text-xs text-[#444748] mt-2 leading-relaxed",children:"Virtual infinite scroll tables, dark mode toggle assertions, user permissions, and CSV bulk exports."})]}),e.jsxs("div",{className:"text-xs font-bold text-[#9e3e4f] flex items-center gap-1 mt-4 group-hover:translate-x-1 transition-transform",children:[e.jsx("span",{children:"Open Sandbox"}),e.jsx(x,{size:14})]})]})]})]})]}),e.jsxs("section",{className:"py-16 px-8 bg-white border-y border-[#c4c7c7] relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:Y,alt:"",role:"presentation",width:"1920",height:"1080",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-25 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-white/70 via-trans
45parent to-white/70"})]}),e.jsxs("div",{className:"max-w-[1400px] mx-auto relative z-10",children:[e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("span",{className:"text-xs font-mono font-bold uppercase tracking-wider text-[#1b1c19] bg-[#f5f3ee] border border-[#c4c7c7] px-3 py-1 rounded",children:"FRAMEWORK BENCHMARK"}),e.jsx("h2",{className:"text-3xl font-black font-headings mt-3 text-[#1b1c19]",children:"Why Teams Choose Playwright Over Selenium"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6",children:[e.jsxs("div",{className:"bg-[#fbf9f4] p-6 rounded border border-[#c4c7c7] space-y-3 shadow-xs",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-xs font-mono uppercase text-[#444748] font-bold",children:"Wait Mechanism"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-black uppercase bg-[#1b1c19] text-white",children:"Auto-Waiting"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19]",children:"Zero Flakiness Out-of-the-Box"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Playwright checks element visibility, stability, and hit-target before dispatching actions. Eliminates arbitrary `sleep()` loops and explicit wait boilerplate."})]}),e.jsxs("div",{className:"bg-[#fbf9f4] p-6 rounded border border-[#c4c7c7] space-y-3 shadow-xs",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-xs font-mono uppercase text-[#444748] font-bold",children:"Architecture"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-black uppercase bg-[#1b1c19] text-white",children:"Direct CDP Sockets"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19]",children:"3x to 5x Faster Execution"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Bypasses HTTP JSON-Wire proxy latency. Tests communicate directly over persistent WebSocket connections with bi-directional event control."})]}),e.jsxs("div",{className:"bg-[#fbf9f4] p-6 rounded border border-[#c4c7c7] space-y-3 shadow-xs",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-xs font-mono uppercase text-[#444748] font-bold",children:"Network Control"}),e.jsx("span",{className:"px-2 py-0.5 rounded text-[10px] font-black uppercase bg-[#1b1c19] text-white",children:"Native `page.route()`"})]}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19]",children:"API Mocking & Interception"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Mock backend API calls, abort heavy media assets to speed up tests, and test server crashes on the fly without proxy configurations."})]})]})]})]}),e.jsx("section",{className:"py-16 px-8 bg-[#f5f3ee] border-b border-[#c4c7c7] relative overflow-hidden",id:"competitor-comparison",children:e.jsxs("div",{className:"max-w-[1400px] mx-auto relative z-10",children:[e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("span",{className:"text-xs font-mono font-bold uppercase tracking-wider text-[#1b1c19] bg-white border border-[#c4c7c7] px-3 py-1 rounded",children:"COMPETITIVE BENCHMARK MATRIX"}),e.jsx("h2",{className:"text-3xl font-black font-headings mt-3 text-[#1b1c19]",children:"Why PlaywrightPad Outperforms Other Practice Environments"}),e.jsx("p",{className:"text-sm text-[#444748] mt-1.5 max-w-2xl mx-auto",children:"Compare PlaywrightPad against official docs, local IDE configurations, and generic sandbox runners. Built specifically for SDETs who demand zero setup and authentic browser execution."})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-5xl mx-auto",children:[e.jsxs("div",{className:"p-6 rounded-xl bg-white border border-[#c4c7c7] shadow-xs space-y-2",children:[e.jsx("span",{className:"text-[10px] font-mono font-black uppercase text-[#9e3e4f] tracking-wider",children:"DIRECT DEFINITION (AEO)"}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] font-headings",children:"What is Playwright Pad?"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Playwright Pad is the #1 free browser-based Playwright online IDE, compiler, and practice platform for QA Automation Engineers and SDETs. It lets you write, run, and debug real Microsoft Playwright tests in Chromium browser environments with zero installation, pre-wired with live industry sandboxes and accredited certification benchmarks."})]}),e.jsxs("div",{className:"p-6 rounded-xl bg-white border border-[#c4c7c7] shadow-xs space-y-2",children:[e.jsx("span",{className:"text-[10px] font-mono font-black uppercase text-[#9e3e4f] tracking-wider",children:"LEARNING ADVANTAGE"}),e.jsx("h3",{className:"text-base font-black text-[#1b1c19] font-headings",children:"Why Practice Online Instead of Local Setup?"}),e.jsx("p",{className:"text-xs text-[#444748] leading-relaxed",children:"Local setups require Node.js, CLI dependencies, browser binary downloads, and building dummy websites to automate. Playwright Pad eliminates all environment setup friction with instant in-browser Chromium execution, live sandboxes (E-Commerce, Banking, Healthcare), an automated POM generator, and real-time selector testing."})]})]}),e.jsx("div",{className:"overflow-x-auto rounded-xl border border-[#c4c7c7] bg-white shadow-xs max-w-5xl mx-auto",children:e.jsxs("table",{className:"w-full text-left text-xs border-collapse",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-[#c4c7c7] bg-[#fbf9f4]",children:[e.jsx("th",{scope:"col",className:"p-4 font-black text-[#1b1c19] uppercase tracking-wider text-[11px] w-1/3",children:"Feature / Capability"}),e.jsx("th",{scope:"col",className:"p-4 font-black text-white bg-[#1b1c19] uppercase tracking-wider text-[11px] text-center w-1/4",children:e.jsxs("span",{className:"inline-flex items-center gap-1.5 justify-center",children:[e.jsx(se,{size:13,className:"text-amber-300"}),"PlaywrightPad"]})}),e.jsx("th",{scope:"col",className:"p-4 font-bold text-[#444748] uppercase tracking-wider text-[11px] text-center w-1/5",children:"Official Docs"}),e.jsx("th",{scope:"col",className:"p-4 font-bold text-[#444748] uppercase tracking-wider text-[11px] text-center w-1/5",children:"Local VS Code"})]})}),e.jsxs("tbody",{className:"divide-y divide-[#c4c7c7]/60",children:[e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["In-Browser Test Execution",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"Real Chromium CDP WebSocket execution"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â Instant (0s Setup)"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None (Docs only)"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Requires Node & CLI"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["Realistic Multi-Page Sandboxes",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"E-Commerce, Banking 2FA, Healthcare & SaaS"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â 4 Live Sandboxes"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Build / host yourself"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["Automated POM Generator",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"Scans HTML DOM into Page Object Model classes"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â Built-In 1-Click"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Manual coding"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["Selectors Hub & Live Locator Tester",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"Real-time getByRole, CSS, and XPath evaluator"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â Built-In Live Playpen"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Inspector only"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Exter
45nal plugins"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["300+ SDET Interview Question Bank",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"Curated with code solutions & interactive quiz"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â 300+ Verified Q&As"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["Official Accredited Credential",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"Verifiable certificate with LinkedIn 1-click addition"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â Certified SDET Credential"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"â None"})]}),e.jsxs("tr",{className:"hover:bg-[#fbf9f4]/50 transition-colors",children:[e.jsxs("th",{scope:"row",className:"p-4 font-bold text-[#1b1c19]",children:["Language Support",e.jsx("span",{className:"block text-[11px] font-normal text-[#444748] mt-0.5",children:"TypeScript & JavaScript interactive tracks"})]}),e.jsx("td",{className:"p-4 text-center bg-[#1b1c19]/5 font-black text-emerald-700",children:e.jsx("span",{className:"inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2 py-0.5 rounded font-mono font-bold",children:"â TypeScript + JS"})}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Docs for all"}),e.jsx("td",{className:"p-4 text-center text-[#444748]",children:"Depends on project"})]})]})]})})]})}),e.jsxs("section",{className:"py-20 px-8 w-full bg-[#fbf9f4] border-t border-[#c4c7c7] relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:U,alt:"",role:"presentation",width:"1920",height:"1080",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-65 mix-blend-multiply"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#fbf9f4]/40 via-transparent to-[#fbf9f4]/50"})]}),e.jsxs("div",{className:"max-w-[1400px] mx-auto relative z-10",children:[e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("span",{className:"text-xs font-mono font-bold uppercase tracking-wider text-white bg-[#1b1c19] px-3 py-1 rounded",children:"FREQUENTLY ASKED QUESTIONS"}),e.jsx("h2",{className:"text-3xl font-black font-headings mt-3 text-[#1b1c19]",children:"Everything You Need to Know"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 max-w-5xl mx-auto",children:i.map((t,n)=>e.jsxs("div",{className:"rounded border border-[#c4c7c7] overflow-hidden bg-white/95 backdrop-blur-xs shadow-xs",children:[e.jsxs("button",{onClick:()=>S(p===n?null:n),className:"w-full p-4 text-left text-sm font-bold text-[#1b1c19] flex items-center justify-between gap-3 cursor-pointer",children:[e.jsx("span",{children:t.q}),e.jsx(H,{size:16,className:`text-[#444748] flex-shrink-0 transition-transform duration-200 ${p===n?"rotate-180":""}`})]}),p===n&&e.jsx("div",{className:"px-4 pb-4 pt-1 text-xs text-[#444748] leading-relaxed border-t border-[#c4c7c7]/40 bg-[#fbf9f4]",children:t.a})]},n))})]})]}),e.jsxs("section",{className:"py-20 px-8 bg-[#1b1c19] text-white relative overflow-hidden border-t border-white/10",children:[e.jsxs("div",{className:"absolute inset-0 pointer-events-none select-none overflow-hidden z-0",children:[e.jsx("img",{src:Q,alt:"",role:"presentation",width:"1920",height:"1080",loading:"lazy",decoding:"async",className:"w-full h-full object-cover object-center opacity-30 mix-blend-screen"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-b from-[#1b1c19]/80 via-trans
45parent to-[#1b1c19]/80"})]}),e.jsxs("div",{className:"max-w-[1000px] mx-auto text-center space-y-6 relative z-10",children:[e.jsx("div",{className:"w-12 h-12 rounded bg-[#9e3e4f] text-white flex items-center justify-center mx-auto shadow-md",children:e.jsx(y,{size:24})}),e.jsx("h2",{className:"text-3xl xl:text-4xl font-black font-headings text-white leading-tight",children:"Ready to Level Up Your QA Automation Career?"}),e.jsx("p",{className:"text-sm text-white/70 max-w-xl mx-auto leading-relaxed font-mono",children:"Write tests against real sandboxes. Earn your accredited credential. Zero setup required."}),e.jsx("div",{className:"pt-2",children:e.jsxs(r,{to:"/lobby?category=playwright",className:"px-10 py-4 rounded bg-[#9e3e4f] hover:bg-[#853443] text-white font-extrabold text-xs uppercase tracking-wider shadow-lg transition-all inline-flex items-center gap-2 no-underline cursor-pointer active:scale-95",children:[e.jsx("span",{children:"Start Practicing for Free"}),e.jsx(x,{size:16})]})}),e.jsxs("div",{className:"flex items-center justify-center gap-6 pt-4 text-xs font-mono text-white/60",children:[e.jsx("span",{children:"â 100% Free to Start"}),e.jsx("span",{children:"â¢"}),e.jsx("span",{children:"â Real Chromium Sandbox"}),e.jsx("span",{children:"â¢"}),e.jsx("span",{children:"â Accredited SDET Credential"})]})]})]})]})}function ge(){const{t:c}=Z(),g={"@context":"https://schema.org","@graph":[{"@type":"SoftwareApplication","@id":R("/#software"),name:"Playwright Pad",applicationCategory:"DeveloperApplication",operatingSystem:"Windows, macOS, Linux",offers:{"@type":"Offer",price:"0.00",priceCurrency:"USD"},aggregateRating:{"@type":"AggregateRating",ratingValue:"4.8",ratingCount:"2400",bestRating:"5"},description:"Write, debug, and run Playwright scripts directly inside a web interface. Practice on real application sandboxes with in-browser test execution and earn accredited SDET credentials."},{"@type":"FAQPage","@id":R("/#faq"),mainEntity:[{"@type":"Question",name:"What is Playwright Pad?",acceptedAnswer:{"@type":"Answer",text:"Playwright Pad is an interactive browser-first learning platform designed to help developers and QA engineers master the Playwright automation framework without any local setup."}},{"@type":"Question",name:"How to practice Playwright test automation online?",acceptedAnswer:{"@type":"Answer",text:`Simply click "Start Practicing" on our hero section. You'll be granted access to a real browser instance running inside our IDE sandbox where you can write and run tests immediately.`}},{"@type":"Question",name:"Is Playwright free to learn and practice?",acceptedAnswer:{"@type":"Answer",text:"Yes! Our core learning tracks and practice sandbox are 100% free for individual learners."}},{"@type":"Question",name:"What is Playwright vs Selenium â which one should I learn?",acceptedAnswer:{"@type":"Answer",text:"Playwright is a modern browser automation framework from Microsoft that supports Chromium, Firefox, and WebKit with a single API. Unlike Selenium, Playwright features built-in auto-waiting, network interception, and multi-tab support out of the box. For new QA engineers, we recommend starting with Playwright as it has a gentler learning curve and more reliable test execution."}},{"@type":"Question",name:"How do I write my first Playwright test script?",acceptedAnswer:{"@type":"Answer",text:"Start by navigating to our Playwright Tutorial page. You'll learn the basic structure of a Playwright test using the test() function, how to navigate to URLs with page.goto(), interact with elements using locators like getByRole and getByText, and verify results with expect() assertions. Our interactive IDE lets you practice each concept immediately."}},{"@type":"Question",name:"What are Playwright locators and how do they work?",acceptedAnswer:{"@type":"Answer",text:"Locators are Playwright's way of finding elements on a web page. The recommended locators include getByRole() for semantic selection, getByText() for visible text, getByLabel() for form fields, getByPlaceholder() for inputs, and getByTestId() for data-testid attributes. Playwright Pad's Selectors Hub tool lets you test these locators in real-time against live pages."}},{"@type":"Question",name:"Can I run Playwright tests in headed and headless mode?",acceptedA
45nswer:{"@type":"Answer",text:"Yes! Playwright Pad supports both headed mode (where you see the browser window open and actions being performed visually) and headless mode (where tests run in the background without a visible browser). Headed mode is great for debugging and learning, while headless mode is faster for CI/CD pipelines."}},{"@type":"Question",name:"Does Playwright Pad support TypeScript and JavaScript?",acceptedAnswer:{"@type":"Answer",text:"Absolutely. Our platform fully supports both TypeScript and JavaScript for writing Playwright tests. We also offer dedicated interactive courses for JavaScript for QA Automation and TypeScript for SDETs, teaching language fundamentals specifically tailored for test automation engineers."}},{"@type":"Question",name:"What is a Page Object Model (POM) in Playwright?",acceptedAnswer:{"@type":"Answer",text:"The Page Object Model is a design pattern that creates an abstraction layer over web pages in your test code. Each page of your application gets its own class containing locators and methods. Playwright Pad includes a free POM Generator tool that automatically scans web pages and generates clean, maintainable Page Object classes for your Playwright tests."}},{"@type":"Question",name:"How to prepare for SDET and QA automation interviews?",acceptedAnswer:{"@type":"Answer",text:"Playwright Pad offers an Interview Prep Hub with 300+ curated questions covering Playwright, JavaScript, TypeScript, and general QA theory. Practice coding questions, study detailed answers with code examples, and track your preparation progress. Our questions cover topics from basic locator strategies to advanced network mocking and CI/CD integration."}}]}]};return G({title:c("seo.homeTitle"),description:c("seo.homeDescription"),keywords:"playwright practice website, playwright practice, playwright automation practice, free playwright learning platform, sdet practice website, qa automation practice, learn playwright online free, playwright online sandbox, automation qa testing, playwright hands-on exercises",canonicalUrl:J("/"),schema:g}),e.jsxs("div",{className:"landing-page bg-[#fbf9f4] text-[#1b1c19] overflow-x-hidden min-h-screen",children:[e.jsxs("div",{className:"block lg:hidden w-full max-w-full overflow-x-hidden",children:[e.jsx(ae,{}),e.jsx(L,{})]}),e.jsxs("div",{className:"hidden lg:block w-full max-w-full overflow-x-hidden",children:[e.jsx(ne,{}),e.jsx(L,{})]})]})}export{ge as LandingPage};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.