[{"data":1,"prerenderedAt":241},["ShallowReactive",2],{"term-v\u002Fvisual-regression-test":3,"related-v\u002Fvisual-regression-test":226},{"id":4,"title":5,"acronym":6,"body":7,"category":207,"description":208,"difficulty":209,"extension":210,"letter":211,"meta":212,"navigation":213,"path":214,"related":215,"seo":220,"sitemap":221,"stem":224,"subcategory":6,"__hash__":225},"terms\u002Fterms\u002Fv\u002Fvisual-regression-test.md","Visual Regression Test",null,{"type":8,"value":9,"toc":201},"minimark",[10,15,19,23,26,30,190,194,197],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"A visual regression test takes a screenshot of your UI, and next time it checks if anything LOOKS different — pixel by pixel. Even if your code 'works', if a button moved 2 pixels or a color changed slightly, the test catches it. It's a watchdog for your design.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Visual regression testing captures screenshots of UI components or pages and compares them against baseline images using pixel-diff algorithms. Tools like Percy, Chromatic, or Playwright's screenshot comparison detect unintended visual changes, protecting design consistency.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Playwright visual comparison\ntest('homepage looks correct', async ({ page }) => {\n  await page.goto('\u002F');\n  await expect(page).toHaveScreenshot('homepage.png', {\n    maxDiffPixels: 100\n  });\n});\n","javascript","",[38,39,40,49,93,124,157,170,180],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Playwright visual comparison\n",[41,50,52,56,60,64,68,70,73,77,80,84,87,90],{"class":43,"line":51},2,[41,53,55],{"class":54},"s2Zo4","test",[41,57,59],{"class":58},"sTEyZ","(",[41,61,63],{"class":62},"sMK4o","'",[41,65,67],{"class":66},"sfazB","homepage looks correct",[41,69,63],{"class":62},[41,71,72],{"class":62},",",[41,74,76],{"class":75},"spNyl"," async",[41,78,79],{"class":62}," ({",[41,81,83],{"class":82},"sHdIc"," page",[41,85,86],{"class":62}," })",[41,88,89],{"class":75}," =>",[41,91,92],{"class":62}," {\n",[41,94,96,100,102,105,108,111,113,116,118,121],{"class":43,"line":95},3,[41,97,99],{"class":98},"s7zQu","  await",[41,101,83],{"class":58},[41,103,104],{"class":62},".",[41,106,107],{"class":54},"goto",[41,109,59],{"class":110},"swJcz",[41,112,63],{"class":62},[41,114,115],{"class":66},"\u002F",[41,117,63],{"class":62},[41,119,120],{"class":110},")",[41,122,123],{"class":62},";\n",[41,125,127,129,132,134,137,139,141,144,146,148,151,153,155],{"class":43,"line":126},4,[41,128,99],{"class":98},[41,130,131],{"class":54}," expect",[41,133,59],{"class":110},[41,135,136],{"class":58},"page",[41,138,120],{"class":110},[41,140,104],{"class":62},[41,142,143],{"class":54},"toHaveScreenshot",[41,145,59],{"class":110},[41,147,63],{"class":62},[41,149,150],{"class":66},"homepage.png",[41,152,63],{"class":62},[41,154,72],{"class":62},[41,156,92],{"class":62},[41,158,160,163,166],{"class":43,"line":159},5,[41,161,162],{"class":110},"    maxDiffPixels",[41,164,165],{"class":62},":",[41,167,169],{"class":168},"sbssI"," 100\n",[41,171,173,176,178],{"class":43,"line":172},6,[41,174,175],{"class":62},"  }",[41,177,120],{"class":110},[41,179,123],{"class":62},[41,181,183,186,188],{"class":43,"line":182},7,[41,184,185],{"class":62},"}",[41,187,120],{"class":58},[41,189,123],{"class":62},[11,191,193],{"id":192},"when-youll-hear-this","When You'll Hear This",[16,195,196],{},"\"Visual regression tests caught that the button color changed after the CSS refactor.\" \u002F \"Use Chromatic for visual regression in your Storybook components.\"",[198,199,200],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":202},[203,204,205,206],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":192,"depth":51,"text":193},"testing","A visual regression test takes a screenshot of your UI, and next time it checks if anything LOOKS different — pixel by pixel.","intermediate","md","v",{},true,"\u002Fterms\u002Fv\u002Fvisual-regression-test",[216,217,218,219],"Snapshot Test","Playwright","Cypress","End-to-End Test",{"title":5,"description":208},{"changefreq":222,"priority":223},"weekly",0.7,"terms\u002Fv\u002Fvisual-regression-test","dI85qrWEbRBfld_ASKWKjvDEBKfSu6ljBpEbJCesnZI",[227,230,234,237],{"title":218,"path":228,"acronym":6,"category":207,"difficulty":209,"description":229},"\u002Fterms\u002Fc\u002Fcypress","Selenium drives a browser like a confused tourist with a map.",{"title":219,"path":231,"acronym":232,"category":207,"difficulty":209,"description":233},"\u002Fterms\u002Fe\u002Fend-to-end-test","E2E","An end-to-end test is like hiring a robot to be a user.",{"title":217,"path":235,"acronym":6,"category":207,"difficulty":209,"description":236},"\u002Fterms\u002Fp\u002Fplaywright","Playwright is an end-to-end testing tool that controls real browsers (Chrome, Firefox, Safari) to test your web app the way a user would.",{"title":216,"path":238,"acronym":6,"category":207,"difficulty":239,"description":240},"\u002Fterms\u002Fs\u002Fsnapshot-test","beginner","A snapshot test takes a photo of your component's output and saves it. Next time you run it, it takes another photo and compares them.",1776518323139]