[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"nav":3,"page-\u002Fvueconf2025\u002Faccessible-frontend-testing-for-beginners-by-henry-lie":155},[4,30,91,151],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Codestock2026","\u002Fcodestock2026","CodeStock2026",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"AI Reviewers By Avindra Fernando","\u002Fcodestock2026\u002Fai-reviewers-by-avindra-fernando","CodeStock2026\u002FAI Reviewers by Avindra Fernando",{"title":14,"path":15,"stem":16},"Containers","\u002Fcodestock2026\u002Fcontainers","CodeStock2026\u002FContainers",{"title":18,"path":19,"stem":20},"DX","\u002Fcodestock2026\u002Fdx","CodeStock2026\u002FDX",{"title":22,"path":23,"stem":24},"Github Actions","\u002Fcodestock2026\u002Fgithub-actions","CodeStock2026\u002FGithub Actions",{"title":26,"path":27,"stem":28},"ROI Of Automated Testing","\u002Fcodestock2026\u002Froi-of-automated-testing","CodeStock2026\u002FROI of Automated Testing",false,{"title":31,"path":32,"stem":33,"children":34,"page":29},"Vueconf2025","\u002Fvueconf2025","VueConf2025",[35,39,43,47,51,55,59,63,67,71,75,79,83,87],{"title":36,"path":37,"stem":38},"20 Ways To Define Props In Vue 3 By Alex Riviere","\u002Fvueconf2025\u002F20-ways-to-define-props-in-vue-3-by-alex-riviere","VueConf2025\u002F20 Ways to Define Props in Vue 3 by Alex Riviere",{"title":40,"path":41,"stem":42},"Accessible Frontend Testing For Beginners By Henry Lie","\u002Fvueconf2025\u002Faccessible-frontend-testing-for-beginners-by-henry-lie","VueConf2025\u002FAccessible Frontend Testing for Beginners by Henry Lie",{"title":44,"path":45,"stem":46},"Constructing Clear, Comprehensible Components By David Nahodyl","\u002Fvueconf2025\u002Fconstructing-clear-comprehensible-components-by-david-nahodyl","VueConf2025\u002FConstructing Clear, Comprehensible Components by David Nahodyl",{"title":48,"path":49,"stem":50},"Dependency Injection By Robbie","\u002Fvueconf2025\u002Fdependency-injection-by-robbie","VueConf2025\u002FDependency Injection by Robbie",{"title":52,"path":53,"stem":54},"Fuzz To Function   Building AI First Vue Apps By Justin Schroeder","\u002Fvueconf2025\u002Ffuzz-to-function-building-ai-first-vue-apps-by-justin-schroeder","VueConf2025\u002FFuzz to Function - Building AI-first Vue Apps by Justin Schroeder",{"title":56,"path":57,"stem":58},"Grounding Gen AI By Daniel Madalitso Phiri","\u002Fvueconf2025\u002Fgrounding-gen-ai-by-daniel-madalitso-phiri","VueConf2025\u002FGrounding Gen AI by Daniel Madalitso Phiri",{"title":60,"path":61,"stem":62},"How To Ruin A User Interface By Kathryn Grayson Nanz","\u002Fvueconf2025\u002Fhow-to-ruin-a-user-interface-by-kathryn-grayson-nanz","VueConf2025\u002FHow to Ruin a User Interface by Kathryn Grayson Nanz",{"title":64,"path":65,"stem":66},"Lessons Learned From A Vue SaaS App By Abdelrahman Awad","\u002Fvueconf2025\u002Flessons-learned-from-a-vue-saas-app-by-abdelrahman-awad","VueConf2025\u002FLessons Learned from a Vue SaaS App by Abdelrahman Awad",{"title":68,"path":69,"stem":70},"Lightning Talks","\u002Fvueconf2025\u002Flightning-talks","VueConf2025\u002FLightning Talks",{"title":72,"path":73,"stem":74},"Nuxt Hidden Treasures By Alexander Lichter","\u002Fvueconf2025\u002Fnuxt-hidden-treasures-by-alexander-lichter","VueConf2025\u002FNuxt Hidden Treasures by Alexander Lichter",{"title":76,"path":77,"stem":78},"Nuxt Layers For Starter Projects By Dino Mastrianni","\u002Fvueconf2025\u002Fnuxt-layers-for-starter-projects-by-dino-mastrianni","VueConf2025\u002FNuxt Layers for Starter Projects by Dino Mastrianni",{"title":80,"path":81,"stem":82},"Soft Skills For Software Developers By Katherine Herbert","\u002Fvueconf2025\u002Fsoft-skills-for-software-developers-by-katherine-herbert","VueConf2025\u002FSoft Skills for Software Developers by Katherine Herbert",{"title":84,"path":85,"stem":86},"State Of Nuxt 2025 By Daniel Rowe","\u002Fvueconf2025\u002Fstate-of-nuxt-2025-by-daniel-rowe","VueConf2025\u002FState of Nuxt 2025 by Daniel Rowe",{"title":88,"path":89,"stem":90},"Vue Doo Magic AI Development Tricks By Daniel Kelly","\u002Fvueconf2025\u002Fvue-doo-magic-ai-development-tricks-by-daniel-kelly","VueConf2025\u002FVue-doo Magic AI Development Tricks by Daniel Kelly",{"title":92,"path":93,"stem":94,"children":95,"page":29},"Vueconf2026","\u002Fvueconf2026","VueConf2026",[96,100,104,108,112,116,120,123,127,131,135,139,143,147],{"title":97,"path":98,"stem":99},"Being A Vue Developer In The Age Of AI Coding Assistants By Erik Hanchett","\u002Fvueconf2026\u002Fbeing-a-vue-developer-in-the-age-of-ai-coding-assistants-by-erik-hanchett","VueConf2026\u002FBeing a Vue Developer in the Age of AI Coding Assistants by Erik Hanchett",{"title":101,"path":102,"stem":103},"Building Accessible Vue Enterprise Apps By Jeremy Rivera","\u002Fvueconf2026\u002Fbuilding-accessible-vue-enterprise-apps-by-jeremy-rivera","VueConf2026\u002FBuilding Accessible Vue Enterprise Apps by Jeremy Rivera",{"title":105,"path":106,"stem":107},"Escaping Pilot Purgatory By Martin Rojas","\u002Fvueconf2026\u002Fescaping-pilot-purgatory-by-martin-rojas","VueConf2026\u002FEscaping Pilot Purgatory by Martin Rojas",{"title":109,"path":110,"stem":111},"Guiding Agentic AI With Vue And Pinia By Rijk Van Zanten","\u002Fvueconf2026\u002Fguiding-agentic-ai-with-vue-and-pinia-by-rijk-van-zanten","VueConf2026\u002FGuiding Agentic AI with Vue and Pinia by Rijk van Zanten",{"title":113,"path":114,"stem":115},"How I AI From The Other Side Of The Org Chart By Daneez Zamangil","\u002Fvueconf2026\u002Fhow-i-ai-from-the-other-side-of-the-org-chart-by-daneez-zamangil","VueConf2026\u002FHow I AI from the Other Side of the Org Chart by Daneez Zamangil",{"title":117,"path":118,"stem":119},"Keynote By Evan You","\u002Fvueconf2026\u002Fkeynote-by-evan-you","VueConf2026\u002FKeynote by Evan You",{"title":68,"path":121,"stem":122},"\u002Fvueconf2026\u002Flightning-talks","VueConf2026\u002FLightning Talks",{"title":124,"path":125,"stem":126},"Maintainable Vue   Future Proof Patterns For Spaghetti Free Code By Chris Morrow","\u002Fvueconf2026\u002Fmaintainable-vue-future-proof-patterns-for-spaghetti-free-code-by-chris-morrow","VueConf2026\u002FMaintainable Vue - Future-proof patterns for spaghetti-free code by Chris Morrow",{"title":128,"path":129,"stem":130},"Possessed By Packages   Is Your JavaScript Haunted By Chris DeMars","\u002Fvueconf2026\u002Fpossessed-by-packages-is-your-javascript-haunted-by-chris-demars","VueConf2026\u002FPossessed by Packages - Is Your JavaScript Haunted by Chris DeMars",{"title":132,"path":133,"stem":134},"Stop Using One AI Tool For Everything   A Multitool Approach To Frontend Development By Will Marple","\u002Fvueconf2026\u002Fstop-using-one-ai-tool-for-everything-a-multitool-approach-to-frontend-development-by-will-marple","VueConf2026\u002FStop Using One AI Tool For Everything - A multitool approach to frontend development by Will Marple",{"title":136,"path":137,"stem":138},"The Future Of Web Development By Julian Burr","\u002Fvueconf2026\u002Fthe-future-of-web-development-by-julian-burr","VueConf2026\u002FThe Future of Web Development by Julian Burr",{"title":140,"path":141,"stem":142},"The Life Changing Art Of Being Wrong By Kathryn Grayson Nanz","\u002Fvueconf2026\u002Fthe-life-changing-art-of-being-wrong-by-kathryn-grayson-nanz","VueConf2026\u002FThe Life Changing Art of Being Wrong by Kathryn Grayson Nanz",{"title":144,"path":145,"stem":146},"Universal Lessons Learned From Legacy Codebases By Abbey Perini","\u002Fvueconf2026\u002Funiversal-lessons-learned-from-legacy-codebases-by-abbey-perini","VueConf2026\u002FUniversal Lessons Learned from Legacy Codebases by Abbey Perini",{"title":148,"path":149,"stem":150},"Vue Performance By Daniel Kelly","\u002Fvueconf2026\u002Fvue-performance-by-daniel-kelly","VueConf2026\u002FVue Performance by Daniel Kelly",{"title":152,"path":153,"stem":154},"Conference Notes","\u002F","index",{"id":156,"title":40,"body":157,"description":336,"extension":339,"meta":340,"navigation":341,"path":41,"seo":342,"stem":42,"__hash__":343},"content\u002FVueConf2025\u002FAccessible Frontend Testing for Beginners by Henry Lie.md",{"type":158,"value":159,"toc":335},"minimark",[160],[161,162,163,167,235,302,327],"ul",{},[164,165,166],"li",{},"Popular testing tools: Vitest, Playwright",[164,168,169,170],{},"As it relates to accessibility\n",[161,171,172,189],{},[164,173,174,175],{},"Touchscreen issues\n",[161,176,177,180,183,186],{},[164,178,179],{},"Lose access to hover events",[164,181,182],{},"Small clickables hard to tap",[164,184,185],{},"Mouse-specific event handlers",[164,187,188],{},"Back gesture behavior",[164,190,191,192],{},"Visibility\n",[161,193,194,197,200,203,229,232],{},[164,195,196],{},"Do stakeholders care about accessibility? They should. Because laws. Also caring.",[164,198,199],{},"How do you measure disabled users? Do you know how many have partial blindness? How many don't use a mouse?",[164,201,202],{},"Curb-cut effect — one of my favorite examples of how accessibility helps everyone",[164,204,205,206,210,211,214,215],{},"Selectors — queries accessible to everyone: ",[207,208,209],"code",{},"getByLabelText",", ",[207,212,213],{},"getByDisplayValue",", etc.\n",[161,216,217],{},[164,218,219,210,222,210,225,228],{},[207,220,221],{},"getByAltText",[207,223,224],{},"getByTitle",[207,226,227],{},"getByTestId"," are less ideal selectors",[164,230,231],{},"Accessibility Tree — enable in devtools. Not enabled by default",[164,233,234],{},"Axe DevTools for automated checks — also integrates with Playwright",[164,236,237,238],{},"The Testing Trophy\n",[161,239,240,260,277,291],{},[164,241,242,243],{},"End to End\n",[161,244,245,248,251,254,257],{},[164,246,247],{},"Playwright, Cypress, Puppeteer",[164,249,250],{},"Like integration, but removing most mocks",[164,252,253],{},"Tests critical paths",[164,255,256],{},"Visual regression tests",[164,258,259],{},"Runs infrequently (nightly) on CI against a dedicated environment — very heavy",[164,261,262,263],{},"Integration\n",[161,264,265,268,271,274],{},[164,266,267],{},"Vitest or Playwright",[164,269,270],{},"Multiple units working properly together",[164,272,273],{},"Runs mainly on the CI pipeline",[164,275,276],{},"Mocks any service outside of the frontend code (mocked or backend APIs)",[164,278,279,280],{},"Unit\n",[161,281,282,285,288],{},[164,283,284],{},"Vitest, Jest",[164,286,287],{},"Small, isolated business logic",[164,289,290],{},"Can run during watch mode, git hooks like pre-commit, CI pipeline on every push",[164,292,293,294],{},"Static\n",[161,295,296,299],{},[164,297,298],{},"TypeScript, eslint — free safety for low effort",[164,300,301],{},"Mainly runs during development in your editor",[164,303,304,305],{},"Where to start when there are no tests?\n",[161,306,307,310,313,316],{},[164,308,309],{},"When starting out: set up TypeScript and linters with strict rules, mostly integration test in detail for each page, adopt TDD to follow the acceptance criteria",[164,311,312],{},"Establish API contract early with schemas",[164,314,315],{},"Mock fetch. Don't assert whether it happened, but rather the result the user is going to see",[164,317,318,319],{},"If the project is already done:\n",[161,320,321,324],{},[164,322,323],{},"Start with basic e2e tests — gives best confidence. FE and BE are already integrated and operational",[164,325,326],{},"Basically automating manual testing",[164,328,329,330],{},"Challenges\n",[161,331,332],{},[164,333,334],{},"3rd party API testing: limited by downtime, rate limits, usage quota, effort to automate (like 2FA). It's okay to mock these — they aren't our responsibility to test",{"title":336,"searchDepth":337,"depth":337,"links":338},"",2,[],"md",{},true,{"description":336},"z-ph1aWk4KZoDfvp5SsuCAd93Zl-LxnGBi6xY1FNs6w",1780096770668]