[{"data":1,"prerenderedAt":396},["ShallowReactive",2],{"doc:zh-tw:getting-started\u002Finstall":3,"doc-nav:zh-tw":370},{"id":4,"title":5,"body":6,"description":362,"extension":363,"meta":364,"navigation":68,"order":40,"path":365,"reviewed":366,"seo":367,"stem":368,"__hash__":369,"fallback":366},"docs\u002Fdocs\u002Fzh-tw\u002Fgetting-started\u002Finstall.md","安裝",{"type":7,"value":8,"toc":355},"minimark",[9,12,22,26,113,116,123,143,162,270,273,317,328,336,351],[10,11,5],"h1",{"id":5},[13,14,15,16,21],"p",{},"這一頁講的是 Cypress 外掛。Playwright 請參考 ",[17,18,20],"a",{"href":19},"\u002Fdocs\u002Fintegrations\u002Fplaywright-reporter","Playwright 外掛","頁面。GitHub App 還在開發中。",[23,24,25],"h2",{"id":25},"加入套件",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"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","",[34,35,36,45,63,70,76,90,95,101],"code",{"__ignoreMap":32},[37,38,41],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sLBg1","# npm\n",[37,46,48,52,56,60],{"class":39,"line":47},2,[37,49,51],{"class":50},"soyes","npm",[37,53,55],{"class":54},"sT6z2"," install",[37,57,59],{"class":58},"s-5SL"," --save-dev",[37,61,62],{"class":54}," @pixsame\u002Fcypress-plugin-visual-regression-diff\n",[37,64,66],{"class":39,"line":65},3,[37,67,69],{"emptyLinePlaceholder":68},true,"\n",[37,71,73],{"class":39,"line":72},4,[37,74,75],{"class":43},"# yarn\n",[37,77,79,82,85,88],{"class":39,"line":78},5,[37,80,81],{"class":50},"yarn",[37,83,84],{"class":54}," add",[37,86,87],{"class":58}," -D",[37,89,62],{"class":54},[37,91,93],{"class":39,"line":92},6,[37,94,69],{"emptyLinePlaceholder":68},[37,96,98],{"class":39,"line":97},7,[37,99,100],{"class":43},"# pnpm\n",[37,102,104,107,109,111],{"class":39,"line":103},8,[37,105,106],{"class":50},"pnpm",[37,108,84],{"class":54},[37,110,87],{"class":58},[37,112,62],{"class":54},[23,114,115],{"id":115},"完成設定",[13,117,118,119,122],{},"在你的 support 檔案（預設為 ",[34,120,121],{},"cypress\u002Fsupport\u002Fe2e.ts","）中匯入指令：",[27,124,128],{"className":125,"code":126,"language":127,"meta":32,"style":32},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","import '@pixsame\u002Fcypress-plugin-visual-regression-diff';\n","ts",[34,129,130],{"__ignoreMap":32},[37,131,132,136,139],{"class":39,"line":40},[37,133,135],{"class":134},"sHUrx","import",[37,137,138],{"class":54}," '@pixsame\u002Fcypress-plugin-visual-regression-diff'",[37,140,142],{"class":141},"suds8",";\n",[13,144,145,146,149,150,153,154,157,158,161],{},"接著在 ",[34,147,148],{},"cypress.config.ts"," 中註冊外掛。如果你同時用到 ",[34,151,152],{},"e2e"," 和 ",[34,155,156],{},"component","，兩邊都要各呼叫一次 ",[34,159,160],{},"initPlugin","，它不會從一邊帶到另一邊。",[27,163,165],{"className":125,"code":164,"language":127,"meta":32,"style":32},"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",[34,166,167,182,196,200,215,220,240,248,253,262],{"__ignoreMap":32},[37,168,169,171,174,177,180],{"class":39,"line":40},[37,170,135],{"class":134},[37,172,173],{"class":141}," { defineConfig } ",[37,175,176],{"class":134},"from",[37,178,179],{"class":54}," 'cypress'",[37,181,142],{"class":141},[37,183,184,186,189,191,194],{"class":39,"line":47},[37,185,135],{"class":134},[37,187,188],{"class":141}," { initPlugin } ",[37,190,176],{"class":134},[37,192,193],{"class":54}," '@pixsame\u002Fcypress-plugin-visual-regression-diff\u002Fplugins'",[37,195,142],{"class":141},[37,197,198],{"class":39,"line":65},[37,199,69],{"emptyLinePlaceholder":68},[37,201,202,205,208,212],{"class":39,"line":72},[37,203,204],{"class":134},"export",[37,206,207],{"class":134}," default",[37,209,211],{"class":210},"sKwhi"," defineConfig",[37,213,214],{"class":50},"({\n",[37,216,217],{"class":39,"line":78},[37,218,219],{"class":141},"  e2e: {\n",[37,221,222,225,228,231,234,237],{"class":39,"line":92},[37,223,224],{"class":210},"    setupNodeEvents",[37,226,227],{"class":141},"(",[37,229,230],{"class":50},"on",[37,232,233],{"class":141},", ",[37,235,236],{"class":50},"config",[37,238,239],{"class":141},") {\n",[37,241,242,245],{"class":39,"line":97},[37,243,244],{"class":210},"      initPlugin",[37,246,247],{"class":141},"(on, config);\n",[37,249,250],{"class":39,"line":103},[37,251,252],{"class":141},"    },\n",[37,254,256,259],{"class":39,"line":255},9,[37,257,258],{"class":141},"  }",[37,260,261],{"class":50},",\n",[37,263,265,268],{"class":39,"line":264},10,[37,266,267],{"class":50},"})",[37,269,142],{"class":141},[23,271,272],{"id":272},"拍下你的第一張快照",[27,274,276],{"className":125,"code":275,"language":127,"meta":32,"style":32},"cy.get('.an-element-of-your-choice').matchImage();\n\n\u002F\u002F 或是整個頁面\ncy.matchImage();\n",[34,277,278,300,304,309],{"__ignoreMap":32},[37,279,280,283,286,288,291,294,297],{"class":39,"line":40},[37,281,282],{"class":141},"cy.",[37,284,285],{"class":210},"get",[37,287,227],{"class":141},[37,289,290],{"class":54},"'.an-element-of-your-choice'",[37,292,293],{"class":141},").",[37,295,296],{"class":210},"matchImage",[37,298,299],{"class":141},"();\n",[37,301,302],{"class":39,"line":47},[37,303,69],{"emptyLinePlaceholder":68},[37,305,306],{"class":39,"line":65},[37,307,308],{"class":43},"\u002F\u002F 或是整個頁面\n",[37,310,311,313,315],{"class":39,"line":72},[37,312,282],{"class":141},[37,314,296],{"class":210},[37,316,299],{"class":141},[13,318,319,320,322,323,327],{},"第一次執行時沒有東西可以比對，所以 ",[34,321,296],{}," 只會把截圖存下來當基準。之後每一次它都拿新截圖和那個檔案比。差異超過門檻時測試就失敗，Cypress runner 裡會出現一顆 ",[324,325,326],"strong",{},"See comparison"," 按鈕，點下去就是差異畫面。",[23,329,331,332,335],{"id":330},"從-frsource-過來的嗎","從 ",[34,333,334],{},"@frsource"," 過來的嗎？",[13,337,338,339,341,342,345,346,350],{},"套件從 ",[34,340,334],{}," 搬到了 ",[34,343,344],{},"@pixsame","。就只是改名，程式碼什麼都沒變。請參閱",[17,347,349],{"href":348},"\u002Fdocs\u002Fgetting-started\u002Fmigrate-from-frsource","從 @frsource 遷移","。",[352,353,354],"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":32,"searchDepth":47,"depth":47,"links":356},[357,358,359,360],{"id":25,"depth":47,"text":25},{"id":115,"depth":47,"text":115},{"id":272,"depth":47,"text":272},{"id":330,"depth":47,"text":361},"從 @frsource 過來的嗎？","安裝 pixsame 的 Cypress 外掛，並執行您的第一個視覺回歸測試。","md",{},"\u002Fdocs\u002Fzh-tw\u002Fgetting-started\u002Finstall",false,{"title":5,"description":362},"docs\u002Fzh-tw\u002Fgetting-started\u002Finstall","nzi3v6XJhrHUELyg2HNr-5sJP4x3EJ3Ve7XeAowctjg",[371,374,378,382,385,388,391,392,393],{"path":372,"title":5,"group":373},"\u002Fdocs\u002Fgetting-started\u002Finstall","getting-started",{"path":375,"title":376,"group":377},"\u002Fdocs\u002Fintegrations\u002Fcypress-plugin","Cypress 外掛","integrations",{"path":379,"title":380,"group":381},"\u002Fdocs\u002Freference\u002Fconfiguration","設定","reference",{"path":383,"title":384,"group":373},"\u002Fdocs\u002Fgetting-started\u002Fusage","使用方式",{"path":386,"title":387,"group":377},"\u002Fdocs\u002Fintegrations\u002Fgithub-app","GitHub App",{"path":389,"title":390,"group":381},"\u002Fdocs\u002Freference\u002Fmanifest","Manifest 結構",{"path":348,"title":349,"group":373},{"path":19,"title":20,"group":377},{"path":394,"title":395,"group":377},"\u002Fdocs\u002Fintegrations\u002Fvitest","Vitest 外掛",1794530807595]