[{"data":1,"prerenderedAt":400},["ShallowReactive",2],{"doc:de:getting-started\u002Finstall":3,"doc-nav:de":374},{"id":4,"title":5,"body":6,"description":366,"extension":367,"meta":368,"navigation":70,"order":42,"path":369,"reviewed":370,"seo":371,"stem":372,"__hash__":373,"fallback":370},"docs\u002Fdocs\u002Fde\u002Fgetting-started\u002Finstall.md","Installation",{"type":7,"value":8,"toc":359},"minimark",[9,13,23,28,115,119,126,146,165,273,277,321,332,340,355],[10,11,5],"h1",{"id":12},"installation",[14,15,16,17,22],"p",{},"Diese Seite behandelt das Cypress-Plugin. Für Playwright siehe die Seite ",[18,19,21],"a",{"href":20},"\u002Fdocs\u002Fintegrations\u002Fplaywright-reporter","Playwright-Plugin",". Die GitHub App ist noch im Bau.",[24,25,27],"h2",{"id":26},"paket-hinzufügen","Paket hinzufügen",[29,30,35],"pre",{"className":31,"code":32,"language":33,"meta":34,"style":34},"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","",[36,37,38,47,65,72,78,92,97,103],"code",{"__ignoreMap":34},[39,40,43],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"sLBg1","# npm\n",[39,48,50,54,58,62],{"class":41,"line":49},2,[39,51,53],{"class":52},"soyes","npm",[39,55,57],{"class":56},"sT6z2"," install",[39,59,61],{"class":60},"s-5SL"," --save-dev",[39,63,64],{"class":56}," @pixsame\u002Fcypress-plugin-visual-regression-diff\n",[39,66,68],{"class":41,"line":67},3,[39,69,71],{"emptyLinePlaceholder":70},true,"\n",[39,73,75],{"class":41,"line":74},4,[39,76,77],{"class":45},"# yarn\n",[39,79,81,84,87,90],{"class":41,"line":80},5,[39,82,83],{"class":52},"yarn",[39,85,86],{"class":56}," add",[39,88,89],{"class":60}," -D",[39,91,64],{"class":56},[39,93,95],{"class":41,"line":94},6,[39,96,71],{"emptyLinePlaceholder":70},[39,98,100],{"class":41,"line":99},7,[39,101,102],{"class":45},"# pnpm\n",[39,104,106,109,111,113],{"class":41,"line":105},8,[39,107,108],{"class":52},"pnpm",[39,110,86],{"class":56},[39,112,89],{"class":60},[39,114,64],{"class":56},[24,116,118],{"id":117},"plugin-einbinden","Plugin einbinden",[14,120,121,122,125],{},"Importieren Sie die Commands in Ihrer Support-Datei (standardmäßig ",[36,123,124],{},"cypress\u002Fsupport\u002Fe2e.ts","):",[29,127,131],{"className":128,"code":129,"language":130,"meta":34,"style":34},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","import '@pixsame\u002Fcypress-plugin-visual-regression-diff';\n","ts",[36,132,133],{"__ignoreMap":34},[39,134,135,139,142],{"class":41,"line":42},[39,136,138],{"class":137},"sHUrx","import",[39,140,141],{"class":56}," '@pixsame\u002Fcypress-plugin-visual-regression-diff'",[39,143,145],{"class":144},"suds8",";\n",[14,147,148,149,152,153,156,157,160,161,164],{},"Registrieren Sie das Plugin anschließend in ",[36,150,151],{},"cypress.config.ts",". Wenn Sie sowohl ",[36,154,155],{},"e2e"," als auch ",[36,158,159],{},"component"," verwenden, rufen Sie ",[36,162,163],{},"initPlugin"," in beiden auf. Es überträgt sich nicht von einem auf das andere.",[29,166,168],{"className":128,"code":167,"language":130,"meta":34,"style":34},"import { defineConfig } from 'cypress';\nimport { initPlugin } from '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins';\n\nexport default defineConfig({\n  e2e: {\n    setupNodeEvents(on, config) {\n      initPlugin(on, config);\n    },\n  },\n});\n",[36,169,170,185,199,203,218,223,243,251,256,265],{"__ignoreMap":34},[39,171,172,174,177,180,183],{"class":41,"line":42},[39,173,138],{"class":137},[39,175,176],{"class":144}," { defineConfig } ",[39,178,179],{"class":137},"from",[39,181,182],{"class":56}," 'cypress'",[39,184,145],{"class":144},[39,186,187,189,192,194,197],{"class":41,"line":49},[39,188,138],{"class":137},[39,190,191],{"class":144}," { initPlugin } ",[39,193,179],{"class":137},[39,195,196],{"class":56}," '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins'",[39,198,145],{"class":144},[39,200,201],{"class":41,"line":67},[39,202,71],{"emptyLinePlaceholder":70},[39,204,205,208,211,215],{"class":41,"line":74},[39,206,207],{"class":137},"export",[39,209,210],{"class":137}," default",[39,212,214],{"class":213},"sKwhi"," defineConfig",[39,216,217],{"class":52},"({\n",[39,219,220],{"class":41,"line":80},[39,221,222],{"class":144},"  e2e: {\n",[39,224,225,228,231,234,237,240],{"class":41,"line":94},[39,226,227],{"class":213},"    setupNodeEvents",[39,229,230],{"class":144},"(",[39,232,233],{"class":52},"on",[39,235,236],{"class":144},", ",[39,238,239],{"class":52},"config",[39,241,242],{"class":144},") {\n",[39,244,245,248],{"class":41,"line":99},[39,246,247],{"class":213},"      initPlugin",[39,249,250],{"class":144},"(on, config);\n",[39,252,253],{"class":41,"line":105},[39,254,255],{"class":144},"    },\n",[39,257,259,262],{"class":41,"line":258},9,[39,260,261],{"class":144},"  }",[39,263,264],{"class":52},",\n",[39,266,268,271],{"class":41,"line":267},10,[39,269,270],{"class":52},"})",[39,272,145],{"class":144},[24,274,276],{"id":275},"ersten-snapshot-aufnehmen","Ersten Snapshot aufnehmen",[29,278,280],{"className":128,"code":279,"language":130,"meta":34,"style":34},"cy.get('.an-element-of-your-choice').matchImage();\n\n\u002F\u002F oder das gesamte Dokument\ncy.matchImage();\n",[36,281,282,304,308,313],{"__ignoreMap":34},[39,283,284,287,290,292,295,298,301],{"class":41,"line":42},[39,285,286],{"class":144},"cy.",[39,288,289],{"class":213},"get",[39,291,230],{"class":144},[39,293,294],{"class":56},"'.an-element-of-your-choice'",[39,296,297],{"class":144},").",[39,299,300],{"class":213},"matchImage",[39,302,303],{"class":144},"();\n",[39,305,306],{"class":41,"line":49},[39,307,71],{"emptyLinePlaceholder":70},[39,309,310],{"class":41,"line":67},[39,311,312],{"class":45},"\u002F\u002F oder das gesamte Dokument\n",[39,314,315,317,319],{"class":41,"line":74},[39,316,286],{"class":144},[39,318,300],{"class":213},[39,320,303],{"class":144},[14,322,323,324,326,327,331],{},"Beim ersten Lauf gibt es nichts zum Vergleichen, also speichert ",[36,325,300],{}," den Screenshot einfach als Baseline. Ab dann vergleicht es jeden neuen Screenshot mit dieser Datei. Weichen beide um mehr als den Schwellenwert voneinander ab, schlägt der Test fehl, und ein Button ",[328,329,330],"strong",{},"See comparison"," im Cypress-Runner öffnet den Diff.",[24,333,335,336,339],{"id":334},"sie-kommen-von-frsource","Sie kommen von ",[36,337,338],{},"@frsource","?",[14,341,342,343,345,346,349,350,354],{},"Das Paket ist von ",[36,344,338],{}," zu ",[36,347,348],{},"@pixsame"," umgezogen. Es ist eine Umbenennung, am Code hat sich nichts geändert. Siehe ",[18,351,353],{"href":352},"\u002Fdocs\u002Fgetting-started\u002Fmigrate-from-frsource","Migration von @frsource",".",[356,357,358],"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":34,"searchDepth":49,"depth":49,"links":360},[361,362,363,364],{"id":26,"depth":49,"text":27},{"id":117,"depth":49,"text":118},{"id":275,"depth":49,"text":276},{"id":334,"depth":49,"text":365},"Sie kommen von @frsource?","Installieren Sie das pixsame-Plugin für Cypress und führen Sie Ihren ersten visuellen Regressionstest aus.","md",{},"\u002Fdocs\u002Fde\u002Fgetting-started\u002Finstall",false,{"title":5,"description":366},"docs\u002Fde\u002Fgetting-started\u002Finstall","W9YQz-ly4YNF2roNfHi-VsifvjQx-0J1bcVyzbO5o10",[375,378,382,386,389,392,395,396,397],{"path":376,"title":5,"group":377},"\u002Fdocs\u002Fgetting-started\u002Finstall","getting-started",{"path":379,"title":380,"group":381},"\u002Fdocs\u002Fintegrations\u002Fcypress-plugin","Cypress-Plugin","integrations",{"path":383,"title":384,"group":385},"\u002Fdocs\u002Freference\u002Fconfiguration","Konfiguration","reference",{"path":387,"title":388,"group":377},"\u002Fdocs\u002Fgetting-started\u002Fusage","Verwendung",{"path":390,"title":391,"group":381},"\u002Fdocs\u002Fintegrations\u002Fgithub-app","GitHub App",{"path":393,"title":394,"group":385},"\u002Fdocs\u002Freference\u002Fmanifest","Manifest-Schema",{"path":352,"title":353,"group":377},{"path":20,"title":21,"group":381},{"path":398,"title":399,"group":381},"\u002Fdocs\u002Fintegrations\u002Fvitest","Vitest-Plugin",1794530807621]