docusaurus/assets/js/8075f6fd.c78001ba.js

"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[99011],{66064:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},40097:(e,n,s)=>{s.d(n,{Z:()=>t});const t=s.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},50520:(e,n,s)=>{s.r(n),s.d(n,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var t=s(24246),i=s(71670);const r={authors:["slorber"],tags:["release"],slug:"/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",description:"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.",image:"./img/social-card.png"},o="Upgrading frontend dependencies with confidence",a={permalink:"/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",editUrl:"https://github.com/facebook/docusaurus/edit/main/website/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx",source:"@site/blog/2023/09-22-upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing/index.mdx",title:"Upgrading frontend dependencies with confidence",description:"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.",date:"2023-09-22T00:00:00.000Z",tags:[{inline:!1,label:"Release",permalink:"/blog/tags/release",description:"Blog posts about Docusaurus' new releases"}],readingTime:8.355,hasTruncateMarker:!0,authors:[{name:"S\xe9bastien Lorber",title:"Docusaurus maintainer, This Week In React editor",url:"https://thisweekinreact.com",twitter:"sebastienlorber",email:"sebastien@thisweekinreact.com",imageURL:"https://github.com/slorber.png",key:"slorber"}],frontMatter:{authors:["slorber"],tags:["release"],slug:"/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing",description:"Upgrade npm dependencies with confidence thanks to a visual regression testing workflow using GitHub Actions, Playwright and Argos.",image:"./img/social-card.png"},unlisted:!1,lastUpdatedAt:1718970228e3,lastUpdatedBy:"Tatsunori Uchino",prevItem:{title:"Preparing your site for Docusaurus v3",permalink:"/blog/preparing-your-site-for-docusaurus-v3"},nextItem:{title:"Docusaurus 2.4",permalink:"/blog/releases/2.4"}},c={image:s(66064).Z,authorsImageUrls:[void 0]},d=[];function g(e){const n={a:"a",img:"img",p:"p",strong:"strong",...(0,i.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(n.p,{children:["Frontend developers often need to ",(0,t.jsx)(n.strong,{children:"upgrade npm dependencies"}),", but those upgrades can feel scary and lead to ",(0,t.jsx)(n.strong,{children:"subtle UI side effects"})," not caught by your regular test suite."]}),"\n",(0,t.jsxs)(n.p,{children:["Upgrading Docusaurus is a good example: without reviewing all the pages one by one, it's hard to be sure there's no visual regression. ",(0,t.jsx)(n.strong,{children:"Docusaurus v3 is around the corner"})," (currently in ",(0,t.jsx)(n.a,{href:"https://github.com/facebook/docusaurus/discussions/9312",children:"beta"}),"), and we would like to help you do this upgrade with confidence."]}),"\n",(0,t.jsxs)(n.p,{children:["This article introduces a ",(0,t.jsx)(n.strong,{children:"visual regression testing"})," workflow based on ",(0,t.jsx)(n.a,{href:"https://github.com/features/actions",children:(0,t.jsx)(n.strong,{children:"GitHub Actions"})}),", ",(0,t.jsx)(n.a,{href:"https://playwright.dev/",children:(0,t.jsx)(n.strong,{children:"Playwright"})}),", and ",(0,t.jsx)(n.a,{href:"https://argos-ci.com/",children:(0,t.jsx)(n.strong,{children:"Argos"})}),". It is not directly coupled to Docusaurus or React, and can be adapted to work with other frontend applications and frameworks."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"Upgrading frontend dependencies with confidence - social card",src:s(40097).Z+"",width:"1500",height:"785"})})]})}function u(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(g,{...e})}):g(e)}},71670:(e,n,s)=>{s.d(n,{Z:()=>a,a:()=>o});var t=s(27378);const i={},r=t.createContext(i);function o(e){const n=t.useContext(r);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:o(e.components),t.createElement(r.Provider,{value:n},e.children)}}}]);