"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[40105],{11361:(e,n,t)=>{t.d(n,{A:()=>s});let s=t.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},24240:(e,n,t)=>{t.d(n,{A:()=>s});let s=t.p+"assets/images/social-card-0662a6f419d0032829f99915ccf8918b.png"},90763:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>a,default:()=>u,frontMatter:()=>o,metadata:()=>s,toc:()=>c});var s=t(49051),i=t(62540),r=t(43023);let o={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"},a="Upgrading frontend dependencies with confidence",d={image:t(11361).A,authorsImageUrls:[void 0]},c=[];function l(e){let n={a:"a",img:"img",p:"p",strong:"strong",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(n.p,{children:["Frontend developers often need to ",(0,i.jsx)(n.strong,{children:"upgrade npm dependencies"}),", but those upgrades can feel scary and lead to ",(0,i.jsx)(n.strong,{children:"subtle UI side effects"})," not caught by your regular test suite."]}),"\n",(0,i.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,i.jsx)(n.strong,{children:"Docusaurus v3 is around the corner"})," (currently in ",(0,i.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,i.jsxs)(n.p,{children:["This article introduces a ",(0,i.jsx)(n.strong,{children:"visual regression testing"})," workflow based on ",(0,i.jsx)(n.a,{href:"https://github.com/features/actions",children:(0,i.jsx)(n.strong,{children:"GitHub Actions"})}),", ",(0,i.jsx)(n.a,{href:"https://playwright.dev/",children:(0,i.jsx)(n.strong,{children:"Playwright"})}),", and ",(0,i.jsx)(n.a,{href:"https://argos-ci.com/",children:(0,i.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,i.jsx)(n.p,{children:(0,i.jsx)(n.img,{alt:"Upgrading frontend dependencies with confidence - social card",src:t(24240).A+"",width:"1500",height:"785"})})]})}function u(e={}){let{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(l,{...e})}):l(e)}},43023:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>a});var s=t(63696);let i={},r=s.createContext(i);function o(e){let n=s.useContext(r);return s.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),s.createElement(r.Provider,{value:n},e.children)}},49051:e=>{e.exports=JSON.parse('{"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":false,"label":"Release","permalink":"/blog/tags/release","description":"Blog posts about Docusaurus\' new releases"}],"readingTime":8.355,"hasTruncateMarker":true,"authors":[{"name":"S\xe9bastien Lorber","title":"Docusaurus maintainer, This Week In React editor","url":"https://thisweekinreact.com","page":{"permalink":"/blog/authors/slorber"},"description":"A freelance React and React-Native developer near Paris and Docusaurus maintainer. Also runs ThisWeekInReact.com, a newsletter to stay updated with the React ecosystem.\\n","socials":{"x":"https://x.com/sebastienlorber","linkedin":"https://www.linkedin.com/in/sebastienlorber/","github":"https://github.com/slorber","newsletter":"https://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":false,"lastUpdatedAt":1726738176000,"lastUpdatedBy":"dependabot[bot]","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"}}')}}]);