[{"data":1,"prerenderedAt":396},["ShallowReactive",2],{"doc:zh:getting-started\u002Finstall":3,"doc-nav:zh":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\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 运行器里会出现一个 ",[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\u002Fgetting-started\u002Finstall",false,{"title":5,"description":362},"docs\u002Fzh\u002Fgetting-started\u002Finstall","sTak9swDhqhFJoYlx6RZ5Qx9UuUuQswTckjlv9xIoVk",[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","清单 schema",{"path":348,"title":349,"group":373},{"path":19,"title":20,"group":377},{"path":394,"title":395,"group":377},"\u002Fdocs\u002Fintegrations\u002Fvitest","Vitest 插件",1794530807638]