[{"data":1,"prerenderedAt":4446},["ShallowReactive",2],{"readme:en":3},{"id":4,"title":5,"body":6,"description":29,"extension":4438,"meta":4439,"navigation":65,"path":4440,"reviewed":65,"seo":4441,"source":4442,"stem":4443,"__hash__":4444,"fallback":4445},"readme\u002Freadme\u002FREADME.md","README",{"type":7,"value":8,"toc":4406},"minimark",[9,14,19,23,110,113,124,173,185,348,357,361,364,391,394,407,412,416,426,430,433,478,482,496,523,534,1267,1422,1425,1610,1613,1881,1892,1943,1946,1950,1953,1961,2348,2363,2420,2430,2502,2571,2578,2582,2588,2671,2694,2708,2746,2794,2802,2805,2878,2898,2902,2909,2913,2916,2939,2946,2962,2966,2982,3021,3081,3140,3144,3157,3164,3202,3262,3265,3269,3276,3332,3341,3347,3371,3399,3420,3423,3461,3521,3524,3543,3547,3554,3557,3575,3579,3582,3592,3602,3620,3623,3661,3676,3761,3767,3774,3786,3910,3914,3925,3938,4037,4041,4050,4068,4071,4109,4113,4119,4125,4137,4141,4150,4169,4178,4281,4285,4300,4319,4322,4360,4382,4386,4389,4402],[10,11,13],"h2",{"id":12},"getting-started","Getting started",[15,16,18],"h3",{"id":17},"installation","Installation",[20,21,22],"p",{},"The plugin requires Node.js 20.9 or newer. You can install this library using your favorite package manager:",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast","# npm\nnpm install --save-dev @pixsame\u002Fcypress-plugin-visual-regression-diff\n\n# yarn\nyarn add -D @pixsame\u002Fcypress-plugin-visual-regression-diff\n\n# pnpm\npnpm add -D @pixsame\u002Fcypress-plugin-visual-regression-diff\n","bash","",[31,32,33,42,60,67,73,87,92,98],"code",{"__ignoreMap":29},[34,35,38],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"sLBg1","# npm\n",[34,43,45,49,53,57],{"class":36,"line":44},2,[34,46,48],{"class":47},"soyes","npm",[34,50,52],{"class":51},"sT6z2"," install",[34,54,56],{"class":55},"s-5SL"," --save-dev",[34,58,59],{"class":51}," @pixsame\u002Fcypress-plugin-visual-regression-diff\n",[34,61,63],{"class":36,"line":62},3,[34,64,66],{"emptyLinePlaceholder":65},true,"\n",[34,68,70],{"class":36,"line":69},4,[34,71,72],{"class":40},"# yarn\n",[34,74,76,79,82,85],{"class":36,"line":75},5,[34,77,78],{"class":47},"yarn",[34,80,81],{"class":51}," add",[34,83,84],{"class":55}," -D",[34,86,59],{"class":51},[34,88,90],{"class":36,"line":89},6,[34,91,66],{"emptyLinePlaceholder":65},[34,93,95],{"class":36,"line":94},7,[34,96,97],{"class":40},"# pnpm\n",[34,99,101,104,106,108],{"class":36,"line":100},8,[34,102,103],{"class":47},"pnpm",[34,105,81],{"class":51},[34,107,84],{"class":55},[34,109,59],{"class":51},[20,111,112],{},"Next, you need to import the library:",[114,115,116],"ul",{},[117,118,119,120,123],"li",{},"first, in your support file (located by default in ",[31,121,122],{},"cypress\u002Fsupport\u002Findex.js","):",[24,125,129],{"className":126,"code":127,"language":128,"meta":29,"style":29},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F\u002F typescript \u002F ES6\nimport '@pixsame\u002Fcypress-plugin-visual-regression-diff';\n\n\u002F\u002F javascript\nrequire('@pixsame\u002Fcypress-plugin-visual-regression-diff');\n","ts",[31,130,131,136,149,153,158],{"__ignoreMap":29},[34,132,133],{"class":36,"line":37},[34,134,135],{"class":40},"\u002F\u002F typescript \u002F ES6\n",[34,137,138,142,145],{"class":36,"line":44},[34,139,141],{"class":140},"sHUrx","import",[34,143,144],{"class":51}," '@pixsame\u002Fcypress-plugin-visual-regression-diff'",[34,146,148],{"class":147},"suds8",";\n",[34,150,151],{"class":36,"line":62},[34,152,66],{"emptyLinePlaceholder":65},[34,154,155],{"class":36,"line":69},[34,156,157],{"class":40},"\u002F\u002F javascript\n",[34,159,160,164,167,170],{"class":36,"line":75},[34,161,163],{"class":162},"sKwhi","require",[34,165,166],{"class":147},"(",[34,168,169],{"class":51},"'@pixsame\u002Fcypress-plugin-visual-regression-diff'",[34,171,172],{"class":147},");\n",[114,174,175],{},[117,176,177,178,181,182,123],{},"secondly, in ",[31,179,180],{},"cypress.config.js"," (or ",[31,183,184],{},"cypress.config.ts",[24,186,188],{"className":126,"code":187,"language":128,"meta":29,"style":29},"\u002F\u002F typescript \u002F ES6\nimport { defineConfig } from 'cypress';\nimport { initPlugin as initVisualRegressionPlugin } from '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins';\n\nexport default defineConfig({\n \u002F\u002F initPlugin must be called in the section where it is used: e2e or component\n e2e: {\n setupNodeEvents(on, config) {\n initVisualRegressionPlugin(on, config);\n },\n },\n component: {\n setupNodeEvents(on, config) {\n initVisualRegressionPlugin(on, config);\n },\n },\n});\n",[31,189,190,194,209,229,233,247,252,257,276,285,291,300,306,321,328,333,340],{"__ignoreMap":29},[34,191,192],{"class":36,"line":37},[34,193,135],{"class":40},[34,195,196,198,201,204,207],{"class":36,"line":44},[34,197,141],{"class":140},[34,199,200],{"class":147}," { defineConfig } ",[34,202,203],{"class":140},"from",[34,205,206],{"class":51}," 'cypress'",[34,208,148],{"class":147},[34,210,211,213,216,219,222,224,227],{"class":36,"line":62},[34,212,141],{"class":140},[34,214,215],{"class":147}," { initPlugin ",[34,217,218],{"class":140},"as",[34,220,221],{"class":147}," initVisualRegressionPlugin } ",[34,223,203],{"class":140},[34,225,226],{"class":51}," '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins'",[34,228,148],{"class":147},[34,230,231],{"class":36,"line":69},[34,232,66],{"emptyLinePlaceholder":65},[34,234,235,238,241,244],{"class":36,"line":75},[34,236,237],{"class":140},"export",[34,239,240],{"class":140}," default",[34,242,243],{"class":162}," defineConfig",[34,245,246],{"class":47},"({\n",[34,248,249],{"class":36,"line":89},[34,250,251],{"class":40}," \u002F\u002F initPlugin must be called in the section where it is used: e2e or component\n",[34,253,254],{"class":36,"line":94},[34,255,256],{"class":147}," e2e: {\n",[34,258,259,262,264,267,270,273],{"class":36,"line":100},[34,260,261],{"class":162}," setupNodeEvents",[34,263,166],{"class":147},[34,265,266],{"class":47},"on",[34,268,269],{"class":147},", ",[34,271,272],{"class":47},"config",[34,274,275],{"class":147},") {\n",[34,277,279,282],{"class":36,"line":278},9,[34,280,281],{"class":162}," initVisualRegressionPlugin",[34,283,284],{"class":147},"(on, config);\n",[34,286,288],{"class":36,"line":287},10,[34,289,290],{"class":147}," },\n",[34,292,294,297],{"class":36,"line":293},11,[34,295,296],{"class":147}," }",[34,298,299],{"class":47},",\n",[34,301,303],{"class":36,"line":302},12,[34,304,305],{"class":147}," component: {\n",[34,307,309,311,313,315,317,319],{"class":36,"line":308},13,[34,310,261],{"class":162},[34,312,166],{"class":147},[34,314,266],{"class":47},[34,316,269],{"class":147},[34,318,272],{"class":47},[34,320,275],{"class":147},[34,322,324,326],{"class":36,"line":323},14,[34,325,281],{"class":162},[34,327,284],{"class":147},[34,329,331],{"class":36,"line":330},15,[34,332,290],{"class":147},[34,334,336,338],{"class":36,"line":335},16,[34,337,296],{"class":147},[34,339,299],{"class":47},[34,341,343,346],{"class":36,"line":342},17,[34,344,345],{"class":47},"})",[34,347,148],{"class":147},[20,349,350,351,356],{},"That's it - now let's see how to use the library in ",[352,353,355],"a",{"href":354},"#usage","usage section",".",[10,358,360],{"id":359},"usage","Usage",[20,362,363],{},"Once installed, the library might be used by writing in your test:",[24,365,367],{"className":126,"code":366,"language":128,"meta":29,"style":29},"cy.get('.an-element-of-your-choice').matchImage();\n",[31,368,369],{"__ignoreMap":29},[34,370,371,374,377,379,382,385,388],{"class":36,"line":37},[34,372,373],{"class":147},"cy.",[34,375,376],{"class":162},"get",[34,378,166],{"class":147},[34,380,381],{"class":51},"'.an-element-of-your-choice'",[34,383,384],{"class":147},").",[34,386,387],{"class":162},"matchImage",[34,389,390],{"class":147},"();\n",[20,392,393],{},"Or, if you would like to make a screenshot of whole document:",[24,395,397],{"className":126,"code":396,"language":128,"meta":29,"style":29},"cy.matchImage();\n",[31,398,399],{"__ignoreMap":29},[34,400,401,403,405],{"class":36,"line":37},[34,402,373],{"class":147},[34,404,387],{"class":162},[34,406,390],{"class":147},[20,408,409,411],{},[31,410,387],{}," command will do a screenshot and compare it with image from a previous run. In case of regression the test will fail and you'll get a \"See comparison\" button to see what's a root of a problem.",[10,413,415],{"id":414},"example","Example",[20,417,418,419,425],{},"Still got troubles with installation? Have a look at ",[352,420,424],{"href":421,"rel":422},"https:\u002F\u002Fgithub.com\u002Fpixsame\u002Fpixsame\u002Ftree\u002Fmain\u002Fexamples",[423],"nofollow","examples directory of this repo"," to see how this plugin can be used in e2e or component-testing Cypress environment within your project.",[10,427,429],{"id":428},"automatic-clean-up-of-unused-images","Automatic clean up of unused images",[20,431,432],{},"It's useful to remove screenshots generated by the visual regression plugin that are not used by any test anymore.\nEnable this feature via expose variable and enjoy freed up storage space 🚀:",[24,434,436],{"className":26,"code":435,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionCleanupUnusedImages=true\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionCleanupUnusedImages=true\"\n",[31,437,438,443,460,465],{"__ignoreMap":29},[34,439,440],{"class":36,"line":37},[34,441,442],{"class":40},"# Cypress 15.10+\n",[34,444,445,448,451,454,457],{"class":36,"line":44},[34,446,447],{"class":47},"npx",[34,449,450],{"class":51}," cypress",[34,452,453],{"class":51}," run",[34,455,456],{"class":55}," --expose",[34,458,459],{"class":51}," \"pluginVisualRegressionCleanupUnusedImages=true\"\n",[34,461,462],{"class":36,"line":62},[34,463,464],{"class":40},"# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\n",[34,466,467,469,471,473,476],{"class":36,"line":69},[34,468,447],{"class":47},[34,470,450],{"class":51},[34,472,453],{"class":51},[34,474,475],{"class":55}," --env",[34,477,459],{"class":51},[10,479,481],{"id":480},"run-manifest-ci-integration","Run manifest (CI integration)",[20,483,484,485,487,488,491,492,495],{},"From 1.1 on, every run writes a JSON manifest listing each ",[31,486,387],{}," comparison: which test it came from, whether it passed, failed, created or updated its baseline, the diff ratio, and the project-relative paths of the baseline, ",[31,489,490],{},".actual.png"," and ",[31,493,494],{},".diff.png"," files. Next to the entries it records where the run happened (CI provider, repository, commit, pull request, run id) and what it ran with (browser, specs, config file, plugin options), so a tool reading the file can report on the right PR, download the right artifact, or re-run the same comparisons. It is meant for CI tooling (PR comments, review dashboards, approval bots) that runs after Cypress is done.",[20,497,498,499,504,505,510,511,518,519,522],{},"The format is an open, runner-agnostic standard built upon ",[352,500,503],{"href":501,"rel":502},"https:\u002F\u002Fctrf.io",[423],"CTRF"," and documented at ",[352,506,509],{"href":507,"rel":508},"https:\u002F\u002Fvisual-regression.dev\u002Fmanifest",[423],"visual-regression.dev\u002Fmanifest",". The npm package ",[352,512,515],{"href":513,"rel":514},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvisual-regression-manifest",[423],[31,516,517],{},"visual-regression-manifest"," ships the JSON Schema, the TypeScript types, a validating reader, a merger for the manifests of a whole run and converters for tools that write no manifest of their own (Playwright's ",[31,520,521],{},"toHaveScreenshot",", Vitest, jest-image-snapshot, BackstopJS, CTRF reports, plain image files). Build your tooling on that package rather than on this plugin.",[20,524,525,526,529,530,533],{},"By default the file lands next to your other Cypress artifacts, at ",[31,527,528],{},"\u003CscreenshotsFolder>\u002Fvisual-regression-manifest.\u003CtestingType>.json"," (e.g. ",[31,531,532],{},"cypress\u002Fscreenshots\u002Fvisual-regression-manifest.e2e.json","). Upload it together with your snapshots directory as a CI artifact.",[24,535,539],{"className":536,"code":537,"language":538,"meta":29,"style":29},"language-jsonc shiki shiki-themes github-light-high-contrast github-dark-high-contrast","{\n \"reportFormat\": \"visual-regression-manifest\",\n \"specVersion\": \"1.0.0-beta.1\",\n \"createdAt\": \"2026-09-22T10:00:00.000Z\",\n \"updatedAt\": \"2026-09-22T10:03:12.481Z\",\n \"projectRoot\": \"\u002Fhome\u002Frunner\u002Fwork\u002Fapp\u002Fapp\",\n \"platform\": {\n \"osPlatform\": \"linux\",\n \"arch\": \"x64\",\n \"osRelease\": \"6.8.0-1021-azure\",\n },\n \"ci\": {\n \"provider\": \"github\",\n \"repositoryName\": \"acme\u002Fapp\",\n \"repositoryUrl\": \"https:\u002F\u002Fgithub.com\u002Facme\u002Fapp\",\n \"commit\": \"0f1e2d…\", \u002F\u002F on pull_request events: the merge commit\n \"ref\": \"refs\u002Fpull\u002F42\u002Fmerge\",\n \"branchName\": \"feat\u002Fnew-header\",\n \"pullRequest\": {\n \"number\": 42,\n \"headSha\": \"9a8b7c…\",\n \"headRef\": \"feat\u002Fnew-header\",\n \"baseRef\": \"main\",\n },\n \"event\": \"pull_request\",\n \"buildId\": \"1234567890\",\n \"buildName\": \"CI\",\n \"buildUrl\": \"https:\u002F\u002Fgithub.com\u002Facme\u002Fapp\u002Factions\u002Fruns\u002F1234567890\u002Fattempts\u002F1\",\n \"runAttempt\": \"1\",\n \"job\": \"e2e\",\n \"workspace\": \"\u002Fhome\u002Frunner\u002Fwork\u002Fapp\u002Fapp\",\n },\n \"tool\": {\n \"name\": \"@pixsame\u002Fcypress-plugin-visual-regression-diff\",\n \"version\": \"1.1.0\",\n }, \u002F\u002F what wrote the file\n \"options\": { \"updateImages\": \"failures-only\" }, \u002F\u002F global pluginVisualRegression* options, prefix stripped\n \"runner\": {\n \"name\": \"cypress\",\n \"version\": \"16.1.0\",\n \"testingType\": \"e2e\",\n \"mode\": \"run\",\n \"configFile\": \"cypress.config.ts\",\n \"browser\": {\n \"name\": \"chrome\",\n \"version\": \"130.0.0.0\",\n \"family\": \"chromium\",\n \"headless\": true,\n },\n \"specs\": [\"cypress\u002Fe2e\u002Fhome.cy.ts\"],\n \"specPattern\": \"cypress\u002Fe2e\u002F**\u002F*.cy.{js,jsx,ts,tsx}\",\n \"baseUrl\": \"http:\u002F\u002Flocalhost:3000\",\n \"viewport\": { \"width\": 1280, \"height\": 720 },\n },\n \"summary\": {\n \"entries\": 1,\n \"passed\": 0,\n \"failed\": 1,\n \"missingBaseline\": 0,\n \"created\": 0,\n \"updated\": 0,\n \"approved\": 0,\n \"needsHuman\": 1,\n },\n \"entries\": [\n {\n \"name\": \"home page renders_#0\",\n \"test\": {\n \"filePath\": \"cypress\u002Fe2e\u002Fhome.cy.ts\",\n \"titlePath\": [\"home page\", \"renders\"],\n \"retry\": 0,\n },\n \"status\": \"failed\",\n \"comparison\": { \"diffRatio\": 0.0231, \"threshold\": 0.01 },\n \"images\": {\n \"baseline\": {\n \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.png\",\n \"width\": 1280,\n \"height\": 720,\n },\n \"actual\": {\n \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.actual.png\",\n \"width\": 1280,\n \"height\": 720,\n },\n \"diff\": {\n \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.diff.png\",\n },\n },\n \"baselineWritten\": false,\n \"recordedAt\": \"2026-09-22T10:03:12.480Z\",\n \"platform\": {\n \"osPlatform\": \"linux\",\n \"arch\": \"x64\",\n \"browser\": {\n \"name\": \"chrome\",\n \"version\": \"130.0.0.0\",\n \"family\": \"chromium\",\n \"headless\": true,\n },\n },\n \"viewport\": { \"width\": 1280, \"height\": 720 },\n \"options\": {\n \"imagesPath\": \"{spec_path}\u002F__image_snapshots__\",\n \"maxDiffThreshold\": 0.01,\n \"diffConfig\": {},\n \"createMissingImages\": true,\n \"updateImages\": false,\n \"forceDeviceScaleFactor\": true,\n \"screenshotConfig\": {},\n },\n \"renderer\": {\n \"backend\": \"native\",\n \"browser\": \"chrome\",\n \"browserVersion\": \"130.0.0.0\",\n },\n \"hashes\": {\n \"baseline\": \"3b7e…\", \u002F\u002F sha256 of the files listed in `images`, only for files that exist\n \"actual\": \"9d21…\",\n \"diff\": \"c0ff…\",\n },\n \"message\": \"2310 pixels (2.31%) differ; the limit is 1%.\",\n },\n ],\n}\n","jsonc",[31,540,541,546,551,556,561,566,571,576,581,586,591,596,601,606,611,616,624,629,635,641,647,653,659,665,670,676,682,688,694,700,706,712,717,723,729,735,741,750,756,762,768,774,780,786,792,798,804,810,816,821,827,833,839,845,850,856,862,868,874,880,886,892,898,904,909,915,921,927,933,939,945,951,957,963,969,975,981,987,993,999,1005,1011,1017,1022,1027,1032,1038,1044,1049,1054,1060,1066,1072,1078,1084,1090,1096,1102,1108,1114,1119,1124,1130,1136,1142,1148,1154,1160,1166,1172,1178,1183,1189,1195,1201,1207,1212,1218,1227,1233,1239,1244,1250,1255,1261],{"__ignoreMap":29},[34,542,543],{"class":36,"line":37},[34,544,545],{},"{\n",[34,547,548],{"class":36,"line":44},[34,549,550],{}," \"reportFormat\": \"visual-regression-manifest\",\n",[34,552,553],{"class":36,"line":62},[34,554,555],{}," \"specVersion\": \"1.0.0-beta.1\",\n",[34,557,558],{"class":36,"line":69},[34,559,560],{}," \"createdAt\": \"2026-09-22T10:00:00.000Z\",\n",[34,562,563],{"class":36,"line":75},[34,564,565],{}," \"updatedAt\": \"2026-09-22T10:03:12.481Z\",\n",[34,567,568],{"class":36,"line":89},[34,569,570],{}," \"projectRoot\": \"\u002Fhome\u002Frunner\u002Fwork\u002Fapp\u002Fapp\",\n",[34,572,573],{"class":36,"line":94},[34,574,575],{}," \"platform\": {\n",[34,577,578],{"class":36,"line":100},[34,579,580],{}," \"osPlatform\": \"linux\",\n",[34,582,583],{"class":36,"line":278},[34,584,585],{}," \"arch\": \"x64\",\n",[34,587,588],{"class":36,"line":287},[34,589,590],{}," \"osRelease\": \"6.8.0-1021-azure\",\n",[34,592,593],{"class":36,"line":293},[34,594,595],{}," },\n",[34,597,598],{"class":36,"line":302},[34,599,600],{}," \"ci\": {\n",[34,602,603],{"class":36,"line":308},[34,604,605],{}," \"provider\": \"github\",\n",[34,607,608],{"class":36,"line":323},[34,609,610],{}," \"repositoryName\": \"acme\u002Fapp\",\n",[34,612,613],{"class":36,"line":330},[34,614,615],{}," \"repositoryUrl\": \"https:\u002F\u002Fgithub.com\u002Facme\u002Fapp\",\n",[34,617,618,621],{"class":36,"line":335},[34,619,620],{}," \"commit\": \"0f1e2d…\",",[34,622,623],{}," \u002F\u002F on pull_request events: the merge commit\n",[34,625,626],{"class":36,"line":342},[34,627,628],{}," \"ref\": \"refs\u002Fpull\u002F42\u002Fmerge\",\n",[34,630,632],{"class":36,"line":631},18,[34,633,634],{}," \"branchName\": \"feat\u002Fnew-header\",\n",[34,636,638],{"class":36,"line":637},19,[34,639,640],{}," \"pullRequest\": {\n",[34,642,644],{"class":36,"line":643},20,[34,645,646],{}," \"number\": 42,\n",[34,648,650],{"class":36,"line":649},21,[34,651,652],{}," \"headSha\": \"9a8b7c…\",\n",[34,654,656],{"class":36,"line":655},22,[34,657,658],{}," \"headRef\": \"feat\u002Fnew-header\",\n",[34,660,662],{"class":36,"line":661},23,[34,663,664],{}," \"baseRef\": \"main\",\n",[34,666,668],{"class":36,"line":667},24,[34,669,290],{},[34,671,673],{"class":36,"line":672},25,[34,674,675],{}," \"event\": \"pull_request\",\n",[34,677,679],{"class":36,"line":678},26,[34,680,681],{}," \"buildId\": \"1234567890\",\n",[34,683,685],{"class":36,"line":684},27,[34,686,687],{}," \"buildName\": \"CI\",\n",[34,689,691],{"class":36,"line":690},28,[34,692,693],{}," \"buildUrl\": \"https:\u002F\u002Fgithub.com\u002Facme\u002Fapp\u002Factions\u002Fruns\u002F1234567890\u002Fattempts\u002F1\",\n",[34,695,697],{"class":36,"line":696},29,[34,698,699],{}," \"runAttempt\": \"1\",\n",[34,701,703],{"class":36,"line":702},30,[34,704,705],{}," \"job\": \"e2e\",\n",[34,707,709],{"class":36,"line":708},31,[34,710,711],{}," \"workspace\": \"\u002Fhome\u002Frunner\u002Fwork\u002Fapp\u002Fapp\",\n",[34,713,715],{"class":36,"line":714},32,[34,716,595],{},[34,718,720],{"class":36,"line":719},33,[34,721,722],{}," \"tool\": {\n",[34,724,726],{"class":36,"line":725},34,[34,727,728],{}," \"name\": \"@pixsame\u002Fcypress-plugin-visual-regression-diff\",\n",[34,730,732],{"class":36,"line":731},35,[34,733,734],{}," \"version\": \"1.1.0\",\n",[34,736,738],{"class":36,"line":737},36,[34,739,740],{}," }, \u002F\u002F what wrote the file\n",[34,742,744,747],{"class":36,"line":743},37,[34,745,746],{}," \"options\": { \"updateImages\": \"failures-only\" },",[34,748,749],{}," \u002F\u002F global pluginVisualRegression* options, prefix stripped\n",[34,751,753],{"class":36,"line":752},38,[34,754,755],{}," \"runner\": {\n",[34,757,759],{"class":36,"line":758},39,[34,760,761],{}," \"name\": \"cypress\",\n",[34,763,765],{"class":36,"line":764},40,[34,766,767],{}," \"version\": \"16.1.0\",\n",[34,769,771],{"class":36,"line":770},41,[34,772,773],{}," \"testingType\": \"e2e\",\n",[34,775,777],{"class":36,"line":776},42,[34,778,779],{}," \"mode\": \"run\",\n",[34,781,783],{"class":36,"line":782},43,[34,784,785],{}," \"configFile\": \"cypress.config.ts\",\n",[34,787,789],{"class":36,"line":788},44,[34,790,791],{}," \"browser\": {\n",[34,793,795],{"class":36,"line":794},45,[34,796,797],{}," \"name\": \"chrome\",\n",[34,799,801],{"class":36,"line":800},46,[34,802,803],{}," \"version\": \"130.0.0.0\",\n",[34,805,807],{"class":36,"line":806},47,[34,808,809],{}," \"family\": \"chromium\",\n",[34,811,813],{"class":36,"line":812},48,[34,814,815],{}," \"headless\": true,\n",[34,817,819],{"class":36,"line":818},49,[34,820,290],{},[34,822,824],{"class":36,"line":823},50,[34,825,826],{}," \"specs\": [\"cypress\u002Fe2e\u002Fhome.cy.ts\"],\n",[34,828,830],{"class":36,"line":829},51,[34,831,832],{}," \"specPattern\": \"cypress\u002Fe2e\u002F**\u002F*.cy.{js,jsx,ts,tsx}\",\n",[34,834,836],{"class":36,"line":835},52,[34,837,838],{}," \"baseUrl\": \"http:\u002F\u002Flocalhost:3000\",\n",[34,840,842],{"class":36,"line":841},53,[34,843,844],{}," \"viewport\": { \"width\": 1280, \"height\": 720 },\n",[34,846,848],{"class":36,"line":847},54,[34,849,595],{},[34,851,853],{"class":36,"line":852},55,[34,854,855],{}," \"summary\": {\n",[34,857,859],{"class":36,"line":858},56,[34,860,861],{}," \"entries\": 1,\n",[34,863,865],{"class":36,"line":864},57,[34,866,867],{}," \"passed\": 0,\n",[34,869,871],{"class":36,"line":870},58,[34,872,873],{}," \"failed\": 1,\n",[34,875,877],{"class":36,"line":876},59,[34,878,879],{}," \"missingBaseline\": 0,\n",[34,881,883],{"class":36,"line":882},60,[34,884,885],{}," \"created\": 0,\n",[34,887,889],{"class":36,"line":888},61,[34,890,891],{}," \"updated\": 0,\n",[34,893,895],{"class":36,"line":894},62,[34,896,897],{}," \"approved\": 0,\n",[34,899,901],{"class":36,"line":900},63,[34,902,903],{}," \"needsHuman\": 1,\n",[34,905,907],{"class":36,"line":906},64,[34,908,595],{},[34,910,912],{"class":36,"line":911},65,[34,913,914],{}," \"entries\": [\n",[34,916,918],{"class":36,"line":917},66,[34,919,920],{}," {\n",[34,922,924],{"class":36,"line":923},67,[34,925,926],{}," \"name\": \"home page renders_#0\",\n",[34,928,930],{"class":36,"line":929},68,[34,931,932],{}," \"test\": {\n",[34,934,936],{"class":36,"line":935},69,[34,937,938],{}," \"filePath\": \"cypress\u002Fe2e\u002Fhome.cy.ts\",\n",[34,940,942],{"class":36,"line":941},70,[34,943,944],{}," \"titlePath\": [\"home page\", \"renders\"],\n",[34,946,948],{"class":36,"line":947},71,[34,949,950],{}," \"retry\": 0,\n",[34,952,954],{"class":36,"line":953},72,[34,955,956],{}," },\n",[34,958,960],{"class":36,"line":959},73,[34,961,962],{}," \"status\": \"failed\",\n",[34,964,966],{"class":36,"line":965},74,[34,967,968],{}," \"comparison\": { \"diffRatio\": 0.0231, \"threshold\": 0.01 },\n",[34,970,972],{"class":36,"line":971},75,[34,973,974],{}," \"images\": {\n",[34,976,978],{"class":36,"line":977},76,[34,979,980],{}," \"baseline\": {\n",[34,982,984],{"class":36,"line":983},77,[34,985,986],{}," \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.png\",\n",[34,988,990],{"class":36,"line":989},78,[34,991,992],{}," \"width\": 1280,\n",[34,994,996],{"class":36,"line":995},79,[34,997,998],{}," \"height\": 720,\n",[34,1000,1002],{"class":36,"line":1001},80,[34,1003,1004],{}," },\n",[34,1006,1008],{"class":36,"line":1007},81,[34,1009,1010],{}," \"actual\": {\n",[34,1012,1014],{"class":36,"line":1013},82,[34,1015,1016],{}," \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.actual.png\",\n",[34,1018,1020],{"class":36,"line":1019},83,[34,1021,992],{},[34,1023,1025],{"class":36,"line":1024},84,[34,1026,998],{},[34,1028,1030],{"class":36,"line":1029},85,[34,1031,1004],{},[34,1033,1035],{"class":36,"line":1034},86,[34,1036,1037],{}," \"diff\": {\n",[34,1039,1041],{"class":36,"line":1040},87,[34,1042,1043],{}," \"path\": \"cypress\u002Fe2e\u002F__image_snapshots__\u002Fhome page renders_#0.diff.png\",\n",[34,1045,1047],{"class":36,"line":1046},88,[34,1048,1004],{},[34,1050,1052],{"class":36,"line":1051},89,[34,1053,956],{},[34,1055,1057],{"class":36,"line":1056},90,[34,1058,1059],{}," \"baselineWritten\": false,\n",[34,1061,1063],{"class":36,"line":1062},91,[34,1064,1065],{}," \"recordedAt\": \"2026-09-22T10:03:12.480Z\",\n",[34,1067,1069],{"class":36,"line":1068},92,[34,1070,1071],{}," \"platform\": {\n",[34,1073,1075],{"class":36,"line":1074},93,[34,1076,1077],{}," \"osPlatform\": \"linux\",\n",[34,1079,1081],{"class":36,"line":1080},94,[34,1082,1083],{}," \"arch\": \"x64\",\n",[34,1085,1087],{"class":36,"line":1086},95,[34,1088,1089],{}," \"browser\": {\n",[34,1091,1093],{"class":36,"line":1092},96,[34,1094,1095],{}," \"name\": \"chrome\",\n",[34,1097,1099],{"class":36,"line":1098},97,[34,1100,1101],{}," \"version\": \"130.0.0.0\",\n",[34,1103,1105],{"class":36,"line":1104},98,[34,1106,1107],{}," \"family\": \"chromium\",\n",[34,1109,1111],{"class":36,"line":1110},99,[34,1112,1113],{}," \"headless\": true,\n",[34,1115,1117],{"class":36,"line":1116},100,[34,1118,1004],{},[34,1120,1122],{"class":36,"line":1121},101,[34,1123,956],{},[34,1125,1127],{"class":36,"line":1126},102,[34,1128,1129],{}," \"viewport\": { \"width\": 1280, \"height\": 720 },\n",[34,1131,1133],{"class":36,"line":1132},103,[34,1134,1135],{}," \"options\": {\n",[34,1137,1139],{"class":36,"line":1138},104,[34,1140,1141],{}," \"imagesPath\": \"{spec_path}\u002F__image_snapshots__\",\n",[34,1143,1145],{"class":36,"line":1144},105,[34,1146,1147],{}," \"maxDiffThreshold\": 0.01,\n",[34,1149,1151],{"class":36,"line":1150},106,[34,1152,1153],{}," \"diffConfig\": {},\n",[34,1155,1157],{"class":36,"line":1156},107,[34,1158,1159],{}," \"createMissingImages\": true,\n",[34,1161,1163],{"class":36,"line":1162},108,[34,1164,1165],{}," \"updateImages\": false,\n",[34,1167,1169],{"class":36,"line":1168},109,[34,1170,1171],{}," \"forceDeviceScaleFactor\": true,\n",[34,1173,1175],{"class":36,"line":1174},110,[34,1176,1177],{}," \"screenshotConfig\": {},\n",[34,1179,1181],{"class":36,"line":1180},111,[34,1182,956],{},[34,1184,1186],{"class":36,"line":1185},112,[34,1187,1188],{}," \"renderer\": {\n",[34,1190,1192],{"class":36,"line":1191},113,[34,1193,1194],{}," \"backend\": \"native\",\n",[34,1196,1198],{"class":36,"line":1197},114,[34,1199,1200],{}," \"browser\": \"chrome\",\n",[34,1202,1204],{"class":36,"line":1203},115,[34,1205,1206],{}," \"browserVersion\": \"130.0.0.0\",\n",[34,1208,1210],{"class":36,"line":1209},116,[34,1211,956],{},[34,1213,1215],{"class":36,"line":1214},117,[34,1216,1217],{}," \"hashes\": {\n",[34,1219,1221,1224],{"class":36,"line":1220},118,[34,1222,1223],{}," \"baseline\": \"3b7e…\",",[34,1225,1226],{}," \u002F\u002F sha256 of the files listed in `images`, only for files that exist\n",[34,1228,1230],{"class":36,"line":1229},119,[34,1231,1232],{}," \"actual\": \"9d21…\",\n",[34,1234,1236],{"class":36,"line":1235},120,[34,1237,1238],{}," \"diff\": \"c0ff…\",\n",[34,1240,1242],{"class":36,"line":1241},121,[34,1243,956],{},[34,1245,1247],{"class":36,"line":1246},122,[34,1248,1249],{}," \"message\": \"2310 pixels (2.31%) differ; the limit is 1%.\",\n",[34,1251,1253],{"class":36,"line":1252},123,[34,1254,290],{},[34,1256,1258],{"class":36,"line":1257},124,[34,1259,1260],{}," ],\n",[34,1262,1264],{"class":36,"line":1263},125,[34,1265,1266],{},"}\n",[1268,1269,1270,1295],"table",{},[1271,1272,1273],"thead",{},[1274,1275,1276,1282,1285,1290],"tr",{},[1277,1278,1279],"th",{},[31,1280,1281],{},"status",[1277,1283,1284],{},"meaning",[1277,1286,1287],{},[31,1288,1289],{},"images.actual.path",[1277,1291,1292],{},[31,1293,1294],{},"images.diff.path",[1296,1297,1298,1318,1338,1357,1378,1404],"tbody",{},[1274,1299,1300,1306,1309,1314],{},[1301,1302,1303],"td",{},[31,1304,1305],{},"passed",[1301,1307,1308],{},"within threshold",[1301,1310,1311],{},[31,1312,1313],{},"null",[1301,1315,1316],{},[31,1317,1313],{},[1274,1319,1320,1325,1333,1336],{},[1301,1321,1322],{},[31,1323,1324],{},"failed",[1301,1326,1327,1328,491,1330,1332],{},"above threshold, ",[31,1329,490],{},[31,1331,494],{}," kept for review",[1301,1334,1335],{},"path",[1301,1337,1335],{},[1274,1339,1340,1345,1351,1353],{},[1301,1341,1342],{},[31,1343,1344],{},"missing-baseline",[1301,1346,1347,1348],{},"no baseline and ",[31,1349,1350],{},"createMissingImages: false",[1301,1352,1335],{},[1301,1354,1355],{},[31,1356,1313],{},[1274,1358,1359,1364,1370,1374],{},[1301,1360,1361],{},[31,1362,1363],{},"created",[1301,1365,1366,1367,1369],{},"no baseline, ",[31,1368,490],{}," became the baseline",[1301,1371,1372],{},[31,1373,1313],{},[1301,1375,1376],{},[31,1377,1313],{},[1274,1379,1380,1385,1396,1400],{},[1301,1381,1382],{},[31,1383,1384],{},"updated",[1301,1386,1387,1388,1391,1392,1395],{},"baseline overwritten (",[31,1389,1390],{},"updateImages: true"," or ",[31,1393,1394],{},"'failures-only'",")",[1301,1397,1398],{},[31,1399,1313],{},[1301,1401,1402],{},[31,1403,1313],{},[1274,1405,1406,1411,1414,1418],{},[1301,1407,1408],{},[31,1409,1410],{},"approved",[1301,1412,1413],{},"baseline replaced from the headed review UI (\"Replace image\")",[1301,1415,1416],{},[31,1417,1313],{},[1301,1419,1420],{},[31,1421,1313],{},[20,1423,1424],{},"Run-level fields:",[1268,1426,1427,1436],{},[1271,1428,1429],{},[1274,1430,1431,1434],{},[1277,1432,1433],{},"field",[1277,1435,1284],{},[1296,1437,1438,1451,1486,1496,1517,1539,1590],{},[1274,1439,1440,1448],{},[1301,1441,1442,269,1445],{},[31,1443,1444],{},"createdAt",[31,1446,1447],{},"updatedAt",[1301,1449,1450],{},"when the run started and when the file was last rewritten (ISO 8601)",[1274,1452,1453,1458],{},[1301,1454,1455],{},[31,1456,1457],{},"platform",[1301,1459,1460,1463,1464,269,1467,269,1470,1473,1474,1477,1478,1481,1482,1485],{},[31,1461,1462],{},"osPlatform"," (",[31,1465,1466],{},"linux",[31,1468,1469],{},"darwin",[31,1471,1472],{},"win32","), ",[31,1475,1476],{},"arch",", the kernel ",[31,1479,1480],{},"osRelease"," and, in run mode, the human-readable ",[31,1483,1484],{},"osVersion"," of the machine that ran the tests",[1274,1487,1488,1493],{},[1301,1489,1490],{},[31,1491,1492],{},"tool",[1301,1494,1495],{},"what wrote the file: this plugin and its version",[1274,1497,1498,1503],{},[1301,1499,1500],{},[31,1501,1502],{},"ci",[1301,1504,1505,1506,1509,1510,1513,1514,1516],{},"detected from environment variables on GitHub Actions and GitLab CI; ",[31,1507,1508],{},"{ \"provider\": null }"," on other CI systems (only ",[31,1511,1512],{},"CI"," is set), ",[31,1515,1313],{}," when not on CI. Only the listed keys are ever copied from the environment",[1274,1518,1519,1524],{},[1301,1520,1521],{},[31,1522,1523],{},"options",[1301,1525,1526,1527,1530,1531,1534,1535,1538],{},"every ",[31,1528,1529],{},"pluginVisualRegression*"," option from ",[31,1532,1533],{},"expose","\u002F",[31,1536,1537],{},"env",", prefix stripped, values as configured (CLI values stay strings)",[1274,1540,1541,1546],{},[1301,1542,1543],{},[31,1544,1545],{},"runner",[1301,1547,1548,1549,1552,1553,1391,1556,1559,1560,1563,1564,1567,1568,491,1571,1573,1574,1577,1578,269,1581,269,1584,269,1587],{},"what ran the tests. ",[31,1550,1551],{},"mode"," is ",[31,1554,1555],{},"run",[31,1557,1558],{},"open","; ",[31,1561,1562],{},"browser"," is the launched browser; ",[31,1565,1566],{},"specs"," is only known in run mode; ",[31,1569,1570],{},"configFile",[31,1572,1566],{}," are relative to ",[31,1575,1576],{},"projectRoot",". Cypress Cloud runs also get ",[31,1579,1580],{},"cloud.runUrl",[31,1582,1583],{},"group",[31,1585,1586],{},"tag",[31,1588,1589],{},"parallel",[1274,1591,1592,1597],{},[1301,1593,1594],{},[31,1595,1596],{},"summary",[1301,1598,1599,1600,1552,1603,1605,1606,1609],{},"counts of the entries per status; ",[31,1601,1602],{},"needsHuman",[31,1604,1324],{}," + ",[31,1607,1608],{},"missingBaseline",", so a consumer can decide without reading the entries",[20,1611,1612],{},"Notes for consumers:",[114,1614,1615,1643,1657,1665,1716,1738,1772,1782,1814,1828,1847,1868],{},[117,1616,1617,1618,1620,1621,1623,1624,1627,1628,1631,1632,1634,1635,1638,1639,1642],{},"All paths are relative to ",[31,1619,1576],{}," and use ",[31,1622,1534],{}," separators; they may point outside the project (",[31,1625,1626],{},"..\u002F…",") when ",[31,1629,1630],{},"imagesPath"," is absolute. ",[31,1633,1576],{}," is the Cypress project, not necessarily the repository root: ",[31,1636,1637],{},"ci.workspace"," is the checkout directory, so ",[31,1640,1641],{},"relative(ci.workspace, projectRoot)"," gives the path prefix inside the repository.",[117,1644,1645,491,1647,1649,1650,1652,1653,1656],{},[31,1646,1324],{},[31,1648,1344],{}," are the entries that need a human: copying ",[31,1651,1289],{}," over ",[31,1654,1655],{},"images.baseline.path"," approves them.",[117,1658,1659,1662,1663,356],{},[31,1660,1661],{},"baselineWritten"," tells whether the working tree changed for that screenshot, regardless of ",[31,1664,1281],{},[117,1666,1667,1668,1671,1672,1675,1676,1463,1679,269,1682,269,1685,1391,1688,1691,1692,1695,1696,1699,1700,1703,1704,1707,1708,1711,1712,1715],{},"An entry whose comparison found differences carries ",[31,1669,1670],{},"extra.pixsame.analysis"," (unless ",[31,1673,1674],{},"analysis"," is off): a ",[31,1677,1678],{},"label",[31,1680,1681],{},"content-change",[31,1683,1684],{},"moved",[31,1686,1687],{},"noise-like",[31,1689,1690],{},"size-change","), a one-sentence ",[31,1693,1694],{},"description",", the changed ",[31,1697,1698],{},"regions"," with their boxes, a detected ",[31,1701,1702],{},"shift",", and a ",[31,1705,1706],{},"bundleKey"," that is equal for entries that changed in the same way. ",[31,1709,1710],{},"bundle()"," from ",[31,1713,1714],{},"@pixsame\u002Fanalysis"," groups entries by it.",[117,1717,1718,1719,491,1721,1724,1725,1727,1728,1730,1731,1733,1734,1737],{},"Every entry carries its own ",[31,1720,1457],{},[31,1722,1723],{},"viewport",", so entries from a matrix of machines can be told apart after concatenating several manifests. ",[31,1726,1523],{}," on an entry is the exact ",[31,1729,387],{}," input (",[31,1732,1630],{}," keeps its tokens unexpanded); ",[31,1735,1736],{},"comparison"," is the result.",[117,1739,1740,1742,1743,1746,1747,1552,1750,491,1753,1756,1757,1760,1761,491,1764,1767,1768,1771],{},[31,1741,1457],{}," is where the test ran, ",[31,1744,1745],{},"renderer"," is where the pixels came from. Today every screenshot is taken by the browser Cypress drives, so ",[31,1748,1749],{},"renderer.backend",[31,1751,1752],{},"native",[31,1754,1755],{},"renderer.browser"," repeats ",[31,1758,1759],{},"platform.browser.name",". The field exists so that a renderer other than the local browser (a pinned Docker image, a hosted renderer) can identify itself with ",[31,1762,1763],{},"rendererVersion",[31,1765,1766],{},"imageDigest",", and so that a run that had to fall back to the local browser can be flagged with ",[31,1769,1770],{},"renderer.fallback: true",". Treat entries with different renderers as different baselines.",[117,1773,1774,1777,1778,1781],{},[31,1775,1776],{},"hashes"," holds the sha256 of each file in ",[31,1779,1780],{},"images"," that exists on disk. Use it to skip re-uploading unchanged baselines, to check that an artifact matches the manifest, or to spot two entries that produced identical pixels.",[117,1783,1784,1785,491,1788,1791,1792,1795,1796,1799,1800,1803,1804,1807,1808,491,1811,356],{},"Mapping to a pull request: use ",[31,1786,1787],{},"ci.repositoryName",[31,1789,1790],{},"ci.pullRequest.number",". On GitHub ",[31,1793,1794],{},"pull_request"," events ",[31,1797,1798],{},"ci.commit"," is the temporary merge commit, so anything that pushes to the PR branch must use ",[31,1801,1802],{},"ci.pullRequest.headSha"," \u002F ",[31,1805,1806],{},"headRef",". The workflow artifact is found via ",[31,1809,1810],{},"ci.buildId",[31,1812,1813],{},"ci.runAttempt",[117,1815,1816,1817,1820,1821,1824,1825,1827],{},"Reproducing a run: ",[31,1818,1819],{},"npx cypress run --\u003Crunner.testingType> --browser \u003Crunner.browser.name> --config-file \u003Crunner.configFile> --spec \u003Crunner.specs joined with ,>",", plus one ",[31,1822,1823],{},"--expose \"pluginVisualRegression\u003CKey>=\u003Cvalue>\""," per entry of ",[31,1826,1523],{},". The manifest stores these as parts rather than a command string, so shell quoting and the package manager stay your choice.",[117,1829,1830,1831,1463,1834,1837,1838,1605,1841,1711,1844,1846],{},"The file is rewritten after every comparison, so it is complete even when the run is aborted. When specs run in parallel on several machines, each machine writes its own manifest; ",[31,1832,1833],{},"**\u002Fvisual-regression-manifest{,.*}.json",[31,1835,1836],{},"MANIFEST_FILE_GLOB"," in the package) finds all of them in an artifact, and ",[31,1839,1840],{},"readManifestFiles",[31,1842,1843],{},"mergeManifests",[31,1845,517],{}," turn them into one list with a later CI attempt winning over an earlier one.",[117,1848,1849,1850,1852,1853,1855,1856,1859,1860,1863,1864,1867],{},"Only the ",[31,1851,1545],{}," block and the keys of ",[31,1854,1523],{}," are Cypress-specific; the rest of the format is shared with every other writer. ",[31,1857,1858],{},"specVersion"," follows semver and its major is bumped on breaking changes to the format only; consumers ignore keys they do not know. Because the field names follow CTRF, ",[31,1861,1862],{},"toCtrf"," from the package turns a manifest into a ",[352,1865,503],{"href":501,"rel":1866},[423]," report for tooling that reads that format.",[117,1869,1870,1871,1874,1875,1878,1879,356],{},"The ",[31,1872,1873],{},"Manifest*"," types are re-exported from ",[31,1876,1877],{},"@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins"," for convenience; they are the ones from ",[31,1880,517],{},[20,1882,1883,1884,1887,1888,1891],{},"The manifest is on by default. To write it somewhere else (paths are resolved against the project root) or to turn it off, use the ",[31,1885,1886],{},"pluginVisualRegressionManifestPath"," key (",[31,1889,1890],{},"false"," disables it, nothing else changes):",[24,1893,1895],{"className":26,"code":1894,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionManifestPath=reports\u002Fvisual-regression.json\"\nnpx cypress run --expose \"pluginVisualRegressionManifestPath=false\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionManifestPath=false\"\n",[31,1896,1897,1901,1914,1927,1931],{"__ignoreMap":29},[34,1898,1899],{"class":36,"line":37},[34,1900,442],{"class":40},[34,1902,1903,1905,1907,1909,1911],{"class":36,"line":44},[34,1904,447],{"class":47},[34,1906,450],{"class":51},[34,1908,453],{"class":51},[34,1910,456],{"class":55},[34,1912,1913],{"class":51}," \"pluginVisualRegressionManifestPath=reports\u002Fvisual-regression.json\"\n",[34,1915,1916,1918,1920,1922,1924],{"class":36,"line":62},[34,1917,447],{"class":47},[34,1919,450],{"class":51},[34,1921,453],{"class":51},[34,1923,456],{"class":55},[34,1925,1926],{"class":51}," \"pluginVisualRegressionManifestPath=false\"\n",[34,1928,1929],{"class":36,"line":69},[34,1930,464],{"class":40},[34,1932,1933,1935,1937,1939,1941],{"class":36,"line":75},[34,1934,447],{"class":47},[34,1936,450],{"class":51},[34,1938,453],{"class":51},[34,1940,475],{"class":55},[34,1942,1926],{"class":51},[20,1944,1945],{},"When you run both e2e and component tests with a custom path, include the testing type in it yourself; the runs would otherwise overwrite each other's file.",[10,1947,1949],{"id":1948},"configuration","Configuration",[20,1951,1952],{},"Configure the plugin:",[114,1954,1955],{},[117,1956,1957,1958,1960],{},"by passing in configuration as an argument to ",[31,1959,387],{}," command:",[24,1962,1964],{"className":126,"code":1963,"language":128,"meta":29,"style":29},"cy.matchImage({\n \u002F\u002F screenshot configuration, passed directly to the the Cypress screenshot method: https:\u002F\u002Fdocs.cypress.io\u002Fapi\u002Fcypress-api\u002Fscreenshot-api#Arguments\n \u002F\u002F default: { }\n screenshotConfig: {\n blackout: ['.element-to-be-blackouted'],\n },\n \u002F\u002F pixelmatch options, see: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpixelmatch#pixelmatchimg1-img2-output-width-height-options\n \u002F\u002F default: {} - pixelmatch defaults, notably includeAA: false (anti-aliased edge pixels are not counted as differences)\n diffConfig: {\n threshold: 0.01,\n },\n \u002F\u002F whether to create missing baseline images automatically\n \u002F\u002F default: true\n createMissingImages: false,\n \u002F\u002F whether to update images automatically - useful for CI\n \u002F\u002F - true: overwrite all baseline images without comparing (fastest)\n \u002F\u002F - 'failures-only': compare first, update baseline only when diff exceeds threshold\n \u002F\u002F - false: never update baseline images automatically\n \u002F\u002F default: false\n updateImages: true,\n \u002F\u002F directory path in which screenshot images will be stored\n \u002F\u002F relative path are resolved against project root\n \u002F\u002F absolute paths (both on unix and windows OS) supported\n \u002F\u002F path separators will be normalised by the plugin depending on OS, you should always use \u002F as path separator, e.g.: C:\u002Fmy-directory\u002Fnested for windows-like drive notation\n \u002F\u002F These variables can be used in the path:\n \u002F\u002F - {spec_path} - relative path leading from project root to the current spec file directory (e.g. `\u002Fsrc\u002Fcomponents\u002Fmy-tested-component`); has to be a whole path segment\n \u002F\u002F - {platform} - `{os}-{browser}`, e.g. `linux-chrome`, `darwin-electron`, `win32-firefox`\n \u002F\u002F - {os} - Cypress.platform: `linux`, `darwin` or `win32`\n \u002F\u002F - {browser} - the browser Cypress runs the spec in (Cypress.browser.name): `electron` unless `--browser` says otherwise, `chrome`, `firefox`, `edge`, ...\n \u002F\u002F {platform}, {os} and {browser} can also be part of a segment (`shots-{platform}`); `matchAgainstPath` is never expanded\n \u002F\u002F Use them to keep baselines of different OSes\u002Fbrowsers apart, see \"Per-platform baselines\" below\n \u002F\u002F default: '{spec_path}\u002F__image_snapshots__'\n imagesPath: 'this-might-be-your-custom\u002Fmaybe-nested-directory',\n \u002F\u002F maximum threshold above which the test should fail\n \u002F\u002F default: 0.01\n maxDiffThreshold: 0.1,\n \u002F\u002F describe what changed when a comparison finds differences, e.g. \"Everything below y=340 moved down by 12 px.\"\n \u002F\u002F the sentence ends the failure message, shows in the review carousel and is recorded in the run manifest\n \u002F\u002F it never changes whether the comparison passes\n \u002F\u002F default: true\n analysis: false,\n \u002F\u002F forces scale factor to be set as value \"1\"\n \u002F\u002F helps with screenshots being scaled 2x on high-density screens like Mac Retina\n \u002F\u002F default: true\n forceDeviceScaleFactor: false,\n \u002F\u002F applies the deterministic rendering preset, see \"Reducing cross-OS rendering noise\" below\n \u002F\u002F per call it only controls the CSS injected into the page for the screenshot (caret, animations, scrollbars);\n \u002F\u002F the browser switches are process-wide and follow the global pluginVisualRegressionDeterministicRendering option\n \u002F\u002F default: true\n deterministicRendering: false,\n \u002F\u002F title used for naming the image file\n \u002F\u002F default: Cypress.currentTest.titlePath (your test title)\n title: `${Cypress.currentTest.titlePath.join(' ')} (${Cypress.browser.displayName})`,\n \u002F\u002F pass a path to custom image that should be used for comparison\n \u002F\u002F instead of checking against the image from previous run\n \u002F\u002F default: undefined\n matchAgainstPath: '\u002Fpath\u002Fto\u002Freference-image.png',\n});\n",[31,1965,1966,1974,1979,1984,1989,2000,2004,2009,2014,2019,2029,2033,2038,2043,2052,2057,2062,2067,2072,2077,2087,2092,2097,2102,2107,2112,2117,2122,2127,2132,2137,2142,2147,2157,2162,2167,2177,2182,2187,2192,2196,2205,2210,2215,2219,2228,2233,2238,2243,2247,2256,2261,2266,2318,2323,2328,2333,2343],{"__ignoreMap":29},[34,1967,1968,1970,1972],{"class":36,"line":37},[34,1969,373],{"class":147},[34,1971,387],{"class":162},[34,1973,246],{"class":147},[34,1975,1976],{"class":36,"line":44},[34,1977,1978],{"class":40}," \u002F\u002F screenshot configuration, passed directly to the the Cypress screenshot method: https:\u002F\u002Fdocs.cypress.io\u002Fapi\u002Fcypress-api\u002Fscreenshot-api#Arguments\n",[34,1980,1981],{"class":36,"line":62},[34,1982,1983],{"class":40}," \u002F\u002F default: { }\n",[34,1985,1986],{"class":36,"line":69},[34,1987,1988],{"class":147}," screenshotConfig: {\n",[34,1990,1991,1994,1997],{"class":36,"line":75},[34,1992,1993],{"class":147}," blackout: [",[34,1995,1996],{"class":51},"'.element-to-be-blackouted'",[34,1998,1999],{"class":147},"],\n",[34,2001,2002],{"class":36,"line":89},[34,2003,595],{"class":147},[34,2005,2006],{"class":36,"line":94},[34,2007,2008],{"class":40}," \u002F\u002F pixelmatch options, see: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpixelmatch#pixelmatchimg1-img2-output-width-height-options\n",[34,2010,2011],{"class":36,"line":100},[34,2012,2013],{"class":40}," \u002F\u002F default: {} - pixelmatch defaults, notably includeAA: false (anti-aliased edge pixels are not counted as differences)\n",[34,2015,2016],{"class":36,"line":278},[34,2017,2018],{"class":147}," diffConfig: {\n",[34,2020,2021,2024,2027],{"class":36,"line":287},[34,2022,2023],{"class":147}," threshold: ",[34,2025,2026],{"class":55},"0.01",[34,2028,299],{"class":147},[34,2030,2031],{"class":36,"line":293},[34,2032,595],{"class":147},[34,2034,2035],{"class":36,"line":302},[34,2036,2037],{"class":40}," \u002F\u002F whether to create missing baseline images automatically\n",[34,2039,2040],{"class":36,"line":308},[34,2041,2042],{"class":40}," \u002F\u002F default: true\n",[34,2044,2045,2048,2050],{"class":36,"line":323},[34,2046,2047],{"class":147}," createMissingImages: ",[34,2049,1890],{"class":55},[34,2051,299],{"class":147},[34,2053,2054],{"class":36,"line":330},[34,2055,2056],{"class":40}," \u002F\u002F whether to update images automatically - useful for CI\n",[34,2058,2059],{"class":36,"line":335},[34,2060,2061],{"class":40}," \u002F\u002F - true: overwrite all baseline images without comparing (fastest)\n",[34,2063,2064],{"class":36,"line":342},[34,2065,2066],{"class":40}," \u002F\u002F - 'failures-only': compare first, update baseline only when diff exceeds threshold\n",[34,2068,2069],{"class":36,"line":631},[34,2070,2071],{"class":40}," \u002F\u002F - false: never update baseline images automatically\n",[34,2073,2074],{"class":36,"line":637},[34,2075,2076],{"class":40}," \u002F\u002F default: false\n",[34,2078,2079,2082,2085],{"class":36,"line":643},[34,2080,2081],{"class":147}," updateImages: ",[34,2083,2084],{"class":55},"true",[34,2086,299],{"class":147},[34,2088,2089],{"class":36,"line":649},[34,2090,2091],{"class":40}," \u002F\u002F directory path in which screenshot images will be stored\n",[34,2093,2094],{"class":36,"line":655},[34,2095,2096],{"class":40}," \u002F\u002F relative path are resolved against project root\n",[34,2098,2099],{"class":36,"line":661},[34,2100,2101],{"class":40}," \u002F\u002F absolute paths (both on unix and windows OS) supported\n",[34,2103,2104],{"class":36,"line":667},[34,2105,2106],{"class":40}," \u002F\u002F path separators will be normalised by the plugin depending on OS, you should always use \u002F as path separator, e.g.: C:\u002Fmy-directory\u002Fnested for windows-like drive notation\n",[34,2108,2109],{"class":36,"line":672},[34,2110,2111],{"class":40}," \u002F\u002F These variables can be used in the path:\n",[34,2113,2114],{"class":36,"line":678},[34,2115,2116],{"class":40}," \u002F\u002F - {spec_path} - relative path leading from project root to the current spec file directory (e.g. `\u002Fsrc\u002Fcomponents\u002Fmy-tested-component`); has to be a whole path segment\n",[34,2118,2119],{"class":36,"line":684},[34,2120,2121],{"class":40}," \u002F\u002F - {platform} - `{os}-{browser}`, e.g. `linux-chrome`, `darwin-electron`, `win32-firefox`\n",[34,2123,2124],{"class":36,"line":690},[34,2125,2126],{"class":40}," \u002F\u002F - {os} - Cypress.platform: `linux`, `darwin` or `win32`\n",[34,2128,2129],{"class":36,"line":696},[34,2130,2131],{"class":40}," \u002F\u002F - {browser} - the browser Cypress runs the spec in (Cypress.browser.name): `electron` unless `--browser` says otherwise, `chrome`, `firefox`, `edge`, ...\n",[34,2133,2134],{"class":36,"line":702},[34,2135,2136],{"class":40}," \u002F\u002F {platform}, {os} and {browser} can also be part of a segment (`shots-{platform}`); `matchAgainstPath` is never expanded\n",[34,2138,2139],{"class":36,"line":708},[34,2140,2141],{"class":40}," \u002F\u002F Use them to keep baselines of different OSes\u002Fbrowsers apart, see \"Per-platform baselines\" below\n",[34,2143,2144],{"class":36,"line":714},[34,2145,2146],{"class":40}," \u002F\u002F default: '{spec_path}\u002F__image_snapshots__'\n",[34,2148,2149,2152,2155],{"class":36,"line":719},[34,2150,2151],{"class":147}," imagesPath: ",[34,2153,2154],{"class":51},"'this-might-be-your-custom\u002Fmaybe-nested-directory'",[34,2156,299],{"class":147},[34,2158,2159],{"class":36,"line":725},[34,2160,2161],{"class":40}," \u002F\u002F maximum threshold above which the test should fail\n",[34,2163,2164],{"class":36,"line":731},[34,2165,2166],{"class":40}," \u002F\u002F default: 0.01\n",[34,2168,2169,2172,2175],{"class":36,"line":737},[34,2170,2171],{"class":147}," maxDiffThreshold: ",[34,2173,2174],{"class":55},"0.1",[34,2176,299],{"class":147},[34,2178,2179],{"class":36,"line":743},[34,2180,2181],{"class":40}," \u002F\u002F describe what changed when a comparison finds differences, e.g. \"Everything below y=340 moved down by 12 px.\"\n",[34,2183,2184],{"class":36,"line":752},[34,2185,2186],{"class":40}," \u002F\u002F the sentence ends the failure message, shows in the review carousel and is recorded in the run manifest\n",[34,2188,2189],{"class":36,"line":758},[34,2190,2191],{"class":40}," \u002F\u002F it never changes whether the comparison passes\n",[34,2193,2194],{"class":36,"line":764},[34,2195,2042],{"class":40},[34,2197,2198,2201,2203],{"class":36,"line":770},[34,2199,2200],{"class":147}," analysis: ",[34,2202,1890],{"class":55},[34,2204,299],{"class":147},[34,2206,2207],{"class":36,"line":776},[34,2208,2209],{"class":40}," \u002F\u002F forces scale factor to be set as value \"1\"\n",[34,2211,2212],{"class":36,"line":782},[34,2213,2214],{"class":40}," \u002F\u002F helps with screenshots being scaled 2x on high-density screens like Mac Retina\n",[34,2216,2217],{"class":36,"line":788},[34,2218,2042],{"class":40},[34,2220,2221,2224,2226],{"class":36,"line":794},[34,2222,2223],{"class":147}," forceDeviceScaleFactor: ",[34,2225,1890],{"class":55},[34,2227,299],{"class":147},[34,2229,2230],{"class":36,"line":800},[34,2231,2232],{"class":40}," \u002F\u002F applies the deterministic rendering preset, see \"Reducing cross-OS rendering noise\" below\n",[34,2234,2235],{"class":36,"line":806},[34,2236,2237],{"class":40}," \u002F\u002F per call it only controls the CSS injected into the page for the screenshot (caret, animations, scrollbars);\n",[34,2239,2240],{"class":36,"line":812},[34,2241,2242],{"class":40}," \u002F\u002F the browser switches are process-wide and follow the global pluginVisualRegressionDeterministicRendering option\n",[34,2244,2245],{"class":36,"line":818},[34,2246,2042],{"class":40},[34,2248,2249,2252,2254],{"class":36,"line":823},[34,2250,2251],{"class":147}," deterministicRendering: ",[34,2253,1890],{"class":55},[34,2255,299],{"class":147},[34,2257,2258],{"class":36,"line":829},[34,2259,2260],{"class":40}," \u002F\u002F title used for naming the image file\n",[34,2262,2263],{"class":36,"line":835},[34,2264,2265],{"class":40}," \u002F\u002F default: Cypress.currentTest.titlePath (your test title)\n",[34,2267,2268,2271,2274,2277,2279,2282,2284,2287,2289,2292,2294,2297,2299,2302,2304,2306,2308,2310,2313,2316],{"class":36,"line":841},[34,2269,2270],{"class":147}," title: ",[34,2272,2273],{"class":51},"`${",[34,2275,2276],{"class":147},"Cypress",[34,2278,356],{"class":51},[34,2280,2281],{"class":147},"currentTest",[34,2283,356],{"class":51},[34,2285,2286],{"class":147},"titlePath",[34,2288,356],{"class":51},[34,2290,2291],{"class":162},"join",[34,2293,166],{"class":51},[34,2295,2296],{"class":51},"' '",[34,2298,1395],{"class":51},[34,2300,2301],{"class":51},"} (${",[34,2303,2276],{"class":147},[34,2305,356],{"class":51},[34,2307,1562],{"class":147},[34,2309,356],{"class":51},[34,2311,2312],{"class":147},"displayName",[34,2314,2315],{"class":51},"})`",[34,2317,299],{"class":147},[34,2319,2320],{"class":36,"line":847},[34,2321,2322],{"class":40}," \u002F\u002F pass a path to custom image that should be used for comparison\n",[34,2324,2325],{"class":36,"line":852},[34,2326,2327],{"class":40}," \u002F\u002F instead of checking against the image from previous run\n",[34,2329,2330],{"class":36,"line":858},[34,2331,2332],{"class":40}," \u002F\u002F default: undefined\n",[34,2334,2335,2338,2341],{"class":36,"line":864},[34,2336,2337],{"class":147}," matchAgainstPath: ",[34,2339,2340],{"class":51},"'\u002Fpath\u002Fto\u002Freference-image.png'",[34,2342,299],{"class":147},[34,2344,2345],{"class":36,"line":870},[34,2346,2347],{"class":147},"});\n",[114,2349,2350],{},[117,2351,2352,2353,2358,2359,2362],{},"via ",[352,2354,2357],{"href":2355,"rel":2356},"https:\u002F\u002Fon.cypress.io\u002Fexpose",[423],"global expose configuration"," (Cypress 15.10+). Configuration key names are the same as the keys of the configuration object above, but with added ",[31,2360,2361],{},"pluginVisualRegression"," prefix, e.g.:",[24,2364,2366],{"className":26,"code":2365,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionUpdateImages=true,pluginVisualRegressionDiffConfig={\\\"threshold\\\":0.01}\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionUpdateImages=true,pluginVisualRegressionDiffConfig={\\\"threshold\\\":0.01}\"\n",[31,2367,2368,2372,2396,2400],{"__ignoreMap":29},[34,2369,2370],{"class":36,"line":37},[34,2371,442],{"class":40},[34,2373,2374,2376,2378,2380,2382,2385,2388,2391,2393],{"class":36,"line":44},[34,2375,447],{"class":47},[34,2377,450],{"class":51},[34,2379,453],{"class":51},[34,2381,456],{"class":55},[34,2383,2384],{"class":51}," \"pluginVisualRegressionUpdateImages=true,pluginVisualRegressionDiffConfig={",[34,2386,2387],{"class":140},"\\\"",[34,2389,2390],{"class":51},"threshold",[34,2392,2387],{"class":140},[34,2394,2395],{"class":51},":0.01}\"\n",[34,2397,2398],{"class":36,"line":62},[34,2399,464],{"class":40},[34,2401,2402,2404,2406,2408,2410,2412,2414,2416,2418],{"class":36,"line":69},[34,2403,447],{"class":47},[34,2405,450],{"class":51},[34,2407,453],{"class":51},[34,2409,475],{"class":55},[34,2411,2384],{"class":51},[34,2413,2387],{"class":140},[34,2415,2390],{"class":51},[34,2417,2387],{"class":140},[34,2419,2395],{"class":51},[20,2421,2422,2423,181,2426,2429],{},"Pass several options in one flag, separated by commas. When ",[31,2424,2425],{},"--expose",[31,2427,2428],{},"--env",") is repeated, Cypress keeps only the last occurrence.",[24,2431,2433],{"className":126,"code":2432,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress 15.10+)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n expose: {\n pluginVisualRegressionUpdateImages: true,\n pluginVisualRegressionDiffConfig: { threshold: 0.01 },\n },\n});\n",[31,2434,2435,2440,2452,2456,2466,2471,2480,2490,2496],{"__ignoreMap":29},[34,2436,2437],{"class":36,"line":37},[34,2438,2439],{"class":40},"\u002F\u002F cypress.config.ts (Cypress 15.10+)\n",[34,2441,2442,2444,2446,2448,2450],{"class":36,"line":44},[34,2443,141],{"class":140},[34,2445,200],{"class":147},[34,2447,203],{"class":140},[34,2449,206],{"class":51},[34,2451,148],{"class":147},[34,2453,2454],{"class":36,"line":62},[34,2455,66],{"emptyLinePlaceholder":65},[34,2457,2458,2460,2462,2464],{"class":36,"line":69},[34,2459,237],{"class":140},[34,2461,240],{"class":140},[34,2463,243],{"class":162},[34,2465,246],{"class":47},[34,2467,2468],{"class":36,"line":75},[34,2469,2470],{"class":147}," expose: {\n",[34,2472,2473,2476,2478],{"class":36,"line":89},[34,2474,2475],{"class":147}," pluginVisualRegressionUpdateImages: ",[34,2477,2084],{"class":55},[34,2479,299],{"class":147},[34,2481,2482,2485,2487],{"class":36,"line":94},[34,2483,2484],{"class":147}," pluginVisualRegressionDiffConfig: { threshold: ",[34,2486,2026],{"class":55},[34,2488,2489],{"class":147}," },\n",[34,2491,2492,2494],{"class":36,"line":100},[34,2493,296],{"class":147},[34,2495,299],{"class":47},[34,2497,2498,2500],{"class":36,"line":278},[34,2499,345],{"class":47},[34,2501,148],{"class":147},[24,2503,2505],{"className":126,"code":2504,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress \u003C15.10, deprecated in newer versions)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n env: {\n pluginVisualRegressionUpdateImages: true,\n pluginVisualRegressionDiffConfig: { threshold: 0.01 },\n },\n});\n",[31,2506,2507,2512,2524,2528,2538,2543,2551,2559,2565],{"__ignoreMap":29},[34,2508,2509],{"class":36,"line":37},[34,2510,2511],{"class":40},"\u002F\u002F cypress.config.ts (Cypress \u003C15.10, deprecated in newer versions)\n",[34,2513,2514,2516,2518,2520,2522],{"class":36,"line":44},[34,2515,141],{"class":140},[34,2517,200],{"class":147},[34,2519,203],{"class":140},[34,2521,206],{"class":51},[34,2523,148],{"class":147},[34,2525,2526],{"class":36,"line":62},[34,2527,66],{"emptyLinePlaceholder":65},[34,2529,2530,2532,2534,2536],{"class":36,"line":69},[34,2531,237],{"class":140},[34,2533,240],{"class":140},[34,2535,243],{"class":162},[34,2537,246],{"class":47},[34,2539,2540],{"class":36,"line":75},[34,2541,2542],{"class":147}," env: {\n",[34,2544,2545,2547,2549],{"class":36,"line":89},[34,2546,2475],{"class":147},[34,2548,2084],{"class":55},[34,2550,299],{"class":147},[34,2552,2553,2555,2557],{"class":36,"line":94},[34,2554,2484],{"class":147},[34,2556,2026],{"class":55},[34,2558,2489],{"class":147},[34,2560,2561,2563],{"class":36,"line":100},[34,2562,296],{"class":147},[34,2564,299],{"class":47},[34,2566,2567,2569],{"class":36,"line":278},[34,2568,345],{"class":47},[34,2570,148],{"class":147},[20,2572,2573,2574,356],{},"For more ways of setting expose variables ",[352,2575,2577],{"href":2355,"rel":2576},[423],"take a look here",[10,2579,2581],{"id":2580},"per-platform-baselines","Per-platform baselines",[20,2583,2584,2585,2587],{},"Chrome hands text rasterization to the operating system, so the same page never renders byte-for-byte identically on macOS, Linux and Windows, and browsers differ from each other on top of that. A baseline recorded on a developer's Mac therefore rarely matches the screenshot a Linux CI job takes of the same page. ",[31,2586,1630],{}," understands three tokens that keep the baselines of different platforms apart instead of letting them overwrite each other:",[1268,2589,2590,2600],{},[1271,2591,2592],{},[1274,2593,2594,2597],{},[1277,2595,2596],{},"token",[1277,2598,2599],{},"expands to",[1296,2601,2602,2621,2652],{},[1274,2603,2604,2609],{},[1301,2605,2606],{},[31,2607,2608],{},"{os}",[1301,2610,2611,2614,2615,269,2617,1391,2619],{},[31,2612,2613],{},"Cypress.platform",": ",[31,2616,1466],{},[31,2618,1469],{},[31,2620,1472],{},[1274,2622,2623,2628],{},[1301,2624,2625],{},[31,2626,2627],{},"{browser}",[1301,2629,2630,2633,2634,2637,2638,2641,2642,269,2645,269,2648,2651],{},[31,2631,2632],{},"Cypress.browser.name",", the browser Cypress runs the spec in: ",[31,2635,2636],{},"electron"," unless you pass ",[31,2639,2640],{},"--browser",", else ",[31,2643,2644],{},"chrome",[31,2646,2647],{},"firefox",[31,2649,2650],{},"edge",", ...",[1274,2653,2654,2659],{},[1301,2655,2656],{},[31,2657,2658],{},"{platform}",[1301,2660,2661,2664,2665,269,2668],{},[31,2662,2663],{},"{os}-{browser}",", e.g. ",[31,2666,2667],{},"linux-chrome",[31,2669,2670],{},"darwin-electron",[20,2672,2673,2674,2676,2677,2680,2681,2683,2684,2686,2687,2690,2691,356],{},"Every screenshot is taken by the browser Cypress drives, so ",[31,2675,2627],{}," is that browser; ",[31,2678,2679],{},"cypress run"," without ",[31,2682,2640],{}," uses Electron, which is why the folder is ",[31,2685,2670],{}," and not ",[31,2688,2689],{},"darwin-chrome"," unless CI passes ",[31,2692,2693],{},"--browser chrome",[20,2695,2696,2697,2699,2700,2703,2704,2707],{},"They are opt-in: the default ",[31,2698,1630],{}," stays ",[31,2701,2702],{},"{spec_path}\u002F__image_snapshots__",", a single set of baselines for everyone. That is the right layout when every run happens on the same OS and browser (for instance inside a container, see the FAQ) or when the remaining drift stays under your ",[31,2705,2706],{},"maxDiffThreshold",". To split by platform, add the token globally:",[24,2709,2711],{"className":26,"code":2710,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{platform}\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{platform}\"\n",[31,2712,2713,2717,2730,2734],{"__ignoreMap":29},[34,2714,2715],{"class":36,"line":37},[34,2716,442],{"class":40},[34,2718,2719,2721,2723,2725,2727],{"class":36,"line":44},[34,2720,447],{"class":47},[34,2722,450],{"class":51},[34,2724,453],{"class":51},[34,2726,456],{"class":55},[34,2728,2729],{"class":51}," \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{platform}\"\n",[34,2731,2732],{"class":36,"line":62},[34,2733,464],{"class":40},[34,2735,2736,2738,2740,2742,2744],{"class":36,"line":69},[34,2737,447],{"class":47},[34,2739,450],{"class":51},[34,2741,453],{"class":51},[34,2743,475],{"class":55},[34,2745,2729],{"class":51},[24,2747,2749],{"className":126,"code":2748,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress 15.10+; use `env` instead of `expose` on Cypress \u003C15.10)\nexport default defineConfig({\n expose: {\n pluginVisualRegressionImagesPath:\n '{spec_path}\u002F__image_snapshots__\u002F{platform}',\n },\n});\n",[31,2750,2751,2756,2766,2770,2775,2782,2788],{"__ignoreMap":29},[34,2752,2753],{"class":36,"line":37},[34,2754,2755],{"class":40},"\u002F\u002F cypress.config.ts (Cypress 15.10+; use `env` instead of `expose` on Cypress \u003C15.10)\n",[34,2757,2758,2760,2762,2764],{"class":36,"line":44},[34,2759,237],{"class":140},[34,2761,240],{"class":140},[34,2763,243],{"class":162},[34,2765,246],{"class":47},[34,2767,2768],{"class":36,"line":62},[34,2769,2470],{"class":147},[34,2771,2772],{"class":36,"line":69},[34,2773,2774],{"class":147}," pluginVisualRegressionImagesPath:\n",[34,2776,2777,2780],{"class":36,"line":75},[34,2778,2779],{"class":51}," '{spec_path}\u002F__image_snapshots__\u002F{platform}'",[34,2781,299],{"class":147},[34,2783,2784,2786],{"class":36,"line":89},[34,2785,296],{"class":147},[34,2787,299],{"class":47},[34,2789,2790,2792],{"class":36,"line":94},[34,2791,345],{"class":47},[34,2793,148],{"class":147},[24,2795,2800],{"className":2796,"code":2798,"language":2799},[2797],"language-text","cypress\u002Fe2e\u002F__image_snapshots__\u002F\n├── darwin-electron\u002F # what `cypress open` writes on a Mac\n│ └── home page renders_#0.png\n└── linux-chrome\u002F # what your CI job writes\n └── home page renders_#0.png\n","text",[31,2801,2798],{"__ignoreMap":29},[20,2803,2804],{},"Things to decide once you split:",[114,2806,2807,2844,2858],{},[117,2808,2809,2813,2814,2836,2839,2840,384],{},[2810,2811,2812],"strong",{},"Which baselines to commit."," Most teams commit only the CI platform and keep local ones out of git, so every developer gets their own set without polluting the repository:",[24,2815,2819],{"className":2816,"code":2817,"language":2818,"meta":29,"style":29},"language-gitignore shiki shiki-themes github-light-high-contrast github-dark-high-contrast","# ignore every platform folder except the one CI produces\n**\u002F__image_snapshots__\u002F*\u002F\n!**\u002F__image_snapshots__\u002Flinux-chrome\u002F\n","gitignore",[31,2820,2821,2826,2831],{"__ignoreMap":29},[34,2822,2823],{"class":36,"line":37},[34,2824,2825],{},"# ignore every platform folder except the one CI produces\n",[34,2827,2828],{"class":36,"line":44},[34,2829,2830],{},"**\u002F__image_snapshots__\u002F*\u002F\n",[34,2832,2833],{"class":36,"line":62},[34,2834,2835],{},"!**\u002F__image_snapshots__\u002Flinux-chrome\u002F\n",[2837,2838],"br",{},"New CI baselines then need to be produced on CI and committed from there (or approved from a PR, see ",[352,2841,2843],{"href":2842},"#run-manifest-ci-integration","Run manifest",[117,2845,2846,2849,2850,1391,2852,2854,2855,356],{},[2810,2847,2848],{},"Splitting only by browser or only by OS."," Use ",[31,2851,2627],{},[31,2853,2608],{}," on their own, e.g. ",[31,2856,2857],{},"{spec_path}\u002F__image_snapshots__\u002F{browser}",[117,2859,2860,2863,2864,2867,2868,2870,2871,2874,2875,356],{},[2810,2861,2862],{},"Cleanup deletes the other platforms' baselines."," ",[31,2865,2866],{},"pluginVisualRegressionCleanupUnusedImages"," globs the whole project for plugin-made PNGs and knows nothing about platforms: a run on ",[31,2869,2670],{}," treats every file under ",[31,2872,2873],{},"linux-chrome\u002F"," as unused and deletes it. Keep it off on machines that hold more than one platform's folder (a developer's checkout with committed CI baselines is exactly that) and enable it only where a single platform's baselines live, typically the CI job that produces them. If it does bite, the deleted folders come back with ",[31,2876,2877],{},"git checkout -- \u003Cfolder>",[20,2879,2880,2881,2886,2887,2889,2890,2892,2893,1742,2895,2897],{},"Where this is heading: the plan for ",[352,2882,2885],{"href":2883,"rel":2884},"https:\u002F\u002Fgithub.com\u002FFRSOURCE\u002Fcypress-plugin-visual-regression-diff\u002Fissues\u002F212",[423],"#212"," is a renderer that produces the pixels in a pinned Docker image no matter where Cypress runs, so local and CI images stop drifting by construction. ",[31,2888,2627],{}," then names the renderer's browser rather than the one Cypress drives, and ",[31,2891,2658],{}," remains useful for keeping several rendered browsers apart rather than for local-vs-CI drift. The manifest already records both sides: ",[31,2894,1457],{},[31,2896,1745],{}," is where the pixels came from.",[10,2899,2901],{"id":2900},"batch-review-mode","Batch Review Mode",[20,2903,2904,2905,2908],{},"Batch Review Mode is ",[2810,2906,2907],{},"enabled by default",". It lets you run a full test suite without stopping on the first visual diff failure. Instead, all failing snapshots are collected and presented in an interactive review UI after the tests complete, so you can approve or skip changes in bulk.",[15,2910,2912],{"id":2911},"additions-in-headed-mode-non-ci-environments","Additions in headed mode (non-CI environments)",[20,2914,2915],{},"A floating action button (FAB) appears in the bottom-right corner of the Cypress test runner. As tests run:",[114,2917,2918,2925,2928],{},[117,2919,2920,2921,2924],{},"Whenever a ",[31,2922,2923],{},"matchImage()"," call exceeds the diff threshold, the counter badge on the FAB increments instead of immediately throwing an error.",[117,2926,2927],{},"Once all tests finish, an error is thrown with the total count of failures.",[117,2929,2930,2931,2934,2935,2938],{},"Clicking the FAB opens a carousel where you can review each failing snapshot side-by-side (new vs. old) and either ",[2810,2932,2933],{},"replace"," the baseline or ",[2810,2936,2937],{},"skip"," the change.",[20,2940,2941],{},[2942,2943],"img",{"alt":2944,"src":2945},"Batch Review Mode demo","https:\u002F\u002Fraw.githubusercontent.com\u002Fpixsame\u002Fpixsame\u002Fmain\u002Fassets\u002Fbatch-review-mode.gif",[2947,2948,2949],"blockquote",{},[20,2950,2951,2952,2955,2956,2961],{},"Note: Before version 2 of ",[31,2953,2954],{},"@pixsame\u002Fcypress-plugin-visual-regression-diff"," Batch Review Mode was opt-in. See the ",[352,2957,2960],{"href":2958,"rel":2959},"https:\u002F\u002Fgithub.com\u002Fpixsame\u002Fpixsame\u002Fblob\u002Fmain\u002Fpackages\u002Fcypress-plugin-visual-regression-diff\u002FMIGRATION.md#4x---5x",[423],"migration guide"," if you upgrade from 4.x.",[15,2963,2965],{"id":2964},"how-to-disable","How to disable",[20,2967,2968,2969,2971,2972,2974,2975,2978,2979,2981],{},"Batch Review Mode is a global option (it cannot be passed to ",[31,2970,387],{}," directly). To go back to failing ",[31,2973,2923],{}," immediately on the first mismatch, set the ",[31,2976,2977],{},"pluginVisualRegressionBatchReviewMode"," key to ",[31,2980,1890],{},":",[24,2983,2985],{"className":26,"code":2984,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress open --expose \"pluginVisualRegressionBatchReviewMode=false\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress open --env \"pluginVisualRegressionBatchReviewMode=false\"\n",[31,2986,2987,2991,3005,3009],{"__ignoreMap":29},[34,2988,2989],{"class":36,"line":37},[34,2990,442],{"class":40},[34,2992,2993,2995,2997,3000,3002],{"class":36,"line":44},[34,2994,447],{"class":47},[34,2996,450],{"class":51},[34,2998,2999],{"class":51}," open",[34,3001,456],{"class":55},[34,3003,3004],{"class":51}," \"pluginVisualRegressionBatchReviewMode=false\"\n",[34,3006,3007],{"class":36,"line":62},[34,3008,464],{"class":40},[34,3010,3011,3013,3015,3017,3019],{"class":36,"line":69},[34,3012,447],{"class":47},[34,3014,450],{"class":51},[34,3016,2999],{"class":51},[34,3018,475],{"class":55},[34,3020,3004],{"class":51},[24,3022,3024],{"className":126,"code":3023,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress 15.10+)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n expose: {\n pluginVisualRegressionBatchReviewMode: false,\n },\n});\n",[31,3025,3026,3030,3042,3046,3056,3060,3069,3075],{"__ignoreMap":29},[34,3027,3028],{"class":36,"line":37},[34,3029,2439],{"class":40},[34,3031,3032,3034,3036,3038,3040],{"class":36,"line":44},[34,3033,141],{"class":140},[34,3035,200],{"class":147},[34,3037,203],{"class":140},[34,3039,206],{"class":51},[34,3041,148],{"class":147},[34,3043,3044],{"class":36,"line":62},[34,3045,66],{"emptyLinePlaceholder":65},[34,3047,3048,3050,3052,3054],{"class":36,"line":69},[34,3049,237],{"class":140},[34,3051,240],{"class":140},[34,3053,243],{"class":162},[34,3055,246],{"class":47},[34,3057,3058],{"class":36,"line":75},[34,3059,2470],{"class":147},[34,3061,3062,3065,3067],{"class":36,"line":89},[34,3063,3064],{"class":147}," pluginVisualRegressionBatchReviewMode: ",[34,3066,1890],{"class":55},[34,3068,299],{"class":147},[34,3070,3071,3073],{"class":36,"line":94},[34,3072,296],{"class":147},[34,3074,299],{"class":47},[34,3076,3077,3079],{"class":36,"line":100},[34,3078,345],{"class":47},[34,3080,148],{"class":147},[24,3082,3084],{"className":126,"code":3083,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress \u003C15.10, deprecated in newer versions)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n env: {\n pluginVisualRegressionBatchReviewMode: false,\n },\n});\n",[31,3085,3086,3090,3102,3106,3116,3120,3128,3134],{"__ignoreMap":29},[34,3087,3088],{"class":36,"line":37},[34,3089,2511],{"class":40},[34,3091,3092,3094,3096,3098,3100],{"class":36,"line":44},[34,3093,141],{"class":140},[34,3095,200],{"class":147},[34,3097,203],{"class":140},[34,3099,206],{"class":51},[34,3101,148],{"class":147},[34,3103,3104],{"class":36,"line":62},[34,3105,66],{"emptyLinePlaceholder":65},[34,3107,3108,3110,3112,3114],{"class":36,"line":69},[34,3109,237],{"class":140},[34,3111,240],{"class":140},[34,3113,243],{"class":162},[34,3115,246],{"class":47},[34,3117,3118],{"class":36,"line":75},[34,3119,2542],{"class":147},[34,3121,3122,3124,3126],{"class":36,"line":89},[34,3123,3064],{"class":147},[34,3125,1890],{"class":55},[34,3127,299],{"class":147},[34,3129,3130,3132],{"class":36,"line":94},[34,3131,296],{"class":147},[34,3133,299],{"class":47},[34,3135,3136,3138],{"class":36,"line":100},[34,3137,345],{"class":47},[34,3139,148],{"class":147},[15,3141,3143],{"id":3142},"reviewing-passing-images","Reviewing passing images",[20,3145,3146,3147,3149,3150,3153,3154,3156],{},"Images that differ from the baseline but stay within ",[31,3148,2706],{}," do not fail the test, yet they are still collected. The carousel has a ",[2810,3151,3152],{},"Show passing"," checkbox that lets you browse them (each is marked with a ",[31,3155,1305],{}," badge) and replace their baseline too, e.g. to get rid of small accumulated drift.",[20,3158,3159,3160,3163],{},"The checkbox is unchecked by default. Use the ",[31,3161,3162],{},"pluginVisualRegressionBatchReviewModeShowPassingImages"," key to make it checked by default:",[24,3165,3167],{"className":26,"code":3166,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress open --expose \"pluginVisualRegressionBatchReviewModeShowPassingImages=true\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress open --env \"pluginVisualRegressionBatchReviewModeShowPassingImages=true\"\n",[31,3168,3169,3173,3186,3190],{"__ignoreMap":29},[34,3170,3171],{"class":36,"line":37},[34,3172,442],{"class":40},[34,3174,3175,3177,3179,3181,3183],{"class":36,"line":44},[34,3176,447],{"class":47},[34,3178,450],{"class":51},[34,3180,2999],{"class":51},[34,3182,456],{"class":55},[34,3184,3185],{"class":51}," \"pluginVisualRegressionBatchReviewModeShowPassingImages=true\"\n",[34,3187,3188],{"class":36,"line":62},[34,3189,464],{"class":40},[34,3191,3192,3194,3196,3198,3200],{"class":36,"line":69},[34,3193,447],{"class":47},[34,3195,450],{"class":51},[34,3197,2999],{"class":51},[34,3199,475],{"class":55},[34,3201,3185],{"class":51},[24,3203,3205],{"className":126,"code":3204,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress 15.10+)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n expose: {\n pluginVisualRegressionBatchReviewModeShowPassingImages: true,\n },\n});\n",[31,3206,3207,3211,3223,3227,3237,3241,3250,3256],{"__ignoreMap":29},[34,3208,3209],{"class":36,"line":37},[34,3210,2439],{"class":40},[34,3212,3213,3215,3217,3219,3221],{"class":36,"line":44},[34,3214,141],{"class":140},[34,3216,200],{"class":147},[34,3218,203],{"class":140},[34,3220,206],{"class":51},[34,3222,148],{"class":147},[34,3224,3225],{"class":36,"line":62},[34,3226,66],{"emptyLinePlaceholder":65},[34,3228,3229,3231,3233,3235],{"class":36,"line":69},[34,3230,237],{"class":140},[34,3232,240],{"class":140},[34,3234,243],{"class":162},[34,3236,246],{"class":47},[34,3238,3239],{"class":36,"line":75},[34,3240,2470],{"class":147},[34,3242,3243,3246,3248],{"class":36,"line":89},[34,3244,3245],{"class":147}," pluginVisualRegressionBatchReviewModeShowPassingImages: ",[34,3247,2084],{"class":55},[34,3249,299],{"class":147},[34,3251,3252,3254],{"class":36,"line":94},[34,3253,296],{"class":147},[34,3255,299],{"class":47},[34,3257,3258,3260],{"class":36,"line":100},[34,3259,345],{"class":47},[34,3261,148],{"class":147},[20,3263,3264],{},"Toggling the checkbox in the runner is remembered in the browser's local storage and takes precedence over the configured value on subsequent runs.",[10,3266,3268],{"id":3267},"reducing-cross-os-rendering-noise","Reducing cross-OS rendering noise",[20,3270,3271,3272,3275],{},"Browsers hand text rasterisation to the operating system (CoreText on macOS, DirectWrite on Windows, FreeType on Linux), so the same page never renders byte-for-byte identical on a developer's laptop and a Linux CI runner. The plugin cannot make that go away entirely, but the ",[31,3273,3274],{},"deterministicRendering"," preset (enabled by default) removes the part of the noise that lives inside the browser:",[114,3277,3278,3298,3308,3321],{},[117,3279,3280,3283,3284,3287,3288,3291,3292,1711,3295,356],{},[2810,3281,3282],{},"Chrome, Chromium, Edge"," are launched with ",[31,3285,3286],{},"--font-render-hinting=none --disable-font-subpixel-positioning --disable-lcd-text --force-color-profile=srgb --disable-gpu"," (text without OS hinting and subpixel tricks, no colour management, CPU rasterisation), plus ",[31,3289,3290],{},"--hide-scrollbars"," in headless mode. The list is exported as ",[31,3293,3294],{},"DETERMINISTIC_RENDERING_CHROMIUM_ARGS",[31,3296,3297],{},"@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fconstants",[117,3299,3300,3303,3304,3307],{},[2810,3301,3302],{},"Firefox"," gets the ",[31,3305,3306],{},"gfx.webrender.software"," preference (CPU rendering). Firefox has no cross-platform switch for font hinting, so text may still differ between operating systems.",[117,3309,3310,3313,3314,3316,3317,3320],{},[2810,3311,3312],{},"Every browser",": for the duration of a ",[31,3315,387],{}," screenshot a ",[31,3318,3319],{},"\u003Cstyle>"," element is injected into the tested page that hides the text caret, disables CSS transitions, animations and smooth scrolling, and hides scrollbars. It is removed right after the screenshot.",[117,3322,3323,3324,3327,3328,3331],{},"The comparison runs ",[31,3325,3326],{},"pixelmatch"," with ",[31,3329,3330],{},"includeAA: false",", so anti-aliased edge pixels are detected and not counted as differences.",[20,3333,3334,3335,491,3338,3340],{},"What the preset does not solve: different font files and fallbacks per OS (the classic Arial vs. Liberation Sans case), emoji fonts, WebKit and Firefox text rasterisation, and images drawn by WebGL. For those, keep one baseline per platform (see the ",[31,3336,3337],{},"title",[31,3339,1630],{}," options and the FAQ entry about browser names) or generate your baselines in the same environment your CI uses.",[20,3342,3343,3346],{},[2810,3344,3345],{},"Electron"," ignores switches set by plugins. Pass them through the environment instead:",[24,3348,3350],{"className":26,"code":3349,"language":28,"meta":29,"style":29},"ELECTRON_EXTRA_LAUNCH_ARGS=\"--font-render-hinting=none --disable-font-subpixel-positioning --disable-lcd-text --force-color-profile=srgb --disable-gpu --hide-scrollbars\" npx cypress run\n",[31,3351,3352],{"__ignoreMap":29},[34,3353,3354,3357,3360,3363,3366,3368],{"class":36,"line":37},[34,3355,3356],{"class":147},"ELECTRON_EXTRA_LAUNCH_ARGS",[34,3358,3359],{"class":140},"=",[34,3361,3362],{"class":51},"\"--font-render-hinting=none --disable-font-subpixel-positioning --disable-lcd-text --force-color-profile=srgb --disable-gpu --hide-scrollbars\"",[34,3364,3365],{"class":47}," npx",[34,3367,450],{"class":51},[34,3369,3370],{"class":51}," run\n",[20,3372,3373,2614,3376,3379,3380,3383,3384,3387,3388,3391,3392,356],{},[2810,3374,3375],{},"WebGL",[31,3377,3378],{},"--disable-gpu"," may leave pages that depend on WebGL without a rendering context. Either disable the preset or add ",[31,3381,3382],{},"--use-gl=angle --use-angle=swiftshader"," (recent Chrome also wants ",[31,3385,3386],{},"--enable-unsafe-swiftshader",") in your own ",[31,3389,3390],{},"before:browser:launch"," handler, composed with the plugin's one via ",[352,3393,3396],{"href":3394,"rel":3395},"https:\u002F\u002Fgithub.com\u002Fbahmutov\u002Fcypress-on-fix",[423],[31,3397,3398],{},"cypress-on-fix",[20,3400,3401,3404,3405,491,3408,3411,3412,3415,3416,3419],{},[2810,3402,3403],{},"Screenshot hooks",": the plugin passes its own ",[31,3406,3407],{},"onBeforeScreenshot",[31,3409,3410],{},"onAfterScreenshot"," to every screenshot it takes. Hooks given via ",[31,3413,3414],{},"screenshotConfig"," are still called; hooks set globally with ",[31,3417,3418],{},"Cypress.Screenshot.defaults()"," are not.",[20,3421,3422],{},"To turn the preset off globally (browser switches and CSS):",[24,3424,3426],{"className":26,"code":3425,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionDeterministicRendering=false\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionDeterministicRendering=false\"\n",[31,3427,3428,3432,3445,3449],{"__ignoreMap":29},[34,3429,3430],{"class":36,"line":37},[34,3431,442],{"class":40},[34,3433,3434,3436,3438,3440,3442],{"class":36,"line":44},[34,3435,447],{"class":47},[34,3437,450],{"class":51},[34,3439,453],{"class":51},[34,3441,456],{"class":55},[34,3443,3444],{"class":51}," \"pluginVisualRegressionDeterministicRendering=false\"\n",[34,3446,3447],{"class":36,"line":62},[34,3448,464],{"class":40},[34,3450,3451,3453,3455,3457,3459],{"class":36,"line":69},[34,3452,447],{"class":47},[34,3454,450],{"class":51},[34,3456,453],{"class":51},[34,3458,475],{"class":55},[34,3460,3444],{"class":51},[24,3462,3464],{"className":126,"code":3463,"language":128,"meta":29,"style":29},"\u002F\u002F cypress.config.ts (Cypress 15.10+)\nimport { defineConfig } from 'cypress';\n\nexport default defineConfig({\n expose: {\n pluginVisualRegressionDeterministicRendering: false,\n },\n});\n",[31,3465,3466,3470,3482,3486,3496,3500,3509,3515],{"__ignoreMap":29},[34,3467,3468],{"class":36,"line":37},[34,3469,2439],{"class":40},[34,3471,3472,3474,3476,3478,3480],{"class":36,"line":44},[34,3473,141],{"class":140},[34,3475,200],{"class":147},[34,3477,203],{"class":140},[34,3479,206],{"class":51},[34,3481,148],{"class":147},[34,3483,3484],{"class":36,"line":62},[34,3485,66],{"emptyLinePlaceholder":65},[34,3487,3488,3490,3492,3494],{"class":36,"line":69},[34,3489,237],{"class":140},[34,3491,240],{"class":140},[34,3493,243],{"class":162},[34,3495,246],{"class":47},[34,3497,3498],{"class":36,"line":75},[34,3499,2470],{"class":147},[34,3501,3502,3505,3507],{"class":36,"line":89},[34,3503,3504],{"class":147}," pluginVisualRegressionDeterministicRendering: ",[34,3506,1890],{"class":55},[34,3508,299],{"class":147},[34,3510,3511,3513],{"class":36,"line":94},[34,3512,296],{"class":147},[34,3514,299],{"class":47},[34,3516,3517,3519],{"class":36,"line":100},[34,3518,345],{"class":47},[34,3520,148],{"class":147},[20,3522,3523],{},"To keep the browser switches but skip the CSS for a single screenshot (e.g. when an animation's end state is what you want to capture):",[24,3525,3527],{"className":126,"code":3526,"language":128,"meta":29,"style":29},"cy.matchImage({ deterministicRendering: false });\n",[31,3528,3529],{"__ignoreMap":29},[34,3530,3531,3533,3535,3538,3540],{"class":36,"line":37},[34,3532,373],{"class":147},[34,3534,387],{"class":162},[34,3536,3537],{"class":147},"({ deterministicRendering: ",[34,3539,1890],{"class":55},[34,3541,3542],{"class":147}," });\n",[10,3544,3546],{"id":3545},"faq","FAQ",[15,3548,3550,3551,3553],{"id":3549},"why-screenshots-doesnt-conform-to-the-viewport-set-in-my-cypress-configuration","Why screenshots doesn't conform to the ",[31,3552,1723],{}," set in my Cypress configuration?",[20,3555,3556],{},"Screenshots in Cypress do not scale to the viewport size by default. You can change this behavior:",[114,3558,3559,3565],{},[117,3560,3561,3562],{},"globally, by changing default screenshot configuration: ",[31,3563,3564],{},"Cypress.Screenshot.defaults({ capture: 'viewport' });",[117,3566,3567,3568,3571,3572],{},"locally, by passing screenshot configuration directly to the ",[31,3569,3570],{},".matchImage"," command: ",[31,3573,3574],{},"cy.matchImage({ screenshotConfig: { capture: 'viewport' } });",[15,3576,3578],{"id":3577},"ive-upgraded-version-of-this-plugin-and-all-on-my-baseline-images-has-been-automatically-updated-why","I've upgraded version of this plugin and all on my baseline images has been automatically updated. Why?",[20,3580,3581],{},"Sometimes we need to do a breaking change in image comparison or image generation algorithms. To provide you with the easiest upgrade path - the plugin updates your baseline images automatically. Just commit them to your repository after the plugin upgrade and you are good to go!",[15,3583,3585,3586,491,3588,3591],{"id":3584},"screenshots-look-different-between-cypress-run-and-cypress-open-how-do-i-fix-it","Screenshots look different between ",[31,3587,2679],{},[31,3589,3590],{},"cypress open",". How do I fix it?",[20,3593,3594,3595,3598,3599,2981],{},"This is typically caused by device pixel ratio differences between headless and headed modes. Use the ",[31,3596,3597],{},"forceDeviceScaleFactor"," option to normalize the scale factor to ",[31,3600,3601],{},"1",[24,3603,3605],{"className":126,"code":3604,"language":128,"meta":29,"style":29},"cy.matchImage({ forceDeviceScaleFactor: true });\n",[31,3606,3607],{"__ignoreMap":29},[34,3608,3609,3611,3613,3616,3618],{"class":36,"line":37},[34,3610,373],{"class":147},[34,3612,387],{"class":162},[34,3614,3615],{"class":147},"({ forceDeviceScaleFactor: ",[34,3617,2084],{"class":55},[34,3619,3542],{"class":147},[20,3621,3622],{},"Or set it globally via expose variable:",[24,3624,3626],{"className":26,"code":3625,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionForceDeviceScaleFactor=true\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionForceDeviceScaleFactor=true\"\n",[31,3627,3628,3632,3645,3649],{"__ignoreMap":29},[34,3629,3630],{"class":36,"line":37},[34,3631,442],{"class":40},[34,3633,3634,3636,3638,3640,3642],{"class":36,"line":44},[34,3635,447],{"class":47},[34,3637,450],{"class":51},[34,3639,453],{"class":51},[34,3641,456],{"class":55},[34,3643,3644],{"class":51}," \"pluginVisualRegressionForceDeviceScaleFactor=true\"\n",[34,3646,3647],{"class":36,"line":62},[34,3648,464],{"class":40},[34,3650,3651,3653,3655,3657,3659],{"class":36,"line":69},[34,3652,447],{"class":47},[34,3654,450],{"class":51},[34,3656,453],{"class":51},[34,3658,475],{"class":55},[34,3660,3644],{"class":51},[20,3662,3663,3664,3667,3668,3670,3671,123],{},"For persistent viewport size differences, consider setting the browser window size explicitly in ",[31,3665,3666],{},"setupNodeEvents"," (compose it with the plugin's own ",[31,3669,3390],{}," handler via ",[352,3672,3674],{"href":3394,"rel":3673},[423],[31,3675,3398],{},[24,3677,3679],{"className":126,"code":3678,"language":128,"meta":29,"style":29},"on('before:browser:launch', (browser, launchOptions) => {\n if (browser.family === 'chromium' && browser.isHeadless) {\n launchOptions.args.push('--window-size=1280,720');\n }\n return launchOptions;\n});\n",[31,3680,3681,3709,3729,3744,3749,3757],{"__ignoreMap":29},[34,3682,3683,3685,3687,3690,3693,3695,3697,3700,3703,3706],{"class":36,"line":37},[34,3684,266],{"class":162},[34,3686,166],{"class":147},[34,3688,3689],{"class":51},"'before:browser:launch'",[34,3691,3692],{"class":147},", (",[34,3694,1562],{"class":47},[34,3696,269],{"class":147},[34,3698,3699],{"class":47},"launchOptions",[34,3701,3702],{"class":147},") ",[34,3704,3705],{"class":140},"=>",[34,3707,3708],{"class":147}," {\n",[34,3710,3711,3714,3717,3720,3723,3726],{"class":36,"line":44},[34,3712,3713],{"class":140}," if",[34,3715,3716],{"class":147}," (browser.family ",[34,3718,3719],{"class":140},"===",[34,3721,3722],{"class":51}," 'chromium'",[34,3724,3725],{"class":140}," &&",[34,3727,3728],{"class":147}," browser.isHeadless) {\n",[34,3730,3731,3734,3737,3739,3742],{"class":36,"line":62},[34,3732,3733],{"class":147}," launchOptions.args.",[34,3735,3736],{"class":162},"push",[34,3738,166],{"class":147},[34,3740,3741],{"class":51},"'--window-size=1280,720'",[34,3743,172],{"class":147},[34,3745,3746],{"class":36,"line":69},[34,3747,3748],{"class":147}," }\n",[34,3750,3751,3754],{"class":36,"line":75},[34,3752,3753],{"class":140}," return",[34,3755,3756],{"class":147}," launchOptions;\n",[34,3758,3759],{"class":36,"line":89},[34,3760,2347],{"class":147},[20,3762,3763,3764,356],{},"If the two runs happen on different operating systems (a macOS laptop vs. a Linux CI runner), the remaining differences come from font rendering. See ",[352,3765,3268],{"href":3766},"#reducing-cross-os-rendering-noise",[15,3768,3770,3771,3773],{"id":3769},"how-do-i-use-this-plugin-alongside-other-cypress-plugins-that-also-register-setupnodeevents-events","How do I use this plugin alongside other Cypress plugins that also register ",[31,3772,3666],{}," events?",[20,3775,3776,3777,3780,3781,2981],{},"Cypress only supports a single handler per event. If multiple plugins register the same event (e.g. ",[31,3778,3779],{},"after:screenshot","), only the last one will be called. To compose multiple plugins safely, use ",[352,3782,3784],{"href":3394,"rel":3783},[423],[31,3785,3398],{},[24,3787,3789],{"className":126,"code":3788,"language":128,"meta":29,"style":29},"import { defineConfig } from 'cypress';\nimport { initPlugin as initVisualRegressionPlugin } from '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins';\nimport fix from 'cypress-on-fix';\n\nexport default defineConfig({\n e2e: {\n setupNodeEvents(on, config) {\n const fixedOn = fix(on);\n initVisualRegressionPlugin(fixedOn, config);\n \u002F\u002F register other plugins using fixedOn here\n },\n },\n});\n",[31,3790,3791,3803,3819,3833,3837,3847,3851,3865,3882,3889,3894,3898,3904],{"__ignoreMap":29},[34,3792,3793,3795,3797,3799,3801],{"class":36,"line":37},[34,3794,141],{"class":140},[34,3796,200],{"class":147},[34,3798,203],{"class":140},[34,3800,206],{"class":51},[34,3802,148],{"class":147},[34,3804,3805,3807,3809,3811,3813,3815,3817],{"class":36,"line":44},[34,3806,141],{"class":140},[34,3808,215],{"class":147},[34,3810,218],{"class":140},[34,3812,221],{"class":147},[34,3814,203],{"class":140},[34,3816,226],{"class":51},[34,3818,148],{"class":147},[34,3820,3821,3823,3826,3828,3831],{"class":36,"line":62},[34,3822,141],{"class":140},[34,3824,3825],{"class":147}," fix ",[34,3827,203],{"class":140},[34,3829,3830],{"class":51}," 'cypress-on-fix'",[34,3832,148],{"class":147},[34,3834,3835],{"class":36,"line":69},[34,3836,66],{"emptyLinePlaceholder":65},[34,3838,3839,3841,3843,3845],{"class":36,"line":75},[34,3840,237],{"class":140},[34,3842,240],{"class":140},[34,3844,243],{"class":162},[34,3846,246],{"class":47},[34,3848,3849],{"class":36,"line":89},[34,3850,256],{"class":147},[34,3852,3853,3855,3857,3859,3861,3863],{"class":36,"line":94},[34,3854,261],{"class":162},[34,3856,166],{"class":147},[34,3858,266],{"class":47},[34,3860,269],{"class":147},[34,3862,272],{"class":47},[34,3864,275],{"class":147},[34,3866,3867,3870,3873,3876,3879],{"class":36,"line":100},[34,3868,3869],{"class":140}," const",[34,3871,3872],{"class":55}," fixedOn",[34,3874,3875],{"class":140}," =",[34,3877,3878],{"class":162}," fix",[34,3880,3881],{"class":147},"(on);\n",[34,3883,3884,3886],{"class":36,"line":278},[34,3885,281],{"class":162},[34,3887,3888],{"class":147},"(fixedOn, config);\n",[34,3890,3891],{"class":36,"line":287},[34,3892,3893],{"class":40}," \u002F\u002F register other plugins using fixedOn here\n",[34,3895,3896],{"class":36,"line":293},[34,3897,290],{"class":147},[34,3899,3900,3902],{"class":36,"line":302},[34,3901,296],{"class":147},[34,3903,299],{"class":47},[34,3905,3906,3908],{"class":36,"line":308},[34,3907,345],{"class":47},[34,3909,148],{"class":147},[15,3911,3913],{"id":3912},"how-do-i-integrate-with-mochawesome-or-other-reporters-that-embed-screenshot-images","How do I integrate with mochawesome or other reporters that embed screenshot images?",[20,3915,3916,3917,3920,3921,3924],{},"The plugin stores baseline images outside the default ",[31,3918,3919],{},"cypress\u002Fscreenshots\u002F"," directory. Some reporters (like ",[31,3922,3923],{},"cypress-mochawesome-reporter",") expect screenshots to be in that folder.",[20,3926,3927,3928,3931,3932,3934,3935,2981],{},"Use the ",[31,3929,3930],{},"processImgPath"," task hook to control where the screenshot file is placed. Override it in ",[31,3933,3666],{}," after calling ",[31,3936,3937],{},"initPlugin",[24,3939,3941],{"className":126,"code":3940,"language":128,"meta":29,"style":29},"setupNodeEvents(on, config) {\n initVisualRegressionPlugin(on, config);\n\n \u002F\u002F Override the path processor to keep screenshots accessible to the reporter\n on('task', {\n 'cp-visual-regression-diff-processImgPath': ({ path }: { path: string }) => {\n \u002F\u002F return a new path, or the same path to keep default behavior\n return path;\n },\n });\n}\n",[31,3942,3943,3950,3957,3961,3966,3979,4011,4016,4024,4028,4033],{"__ignoreMap":29},[34,3944,3945,3947],{"class":36,"line":37},[34,3946,3666],{"class":162},[34,3948,3949],{"class":147},"(on, config) {\n",[34,3951,3952,3955],{"class":36,"line":44},[34,3953,3954],{"class":162}," initVisualRegressionPlugin",[34,3956,284],{"class":147},[34,3958,3959],{"class":36,"line":62},[34,3960,66],{"emptyLinePlaceholder":65},[34,3962,3963],{"class":36,"line":69},[34,3964,3965],{"class":40}," \u002F\u002F Override the path processor to keep screenshots accessible to the reporter\n",[34,3967,3968,3971,3973,3976],{"class":36,"line":75},[34,3969,3970],{"class":162}," on",[34,3972,166],{"class":147},[34,3974,3975],{"class":51},"'task'",[34,3977,3978],{"class":147},", {\n",[34,3980,3981,3984,3987,3989,3992,3994,3997,3999,4001,4004,4007,4009],{"class":36,"line":89},[34,3982,3983],{"class":51}," 'cp-visual-regression-diff-processImgPath'",[34,3985,3986],{"class":147},": ({ ",[34,3988,1335],{"class":47},[34,3990,3991],{"class":147}," }",[34,3993,2981],{"class":140},[34,3995,3996],{"class":147}," { ",[34,3998,1335],{"class":47},[34,4000,2981],{"class":140},[34,4002,4003],{"class":55}," string",[34,4005,4006],{"class":147}," }) ",[34,4008,3705],{"class":140},[34,4010,3708],{"class":147},[34,4012,4013],{"class":36,"line":94},[34,4014,4015],{"class":40}," \u002F\u002F return a new path, or the same path to keep default behavior\n",[34,4017,4018,4021],{"class":36,"line":100},[34,4019,4020],{"class":140}," return",[34,4022,4023],{"class":147}," path;\n",[34,4025,4026],{"class":36,"line":278},[34,4027,290],{"class":147},[34,4029,4030],{"class":36,"line":287},[34,4031,4032],{"class":147}," });\n",[34,4034,4035],{"class":36,"line":293},[34,4036,1266],{"class":147},[15,4038,4040],{"id":4039},"how-to-fail-on-any-visual-difference-no-matter-how-small","How to fail on any visual difference, no matter how small?",[20,4042,4043,4044,4046,4047,2981],{},"Set ",[31,4045,2706],{}," to ",[31,4048,4049],{},"0",[24,4051,4053],{"className":126,"code":4052,"language":128,"meta":29,"style":29},"cy.matchImage({ maxDiffThreshold: 0 });\n",[31,4054,4055],{"__ignoreMap":29},[34,4056,4057,4059,4061,4064,4066],{"class":36,"line":37},[34,4058,373],{"class":147},[34,4060,387],{"class":162},[34,4062,4063],{"class":147},"({ maxDiffThreshold: ",[34,4065,4049],{"class":55},[34,4067,3542],{"class":147},[20,4069,4070],{},"Or globally via an expose variable:",[24,4072,4074],{"className":26,"code":4073,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionMaxDiffThreshold=0\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionMaxDiffThreshold=0\"\n",[31,4075,4076,4080,4093,4097],{"__ignoreMap":29},[34,4077,4078],{"class":36,"line":37},[34,4079,442],{"class":40},[34,4081,4082,4084,4086,4088,4090],{"class":36,"line":44},[34,4083,447],{"class":47},[34,4085,450],{"class":51},[34,4087,453],{"class":51},[34,4089,456],{"class":55},[34,4091,4092],{"class":51}," \"pluginVisualRegressionMaxDiffThreshold=0\"\n",[34,4094,4095],{"class":36,"line":62},[34,4096,464],{"class":40},[34,4098,4099,4101,4103,4105,4107],{"class":36,"line":69},[34,4100,447],{"class":47},[34,4102,450],{"class":51},[34,4104,453],{"class":51},[34,4106,475],{"class":55},[34,4108,4092],{"class":51},[15,4110,4112],{"id":4111},"why-is-the-actual-screenshot-deleted-after-a-successful-image-comparison","Why is the actual screenshot deleted after a successful image comparison?",[20,4114,4115,4116,4118],{},"When images match, the ",[31,4117,490],{}," file is temporary and gets cleaned up after the comparison. Only the baseline image (no suffix) is kept. This avoids storing redundant files.",[20,4120,4121,4122,4124],{},"When images do not match, the ",[31,4123,490],{}," file is kept and carries the same plugin metadata as a baseline image. You can safely rename or copy it over the baseline (e.g. in a CI job that opens a PR with updated baselines) - the plugin will treat it as an up-to-date baseline and won't rewrite it on the next run.",[20,4126,4127,4128,4130,4131,4133,4134],{},"If you need actual screenshots to stay accessible for a reporter (e.g. ",[31,4129,3923],{},"), use the ",[31,4132,3930],{}," task hook to control where screenshots are stored. See ",[352,4135,3913],{"href":4136},"#how-do-i-integrate-with-mochawesome-or-other-reporters-that-embed-screenshot-images",[15,4138,4140],{"id":4139},"how-to-remove-spaces-from-screenshot-filenames","How to remove spaces from screenshot filenames?",[20,4142,4143,4144,4146,4147,4149],{},"Screenshot filenames are derived from Cypress test titles, which may contain spaces. To use a filename without spaces, pass a custom ",[31,4145,3337],{}," option to each ",[31,4148,387],{}," call:",[24,4151,4153],{"className":126,"code":4152,"language":128,"meta":29,"style":29},"cy.matchImage({ title: 'my-screenshot-without-spaces' });\n",[31,4154,4155],{"__ignoreMap":29},[34,4156,4157,4159,4161,4164,4167],{"class":36,"line":37},[34,4158,373],{"class":147},[34,4160,387],{"class":162},[34,4162,4163],{"class":147},"({ title: ",[34,4165,4166],{"class":51},"'my-screenshot-without-spaces'",[34,4168,3542],{"class":147},[20,4170,4171,4172,4174,4175,123],{},"To apply this globally for all ",[31,4173,387],{}," calls, override the command in your support file (",[31,4176,4177],{},"cypress\u002Fsupport\u002Fcommands.ts",[24,4179,4181],{"className":126,"code":4180,"language":128,"meta":29,"style":29},"Cypress.Commands.overwrite('matchImage', (originalFn, subject, options = {}) =>\n originalFn(subject, {\n title: Cypress.currentTest.titlePath.join(' ').replace(\u002F\\s+\u002Fg, '-'),\n ...options,\n }),\n);\n",[31,4182,4183,4218,4226,4264,4272,4277],{"__ignoreMap":29},[34,4184,4185,4188,4191,4193,4196,4198,4201,4203,4206,4208,4210,4212,4215],{"class":36,"line":37},[34,4186,4187],{"class":147},"Cypress.Commands.",[34,4189,4190],{"class":162},"overwrite",[34,4192,166],{"class":147},[34,4194,4195],{"class":51},"'matchImage'",[34,4197,3692],{"class":147},[34,4199,4200],{"class":47},"originalFn",[34,4202,269],{"class":147},[34,4204,4205],{"class":47},"subject",[34,4207,269],{"class":147},[34,4209,1523],{"class":47},[34,4211,3875],{"class":140},[34,4213,4214],{"class":147}," {}) ",[34,4216,4217],{"class":140},"=>\n",[34,4219,4220,4223],{"class":36,"line":44},[34,4221,4222],{"class":162}," originalFn",[34,4224,4225],{"class":147},"(subject, {\n",[34,4227,4228,4231,4233,4235,4237,4239,4241,4243,4245,4248,4251,4253,4256,4258,4261],{"class":36,"line":62},[34,4229,4230],{"class":147}," title: Cypress.currentTest.titlePath.",[34,4232,2291],{"class":162},[34,4234,166],{"class":147},[34,4236,2296],{"class":51},[34,4238,384],{"class":147},[34,4240,2933],{"class":162},[34,4242,166],{"class":147},[34,4244,1534],{"class":51},[34,4246,4247],{"class":55},"\\s",[34,4249,4250],{"class":140},"+",[34,4252,1534],{"class":51},[34,4254,4255],{"class":140},"g",[34,4257,269],{"class":147},[34,4259,4260],{"class":51},"'-'",[34,4262,4263],{"class":147},"),\n",[34,4265,4266,4269],{"class":36,"line":69},[34,4267,4268],{"class":140}," ...",[34,4270,4271],{"class":147},"options,\n",[34,4273,4274],{"class":36,"line":75},[34,4275,4276],{"class":147}," }),\n",[34,4278,4279],{"class":36,"line":89},[34,4280,172],{"class":147},[15,4282,4284],{"id":4283},"how-to-include-the-browser-name-in-image-filenames-for-cross-browser-testing","How to include the browser name in image filenames (for cross-browser testing)?",[20,4286,3927,4287,4289,4290,4292,4293,269,4295,269,4297,4299],{},[31,4288,2627],{}," token in ",[31,4291,1630],{},"; it expands to the name of the browser that rendered the screenshot (",[31,4294,2644],{},[31,4296,2647],{},[31,4298,2636],{},", ...):",[24,4301,4303],{"className":126,"code":4302,"language":128,"meta":29,"style":29},"cy.matchImage({ imagesPath: '{spec_path}\u002F__image_snapshots__\u002F{browser}' });\n",[31,4304,4305],{"__ignoreMap":29},[34,4306,4307,4309,4311,4314,4317],{"class":36,"line":37},[34,4308,373],{"class":147},[34,4310,387],{"class":162},[34,4312,4313],{"class":147},"({ imagesPath: ",[34,4315,4316],{"class":51},"'{spec_path}\u002F__image_snapshots__\u002F{browser}'",[34,4318,3542],{"class":147},[20,4320,4321],{},"Or globally:",[24,4323,4325],{"className":26,"code":4324,"language":28,"meta":29,"style":29},"# Cypress 15.10+\nnpx cypress run --expose \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{browser}\"\n# Cypress \u003C15.10 (deprecated in 15.10, removed in 16)\nnpx cypress run --env \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{browser}\"\n",[31,4326,4327,4331,4344,4348],{"__ignoreMap":29},[34,4328,4329],{"class":36,"line":37},[34,4330,442],{"class":40},[34,4332,4333,4335,4337,4339,4341],{"class":36,"line":44},[34,4334,447],{"class":47},[34,4336,450],{"class":51},[34,4338,453],{"class":51},[34,4340,456],{"class":55},[34,4342,4343],{"class":51}," \"pluginVisualRegressionImagesPath={spec_path}\u002F__image_snapshots__\u002F{browser}\"\n",[34,4345,4346],{"class":36,"line":62},[34,4347,464],{"class":40},[34,4349,4350,4352,4354,4356,4358],{"class":36,"line":69},[34,4351,447],{"class":47},[34,4353,450],{"class":51},[34,4355,453],{"class":51},[34,4357,475],{"class":55},[34,4359,4343],{"class":51},[20,4361,4362,4363,269,4366,4369,4370,4373,4374,491,4376,4378,4379,4381],{},"This creates separate image directories per browser (",[31,4364,4365],{},"__image_snapshots__\u002Fchrome\u002F",[31,4367,4368],{},"__image_snapshots__\u002Ffirefox\u002F","). See ",[352,4371,2581],{"href":4372},"#per-platform-baselines"," for ",[31,4375,2658],{},[31,4377,2608],{},", which also split by operating system, for which folders to commit, and for why ",[31,4380,2866],{}," must stay off on a machine that holds more than one browser's folder (it would delete the other browsers' baselines).",[15,4383,4385],{"id":4384},"how-to-generate-an-html-report-showing-baseline-diff-and-actual-images","How to generate an HTML report showing baseline, diff, and actual images?",[20,4387,4388],{},"The plugin provides a built-in visual comparison overlay in the Cypress UI: clicking \"See comparison\" on a failed test shows the baseline, diff, and actual images side by side.",[20,4390,4391,4392,4398,4399,4401],{},"For CI or sharable HTML reports, integrate with a reporter such as ",[352,4393,4396],{"href":4394,"rel":4395},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcypress-mochawesome-reporter",[423],[31,4397,3923],{},". See ",[352,4400,3913],{"href":4136}," for setup details.",[4403,4404,4405],"style",{},"html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}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);}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}",{"title":29,"searchDepth":44,"depth":44,"links":4407},[4408,4411,4412,4413,4414,4415,4416,4417,4422,4423],{"id":12,"depth":44,"text":13,"children":4409},[4410],{"id":17,"depth":62,"text":18},{"id":359,"depth":44,"text":360},{"id":414,"depth":44,"text":415},{"id":428,"depth":44,"text":429},{"id":480,"depth":44,"text":481},{"id":1948,"depth":44,"text":1949},{"id":2580,"depth":44,"text":2581},{"id":2900,"depth":44,"text":2901,"children":4418},[4419,4420,4421],{"id":2911,"depth":62,"text":2912},{"id":2964,"depth":62,"text":2965},{"id":3142,"depth":62,"text":3143},{"id":3267,"depth":44,"text":3268},{"id":3545,"depth":44,"text":3546,"children":4424},[4425,4427,4428,4430,4432,4433,4434,4435,4436,4437],{"id":3549,"depth":62,"text":4426},"Why screenshots doesn't conform to the viewport set in my Cypress configuration?",{"id":3577,"depth":62,"text":3578},{"id":3584,"depth":62,"text":4429},"Screenshots look different between cypress run and cypress open. How do I fix it?",{"id":3769,"depth":62,"text":4431},"How do I use this plugin alongside other Cypress plugins that also register setupNodeEvents events?",{"id":3912,"depth":62,"text":3913},{"id":4039,"depth":62,"text":4040},{"id":4111,"depth":62,"text":4112},{"id":4139,"depth":62,"text":4140},{"id":4283,"depth":62,"text":4284},{"id":4384,"depth":62,"text":4385},"md",{},"\u002Freadme\u002Freadme",{"description":29},null,"readme\u002FREADME","p_k75pzCo7ui5-ywmmbi2-qIN_7D7aEft5a_E_ac0rM",false,1794530806857]