docusaurus/assets/js/8075f6fd.6c5763c9.js

"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:()=>o,default:()=>u,frontMatter:()=>r,metadata:()=>a,toc:()=>c});var s=t(62540),i=t(43023);let 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",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:!1,lastUpdatedAt:1724941734e3,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"}},d={image:t(11361).A,authorsImageUrls:[void 0]},c=[];function l(e){let n={a:"a",img:"img",p:"p",strong:"strong",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.p,{children:["Frontend developers often need to ",(0,s.jsx)(n.strong,{children:"upgrade npm dependencies"}),", but those upgrades can feel scary and lead to ",(0,s.jsx)(n.strong,{children:"subtle UI side effects"})," not caught by your regular test suite."]}),"\n",(0,s.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,s.jsx)(n.strong,{children:"Docusaurus v3 is around the corner"})," (currently in ",(0,s.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,s.jsxs)(n.p,{children:["This article introduces a ",(0,s.jsx)(n.strong,{children:"visual regression testing"})," workflow based on ",(0,s.jsx)(n.a,{href:"https://github.com/features/actions",children:(0,s.jsx)(n.strong,{children:"GitHub Actions"})}),", ",(0,s.jsx)(n.a,{href:"https://playwright.dev/",children:(0,s.jsx)(n.strong,{children:"Playwright"})}),", and ",(0,s.jsx)(n.a,{href:"https://argos-ci.com/",children:(0,s.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,s.jsx)(n.p,{children:(0,s.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,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.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)}}}]);