[{"data":1,"prerenderedAt":90},["ShallowReactive",2],{"work-shopify-e2e-testing":3},{"id":4,"title":5,"body":6,"category":55,"challenge":56,"codeSnippet":57,"description":61,"extension":62,"featured":63,"finalScreenshot":64,"gridOrder":65,"isDemo":63,"isDemoURL":49,"liveUrl":66,"meta":67,"mockupImage":68,"navigation":69,"nextProject":66,"order":70,"path":71,"results":66,"schneiderFeatured":63,"schneiderOrder":66,"seo":72,"solution":73,"stem":74,"subtitle":75,"tags":76,"techStack":82,"thumbnail":87,"thumbnailVideo":66,"year":88,"__hash__":89},"works/works/shopify-e2e-testing.md","Shopify E2E",{"type":7,"value":8,"toc":48},"minimark",[9,14,18,21,26,29,33,36,40],[10,11,13],"h1",{"id":12},"shopify-e2e-testing-framework","Shopify E2E Testing Framework",[15,16,17],"p",{},"A store-agnostic testing framework that treats store configuration as data, not code. Add a new Shopify store by dropping in a config file — the entire test suite runs against it automatically. Covers critical path flows, third-party integration validation, visual regression, accessibility compliance, and performance budgets across 40+ browser/device combinations via BrowserStack.",[19,20],"hr",{},[22,23,25],"h2",{"id":24},"store-agnostic-design","Store-Agnostic Design",[15,27,28],{},"Each store is a TypeScript config object: URLs, selectors (with fallback chains for dynamic themes), test data, accessibility exceptions, and per-device performance budgets. Adding a new store means copying the template and filling in selectors. No test code changes required.",[22,30,32],{"id":31},"what-gets-tested","What Gets Tested",[15,34,35],{},"13 critical path tests (cart, checkout, subscriptions, navigation), 7 integration tests (Appstle widget loading, Klaviyo forms, GoAffPro referral persistence), 9 visual regression tests, 6 WCAG 2.1 AA accessibility tests via axe-core, and 12+ performance tests with separate desktop/mobile budgets for LCP, FCP, CLS, TBT, and Lighthouse scores.",[22,37,39],{"id":38},"architecture","Architecture",[15,41,42,43,47],{},"Composable Playwright fixtures (base → shopify → a11y → performance) give every test automatic screenshot capture, store config injection, and clean cart state without boilerplate. Web Vitals injected via ",[44,45,46],"code",{},"PerformanceObserver"," before navigation to capture real metrics from first byte.",{"title":49,"searchDepth":50,"depth":50,"links":51},"",2,[52,53,54],{"id":24,"depth":50,"text":25},{"id":31,"depth":50,"text":32},{"id":38,"depth":50,"text":39},"Testing Infrastructure","Shopify Plus stores rely on complex combinations of themes, apps, and custom code that break silently across browsers and devices. Manual QA can't cover 40+ browser/device combinations, accessibility compliance, performance regressions, and third-party app integrations — especially when theme updates or app installations create cascading failures.",{"language":58,"filename":59,"code":60},"typescript","fixtures/shopify.fixture.ts","export const test = base.extend\u003CShopifyFixtures>({\n  storeConfig: async ({}, use) => {\n    const config = loadStoreConfig(process.env.STORE_ID)\n    await use(config)\n  },\n\n  shopifyPage: async ({ page, storeConfig }, use) => {\n    // Clear cart state before each test\n    await page.context().clearCookies()\n    await page.goto(storeConfig.baseUrl)\n    await page.waitForSelector(storeConfig.selectors.body)\n    await use(page)\n  },\n\n  a11yAudit: async ({ page }, use) => {\n    const audit = async (selector?: string) => {\n      const results = await new AxeBuilder({ page })\n        .withTags(['wcag2a', 'wcag2aa'])\n        .analyze()\n      return results.violations\n    }\n    await use(audit)\n  },\n})\n","Store-agnostic E2E testing framework for Shopify Plus — cross-browser testing across 40+ device combinations, WCAG 2.1 AA compliance, performance budgets, and third-party app validation (Appstle, Klaviyo, GoAffPro).","md",false,"/images/projects/shopify-e2e-testing-final.jpg",10,null,{},"/images/projects/shopify-e2e-testing-mockup.jpg",true,16,"/works/shopify-e2e-testing",{"title":5,"description":61},"A store-agnostic testing framework that treats store configuration as data, not code. Add a new Shopify store by dropping in a config file — the entire test suite runs against it automatically. Composable Playwright fixtures (base → shopify → a11y → performance) give every test automatic screenshot capture, store config injection, and clean cart state without boilerplate.","works/shopify-e2e-testing","Automated Cross-Browser QA for Shopify Plus Stores",[77,78,79,80,81],"Playwright","BrowserStack","Accessibility","Performance","Shopify Plus",[83,77,84,85,86],"TypeScript","BrowserStack SDK","axe-core","web-vitals","/images/projects/shopify-e2e-testing.jpg","2026","rE6-ppeJaCDNn9NXXrYEo_KUaVN3NMP7X5KfbFpnTqg",1773700381238]