{"id":4269880,"date":"2021-04-01T13:11:06","date_gmt":"2021-04-01T11:11:06","guid":{"rendered":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/"},"modified":"2025-12-08T13:43:36","modified_gmt":"2025-12-08T11:43:36","slug":"visual-regression-testing-and-environment-comparison-with-backstop-js-2","status":"publish","type":"article","link":"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/","title":{"rendered":"Visual regression testing and environment comparison with backstop JS"},"content":{"rendered":"<div class=\"block-article-post-header js-block-article-post-header block-article-post-header__theme--onyxGrey\">\n\t<button\tclass=\"cta-button block-article-post-header__back-button cta-button__color--white cta-button__style--back\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack to all articles\t\t<\/span>\n\t\n<\/button><h1\t\tclass=\"typography block-article-post-header__title typography__color--white typography__size--h1 typography__align--left\"\n\t\t\t>\n\t\tVisual regression testing and environment comparison with backstop JS\t<\/h1><div\n\t\tclass=\"image-wrap block-article-post-header__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg\"\n\t\t\t\tclass=\"image block-article-post-header__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><div class=\"author block-article-post-header__author\" data-animation=\"slide-fade\">\n\t\t\t<img\n\t\t\tclass=\"author__portrait\"\n\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2023\/05\/jonathan-whiteside-svp-150x150.jpg\"\n\t\t\talt=\"Jonathan Whiteside\"\n\t\t\/>\n\t\n\t<div class=\"author__text\">\n\t\tJonathan Whiteside\t\t<br \/>\n\t\tGlobal EVP Technology\n\t\t\t<\/div>\n<\/div>\n\t<div class=\"block-article-post-header__meta\">\n\t\t\t\t\t\t\t<div class=\"block-article-post-header__meta-date\">\n\t\t\t\t<div class=\"block-article-post-header__date-description\">\n\t\t\t\t\tDate\t\t\t\t<\/div>\n\t\t\t\t<div class=\"block-article-post-header__published-date\">\n\t\t\t\t\t1 April 2021\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tCSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tBackstop.JS serves your tests via a webpage which gives you the visual feedback needed for targeting bugs caused from CSS related issues. These comparisons can uncover bugs you\u2019d otherwise not learn about until it\u2019s too late. A very useful tool to have in your Front End arsenal, wouldn\u2019t you agree?\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tJonathan has been sharing his insights with the DEPT\u00ae team and wanted to share with our blog readers also. So, sit back and enjoy the ride through the wonderful world of Backstop.JS.\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tWhat is Backstop.JS exactly?\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tBackstop.JS is a open source project to run visual tests using headless browsers to capture screenshots.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tOriginally ran using either PhantomJS or SlimerJS headless browser libraries. These were implementations of WebKit (Chrome) or Gecko (Firefox).\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tFrom release\u00a0<a href=\"https:\/\/github.com\/garris\/BackstopJS\/releases\/tag\/v3.0.19\" target=\"_blank\" rel=\"noreferrer noopener\">v3.0.19<\/a>\u00a0this now supports Chrome headless.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tThe latest release has a lot of stability improvements\u00a0<a href=\"https:\/\/github.com\/garris\/BackstopJS\/releases\/tag\/v3.0.27\" target=\"_blank\" rel=\"noreferrer noopener\">v3.0.27<\/a>\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tGit Hub URL :\u00a0<a href=\"https:\/\/github.com\/garris\/BackstopJS\" target=\"_blank\" rel=\"noreferrer noopener\">github.com\/garris\/BackstopJS<\/a>\t<\/p>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tWhat features does Backstop.JS offer?\t<\/h2>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>Allows capture and comparison of screenshots from headless browser<\/li><li>Excellent comparison tool to identify and highlight differences<\/li><li>Allows setup of multiple breakpoints to test responsive sites<\/li><li>Uses simple CSS selectors to identify what to capture<\/li><li>Pre capture scripts can be enabled to be ran<\/li><\/ul><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F&#038;text=Visual%20regression%20testing%20and%20environment%20comparison%20with%20backstop%20JS\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div\n\t\tclass=\"image-wrap block-image__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/Dept-17-2-1200x675-c.jpg\"\n\t\t\t\tclass=\"image block-image__image\"\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div>\n\n<div class=\"block-title-and-content js-block-title-and-content block-title-and-content__theme--white\">\n\t<div class=\"block-title-and-content__layout\">\n\t\t\n\t\t\t\t\t<div class=\"block-title-and-content__content\">\n\t\t\t\t\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tVisual regression testing\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tVisual regression testing is the process of creating reference images for each component as they are created. This allows a comparison over time to monitor changes.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tRan by the developer on their local development environment after changes made to ensure no regressions issues have occurred due to their changes.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWhy is that useful?\t<\/p>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>This allows the developer greater test coverage than they could do manually when ensuring their changes have not had regression impact on other components.<\/li><li>Allows greater detail comparison than possible reviewing the site manually. E.g. If the font size is increased by 1px then it will be caught which could easily be missed.<\/li><li>Allows developers without a full understanding of the project have a safety net about what the site should look like before their changes.<\/li><\/ul><\/div><\/div>\n\n<h2\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\tEnvironment comparison\t<\/h2>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tUsing visual testing to compare different environments involves comparing one site against another. The reference images are not stored beyond the test.\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tA reference image set is generated from one site and then another site is compared against them\t<\/p>\n\n<p\t\tclass=\"typography block-typography__typography typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tWhy is that useful?\t<\/p>\n\n<div class='block-panel-with-rich-text__item'><div class='block-panel-with-rich-text__item-inner'><ul class=\"lists lists__color--richBlack lists__type--circle lists__size--default lists__align--left block-lists__lists\">\n\t<li>To ensure that the HTML created has been integrated within the website correctly and is rendering out in the same way. This highlights mistakes with the integration or conflicting integrations that are not present on the HTML Demo site.<\/li><li>Running regression tests against the Staging and Live instances of a site to see where the changes have occurred.<\/li><li>When setting up comparison between a demo and dev site powered by a CMS this can make the tests brittle so the tests pages need to be isolated from changes in content as possible.<\/li><\/ul><\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\n\t<div class=\"block-title-and-content__social-links\">\n\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"copy\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Copy page link\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tdata-tooltip=\"true\"\n\t\t\t\t\tdata-tooltip-text=\"Link copied to clipboard.\"\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.832 15.167l8.333-8.333M9.332 6.001l2.787-2.787a4.715 4.715 0 016.666 0v0a4.715 4.715 0 010 6.667L16 12.668M5.999 9.334l-2.787 2.787a4.715 4.715 0 000 6.666v0a4.715 4.715 0 006.667 0l2.787-2.786' stroke='currentColor' stroke-width='2'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"facebook\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Facebook\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='14' height='22' viewBox='0 0 14 22' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M4.032 22L4 12H0V8h4V5.5C4 1.789 6.298 0 9.61 0c1.585 0 2.948.118 3.345.17v3.88H10.66c-1.8 0-2.15.856-2.15 2.112V8h5.241l-2 4H8.51v10H4.032z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/api.whatsapp.com\/send?text=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"whatsapp\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Whatsapp\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg xmlns='http: \/\/www.w3.org\/2000\/svg' width='25' height='24' viewBox='0 0 25 24'><path d='M.805 24l1.687-6.163a11.869 11.869 0 01-1.588-5.945C.907 5.335 6.244 0 12.801 0c3.182.001 6.17 1.24 8.415 3.488a11.819 11.819 0 013.481 8.413c-.002 6.558-5.34 11.893-11.896 11.893h-.005c-1.99-.001-3.947-.5-5.685-1.448L.805 24zm6.598-3.807l.361.214a9.874 9.874 0 005.033 1.378h.004c5.45 0 9.885-4.434 9.888-9.885a9.824 9.824 0 00-2.894-6.993 9.823 9.823 0 00-6.99-2.898c-5.454 0-9.89 4.434-9.892 9.884a9.86 9.86 0 001.512 5.26l.235.374-.999 3.648 3.742-.982z' fill='currentColor'\/><path d='M9.825 6.921c-.24-.58-.486-.501-.668-.51-.174-.009-.372-.01-.57-.01-.198 0-.52.074-.793.371-.272.298-1.04 1.017-1.04 2.48 0 1.462 1.065 2.875 1.214 3.073.148.199 2.096 3.2 5.078 4.487.709.306 1.262.49 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.759-.72 2.007-1.413.247-.694.247-1.29.173-1.413-.074-.124-.272-.199-.57-.347-.297-.149-1.758-.868-2.03-.967-.273-.1-.471-.149-.67.149-.198.297-.767.966-.94 1.165-.174.198-.348.223-.645.074-.297-.149-1.255-.462-2.39-1.475-.884-.788-1.48-1.76-1.654-2.058-.173-.298-.018-.459.13-.607.134-.133.298-.347.446-.52.149-.174.199-.298.298-.496.099-.198.05-.372-.025-.52-.074-.15-.669-1.612-.917-2.207z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F&#038;text=Visual%20regression%20testing%20and%20environment%20comparison%20with%20backstop%20JS\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"twitter\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Twitter\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='25' height='20' viewBox='0 0 25 20' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M24.75 2.3c-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.2-.2-7.8-2.2-10.2-5.2-.5.8-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 3.9 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2.2 1.4 4.8 2.2 7.5 2.2 9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t\t\t<a\n\t\t\t\thref=\"http:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwww.deptagency.com%2Fen-au%2Finsight%2Fvisual-regression-testing-and-environment-comparison-with-backstop-js-2%2F\"\n\t\t\t\tdata-share-url=\"https:\/\/www.deptagency.com\/en-au\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"\n\t\t\t\tdata-share-title=\"Visual regression testing and environment comparison with backstop JS\"\n\t\t\t\tdata-share-type=\"linkedin\"\n\t\t\t\tclass=\"block-title-and-content__social-links-item js-social-link\"\n\t\t\t\taria-label=\"Share to Linkedin\"\n\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\n\t\t\t\t\t\t\t>\n\t\t\t\t<svg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http: \/\/www.w3.org\/2000\/svg'><path d='M1.15 17.3h3.6V5.8h-3.6v11.5zM.75 2.1c0 1.2 1 2.1 2.1 2.1 1.2 0 2.1-.9 2.1-2.1 0-1.2-1-2.1-2.1-2.1-1.2 0-2.1 1-2.1 2.1zM14.45 17.3h3.6v-6.2c0-3.1-.7-5.5-4.3-5.5-1.8 0-2.9.9-3.4 1.8V5.8h-3.4v11.5h3.6v-5.7c0-1.5.2-2.9 2.1-2.9 1.8 0 1.8 1.7 1.8 3v5.6z' fill='currentColor'\/><\/svg>\t\t\t<\/a>\n\t\t\t\t<\/div>\n<\/div>\n\n<div class=\"block-highlighted-item-listing\">\n\t<h2\t\tclass=\"typography block-highlighted-item-listing__title typography__color--onyxGrey typography__size--regular-body typography__align--left\"\n\t\t\t>\n\t\tMore Insights?\t<\/h2><a\tclass=\"cta-button block-highlighted-item-listing__cta-button cta-button__color--onyxGrey cta-button__style--regular\" href=\"https:\/\/www.deptagency.com\/all-insights\/\" >\n\t\n\t\t\t<span>\n\t\t\tView all Insights\t\t<\/span>\n\t\n<\/a>\n\t<div class=\"block-highlighted-item-listing__cards\">\n\t\t<a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/dept-strong-performer-forrester-wave-commerce-services-q1-2026\/\"\n\t\t\t\ttitle=\"DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/02\/Forrester-_-2026-_-Insight-_-Phrase-16_9.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tCOMMERCE&emsp;\u2022&emsp;Carryn Quibell\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae named a Strong Performer in The Forrester Wave\u2122: Commerce Services, Q1 2026<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/dept-brings-its-cannes-style-moments-year-round-with-future-club\/\"\n\t\t\t\ttitle=\"DEPT\u00ae brings its Cannes-Style moments year-round with Future Club\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/02\/DFC-INSIGHT-IMAGE-1-1080X1350.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"DEPT\u00ae brings its Cannes-Style moments year-round with Future Club\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tNEWS&emsp;\u2022&emsp;Marjan Straathof\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>DEPT\u00ae brings its Cannes-Style moments year-round with Future Club<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a><a\tclass=\"universal-item-card universal-item-card__type--article universal-item-card--has-link-decoration\"\n\tdata-theme=\"white\"\n\t\t\thref=\"https:\/\/www.deptagency.com\/en-au\/insight\/chatgpt-ads-the-next-phase-of-ai-driven-discovery\/\"\n\t\t\t\ttitle=\"ChatGPT ads &amp; the next phase of AI-driven discovery\"\n\t\t>\n\t\t\t<div class=\"universal-item-card__backplate universal-item-card__backplate--with-image\"><\/div>\n\t\n\t<div\n\t\tclass=\"image-wrap universal-item-card__image-wrap\"\n\t\tdata-align=\"center center\"\n\t\t\t>\n\n\t\t\t<picture\n\t\tclass=\"image__picture\"\n\t\t\t\t>\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t<img\n\t\t\t\tsrc=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Ads-1920x1080-1.png\"\n\t\t\t\tclass=\"image universal-item-card__image\"\n\n\t\t\t\t\t\t\t\talt=\"ChatGPT ads &amp; the next phase of AI-driven discovery\"\n\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\/>\n\t\t<\/picture>\n\t\n\t<\/div><p\t\tclass=\"typography universal-item-card__meta typography__color--darkGrey typography__size--eyebrow-lc typography__align--left\"\n\t\t\t>\n\t\tAI TRANSFORMATION&emsp;\u2022&emsp;Jenna Gardner\t<\/p><h3\t\tclass=\"typography universal-item-card__title typography__color--onyxGrey typography__size--h6 typography__align--left\"\n\t\t\t>\n\t\t<span>ChatGPT ads &amp; the next phase of AI-driven discovery<\/span>\t<\/h3><button\tclass=\"cta-button universal-item-card__btn cta-button__color--onyxGrey cta-button__style--regular has-parent-hover\" >\n\t\n\t\t\t<span>\n\t\t\tRead Article\t\t<\/span>\n\t\n<\/button>\n\t\n\t<\/a>\t<\/div>\n<\/div>\n\n<div class=\"block-get-in-touch js-block-get-in-touch\">\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--left block-get-in-touch__column--richBlack\">\n\t\t<h2 class=\"heading heading__color--white heading__size--xl heading__align--left block-get-in-touch__heading\">\n\t\t\tQuestions?\t<\/h2>\t<\/div>\n\n\t<div class=\"block-get-in-touch__column block-get-in-touch__column--right block-get-in-touch__column--white\">\n\t<div\n\t\tclass=\"image-wrap block-get-in-touch__image-wrap\"\n\t\tdata-align=\"top center\"\n\t\t\t>\n\n\t\t\t<div style=\"background-image:url(https:\/\/www.deptagency.com\/wp-content\/uploads\/2023\/05\/jonathan-whiteside-svp.jpg)\" class=\"image image--bg block-get-in-touch__image\" ><\/div>\n\t\n\t<\/div>\t\t\t<div class=\"block-get-in-touch__specialist\">\n\t\t\t\t<p class=\"heading heading__color--richBlack heading__size--xxs heading__align--left block-get-in-touch__subtitle\">\n\t\t\tGlobal EVP Technology\t<\/p><h3 class=\"heading heading__color--richBlack heading__size--m heading__align--left block-get-in-touch__person-title\">\n\t\t\tJonathan Whiteside\t<\/h3>\t\t\t<\/div>\n\t\t\n\t\t<button\tclass=\"cta-bar block-get-in-touch__cta-bar js-cta-bar\"\n\tid=\"block-get-in-touch-33146518de28ca893607ca030d4a2ee9\"\n\ttitle=\"Get in touch\"\n\taria-label=\"\"\n\t\t>\n\t<div class=\"cta-bar__container cta-bar__container--size--default\">\n\t\t<div class=\"cta-bar__content\">\n\t\t\t<span class=\"cta-bar__label\">\n\t\t\t\tGet in touch\t\t\t<\/span>\n\t\t\t<i class=\"icon icon icon__color--white icon__size--small icon__arrow-right-circle cta-bar__icon cta-bar__icon\">\n\t<svg width='24' height='24' fill='none' viewBox='0 0 24 24' xmlns='http:\/\/www.w3.org\/2000\/svg'><g class='symbol'><path d='M11.5215 17.2609L17.2607 12L11.5215 6.73912' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><path d='M16.7827 12L6.26099 12' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><circle cx='12' cy='12' r='11' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10'\/><\/g><path class='symbol-hover' fill-rule='evenodd' clip-rule='evenodd' d='M23 12C23 5.92487 18.0751 0.999999 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12ZM17.7674 11.4471L12.0283 6.18627L11.0147 7.292L15.3326 11.25L6.26099 11.25L6.26099 12.75L15.3326 12.75L11.0147 16.708L12.0283 17.8137L17.7675 12.5529L18.3706 12L17.7674 11.4471Z' fill='currentColor'\/><\/svg><\/i>\t\t<\/div>\n\t<\/div>\n<\/button>\t<\/div>\n<\/div>\n\n<div\n\tclass=\"flyout-drawer js-flyout-drawer flyout-drawer__position--right\"\n\tdata-trigger=\"#block-get-in-touch-33146518de28ca893607ca030d4a2ee9\"\n\tdata-instant-open=\"false\"\n>\n\t<div class=\"flyout-drawer__left-mobile-backplate\"><\/div>\n\t<div class=\"flyout-drawer__left-backplate\"><\/div>\n\n\t\t<div class=\"flyout-drawer__left\"><\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__close cta-button__color--white cta-button__style--text-and-icon js-drawer-close has-flipped-icon\" aria-label=\"Close\" >\n\t<svg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='10.5' cy='10.5' r='9.5' transform='rotate(-90 10.5 10.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='m14 7-7 7m0-7 7 7' stroke='var(--dept-button-icon-color)' stroke-width='1.5' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tClose\t\t<\/span>\n\t\n<\/button>\n\t<div class=\"flyout-drawer__right\">\n\t\t<div class=\"pardot-forms block-get-in-touch__pardot-forms js-pardot-forms\">\n\t\t<iframe\n\t\tdata-initial-src=\"https:\/\/www2.deptagency.com\/l\/321011\/2018-08-22\/hqqkrl\"\n\t\tclass=\"pardot-forms__embed block-get-in-touch__embed js-pardot-forms-embed\"\n\t\ttype=\"text\/html\"\n\t><\/iframe>\n\t<div class=\"loader pardot-forms__loader loader__color--hanPurple js-pardot-forms-loader\">\n\t<div class=\"loader__first\"><\/div>\n\t<div class=\"loader__second\"><\/div>\n<\/div><\/div>\t<\/div>\n\n\t<button\tclass=\"cta-button flyout-drawer__back cta-button__color--onyxGrey cta-button__style--text-and-icon js-drawer-back has-small-icon\" aria-label=\"Back\" >\n\t<svg width='41' height='41' viewBox='0 0 41 41' fill='none' xmlns='http:\/\/www.w3.org\/2000\/svg'><circle cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' stroke='var(--dept-button-icon-outline-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><circle class='icon-backplate' cx='20.5' cy='20.5' r='19.5' transform='rotate(-90 20.5 20.5)' fill='var(--dept-button-icon-backplate-color)' fill-opacity='1'\/><path class='icon-center' d='M21.174 30 11 20.674l10.174-9.326m-9.326 9.328H30.5' stroke='var(--dept-button-icon-color)' stroke-width='1.3' stroke-miterlimit='10' fill='none'\/><\/svg>\n\t\t\t<span>\n\t\t\tBack\t\t<\/span>\n\t\n<\/button><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":40,"featured_media":4269881,"template":"","meta":{"_acf_changed":false,"es_utils_meta_schema":"","member_job_title":"","member_linkedin_url":"","dept_alt_featured_image":[],"dept_algolia_noindex":false,"dept_algolia_featured":false,"footnotes":""},"insight-topics":[42715,42719],"person":[515],"class_list":["post-4269880","article","type-article","status-publish","has-post-thumbnail","hentry"],"acf":{"dept_is_3q_page":false,"dept_insight_featured":true,"dept_current_cpt_partner":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual regression testing and environment comparison with backstop JS - DEPT\u00ae<\/title>\n<meta name=\"description\" content=\"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual regression testing and environment comparison with backstop JS - DEPT\u00ae\" \/>\n<meta property=\"og:description\" content=\"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\" \/>\n<meta property=\"og:site_name\" content=\"DEPT\u00ae\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T11:43:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\",\"url\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\",\"name\":\"Visual regression testing and environment comparison with backstop JS - DEPT\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/www.deptagency.com\/en-uki\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg\",\"datePublished\":\"2021-04-01T11:11:06+00:00\",\"dateModified\":\"2025-12-08T11:43:36+00:00\",\"description\":\"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#breadcrumb\"},\"inLanguage\":\"en-AU\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage\",\"url\":\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg\",\"contentUrl\":\"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg\",\"width\":1200,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.deptagency.com\/en-au\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual regression testing and environment comparison with backstop JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.deptagency.com\/en-uki\/#website\",\"url\":\"https:\/\/www.deptagency.com\/en-uki\/\",\"name\":\"DEPT\u00ae\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.deptagency.com\/en-uki\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-AU\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/6264d845ee57529e5137e7b8717a6271\",\"name\":\"Alexandra Moorhouse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-AU\",\"@id\":\"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g\",\"caption\":\"Alexandra Moorhouse\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual regression testing and environment comparison with backstop JS - DEPT\u00ae","description":"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/","og_locale":"en_US","og_type":"article","og_title":"Visual regression testing and environment comparison with backstop JS - DEPT\u00ae","og_description":"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.","og_url":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/","og_site_name":"DEPT\u00ae","article_modified_time":"2025-12-08T11:43:36+00:00","og_image":[{"width":1200,"height":750,"url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/","url":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/","name":"Visual regression testing and environment comparison with backstop JS - DEPT\u00ae","isPartOf":{"@id":"https:\/\/www.deptagency.com\/en-uki\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage"},"image":{"@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg","datePublished":"2021-04-01T11:11:06+00:00","dateModified":"2025-12-08T11:43:36+00:00","description":"CSS Visual Regression testing is the process of running automated visual test comparisons on pages or elements in your projects. Using Backstop.JS, Jonathan has discovered that this tool is intuitive, allowing quick configuration to allow you to get up and rolling quickly.","breadcrumb":{"@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#breadcrumb"},"inLanguage":"en-AU","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#primaryimage","url":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg","contentUrl":"https:\/\/www.deptagency.com\/wp-content\/uploads\/2021\/03\/2017_20_02_Dept_Rotterdam_Marketing_sfeerbeelden_JRF__89-1200x750-c.jpg","width":1200,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/www.deptagency.com\/insight\/visual-regression-testing-and-environment-comparison-with-backstop-js-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.deptagency.com\/en-au\/"},{"@type":"ListItem","position":2,"name":"Visual regression testing and environment comparison with backstop JS"}]},{"@type":"WebSite","@id":"https:\/\/www.deptagency.com\/en-uki\/#website","url":"https:\/\/www.deptagency.com\/en-uki\/","name":"DEPT\u00ae","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.deptagency.com\/en-uki\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-AU"},{"@type":"Person","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/6264d845ee57529e5137e7b8717a6271","name":"Alexandra Moorhouse","image":{"@type":"ImageObject","inLanguage":"en-AU","@id":"https:\/\/www.deptagency.com\/en-uki\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e8ce4f04a43020c00db84d54b1c54ed8dba8b0de0b959126c45106f23e6ecb9a?s=96&d=mm&r=g","caption":"Alexandra Moorhouse"}}]}},"_links":{"self":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight"}],"about":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/users\/40"}],"version-history":[{"count":1,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269880\/revisions"}],"predecessor-version":[{"id":4375200,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight\/4269880\/revisions\/4375200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/media\/4269881"}],"wp:attachment":[{"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/media?parent=4269880"}],"wp:term":[{"taxonomy":"insight-topic","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/insight-topics?post=4269880"},{"taxonomy":"person","embeddable":true,"href":"https:\/\/www.deptagency.com\/en-au\/wp-json\/wp\/v2\/person?post=4269880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}