[{"data":1,"prerenderedAt":400},["ShallowReactive",2],{"doc:pl:getting-started\u002Finstall":3,"doc-nav:pl":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\u002Fpl\u002Fgetting-started\u002Finstall.md","Instalacja",{"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},"instalacja",[14,15,16,17,22],"p",{},"Ta strona dotyczy pluginu dla Cypress. Informacje o Playwright znajdują się na stronie ",[18,19,21],"a",{"href":20},"\u002Fdocs\u002Fintegrations\u002Fplaywright-reporter","Plugin dla Playwright",". GitHub App wciąż powstaje.",[24,25,27],"h2",{"id":26},"dodaj-pakiet","Dodaj pakiet",[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},"podepnij-plugin","Podepnij plugin",[14,120,121,122,125],{},"Zaimportuj komendy w pliku support (domyślnie ",[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],{},"Następnie zarejestruj plugin w ",[36,150,151],{},"cypress.config.ts",". Jeśli używasz zarówno ",[36,154,155],{},"e2e",", jak i ",[36,158,159],{},"component",", wywołaj ",[36,162,163],{},"initPlugin"," w każdej z tych sekcji. Z jednej na drugą się nie przenosi.",[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},"zrób-pierwszy-snapshot","Zrób pierwszy snapshot",[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 albo cały 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 albo cały 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],{},"Przy pierwszym uruchomieniu nie ma z czym porównywać, więc ",[36,325,300],{}," po prostu zapisuje zrzut jako baseline. Od tej pory każdy nowy zrzut porównuje z tym plikiem. Gdy różnią się bardziej niż próg, test pada, a przycisk ",[328,329,330],"strong",{},"See comparison"," w runnerze Cypress otwiera diff.",[24,333,335,336,339],{"id":334},"przechodzisz-z-frsource","Przechodzisz z ",[36,337,338],{},"@frsource","?",[14,341,342,343,345,346,349,350,354],{},"Pakiet przeniósł się z ",[36,344,338],{}," do ",[36,347,348],{},"@pixsame",". To zmiana nazwy, w kodzie nic się nie zmieniło. Zobacz ",[18,351,353],{"href":352},"\u002Fdocs\u002Fgetting-started\u002Fmigrate-from-frsource","Migracja z @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},"Przechodzisz z @frsource?","Zainstaluj plugin pixsame dla Cypress i uruchom swój pierwszy test regresji wizualnej.","md",{},"\u002Fdocs\u002Fpl\u002Fgetting-started\u002Finstall",false,{"title":5,"description":366},"docs\u002Fpl\u002Fgetting-started\u002Finstall","4eef_4s2j5-bXYFNZHm9pSyrKCur_OZcMldgjv8mNOQ",[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","Plugin dla Cypress","integrations",{"path":383,"title":384,"group":385},"\u002Fdocs\u002Freference\u002Fconfiguration","Konfiguracja","reference",{"path":387,"title":388,"group":377},"\u002Fdocs\u002Fgetting-started\u002Fusage","Użycie",{"path":390,"title":391,"group":381},"\u002Fdocs\u002Fintegrations\u002Fgithub-app","GitHub App",{"path":393,"title":394,"group":385},"\u002Fdocs\u002Freference\u002Fmanifest","Schemat manifestu",{"path":352,"title":353,"group":377},{"path":20,"title":21,"group":381},{"path":398,"title":399,"group":381},"\u002Fdocs\u002Fintegrations\u002Fvitest","Plugin dla Vitest",1794530807610]