{"id":1297,"date":"2018-02-13T14:55:28","date_gmt":"2018-02-13T14:55:28","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=1297"},"modified":"2021-01-05T12:13:43","modified_gmt":"2021-01-05T12:13:43","slug":"how-to-visually-compare-staging-vs-production-websites-automatically","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2018\/02\/how-to-visually-compare-staging-vs-production-websites-automatically","title":{"rendered":"How to Visually Compare Staging vs. Production Websites Automatically"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span><p class=\"lead\"><!-- pn-tldr --><\/p>\n<h2>Key takeaways<\/h2>\n<ul>\n<li>Automated visual comparison catches layout regressions no functional test asserts on.<\/li>\n<li>Compare the same viewport and state, or the diff is dominated by noise.<\/li>\n<li>Review differences rather than gating on pixel equality, which fails constantly.<\/li>\n<\/ul>\n<p><!-- \/pn-tldr -->With <a href=\"https:\/\/loadfocus.com\">LoadFocus<\/a>\u00a0you can visually compare your staging website with your production website automatically, following these steps below:<\/p>\n<p>Steps to dynamically compare Staging vs. Production websites:<\/p>\n<ul>\n<li>Enter\u00a0<a href=\"https:\/\/loadfocus.com\/visual-regression-testing\">https:\/\/loadfocus.com\/visual-regression-testing<\/a><\/li>\n<\/ul>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium\" src=\"https:\/\/s3.amazonaws.com\/loadfocus\/screenshot-comparison\/visual-regression-test-new.png\" width=\"1732\" height=\"532\" \/>\n<ul>\n<li>Enter your Staging Website (i.e. https:\/\/loadfocus-staging.com)<\/li>\n<li>Enter your Production or Live Website (i.e. https:\/\/loadfocus.com)<\/li>\n<li>Click Discover button and choose the number of URLs to automatically get discovered from your Production website<\/li>\n<\/ul>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium\" src=\"https:\/\/s3.amazonaws.com\/loadfocus\/screenshot-comparison\/dynamically-get-website-urls.png\" width=\"2426\" height=\"1488\" \/>\n<ul>\n<li>Start your Visual Comparison Test<\/li>\n<li>Inspect generated images and the diff image of the two websites<\/li>\n<\/ul>\n<img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/loadfocus\/screenshot-comparison\/view-regression-test-results.png\" \/>\n<p>This will generate a screenshot for each version of your website, Staging and Production, based on the Staging URL + Pathname or Production URL + Pathname and compare the screenshots.<\/p>\n<p>You can choose the threshold which will ignore the percentage of different pixels between the two screenshots generate for each page. You can generate screenshots on different responsive sizes or emulate on mobile devices.<\/p>\n<p>More details on our <a href=\"https:\/\/loadfocus.com\/visual-regression-testing\">Visual Regression Testing service<\/a> webpage.<!-- pn-faq --><\/p>\n<h2>Frequently Asked Questions<\/h2>\n<h3>What does visual comparison catch that functional tests miss?<\/h3>\n<p>Layout regressions. A functional test asserts that an element exists and passes happily while the page renders broken, because nothing checks how it looks.<\/p>\n<h3>Why do I get so many differences?<\/h3>\n<p>Usually because the two captures are not comparable. Compare the same viewport and the same page state, or the diff is dominated by noise rather than by the change you are looking for.<\/p>\n<h3>Should the build fail on any pixel difference?<\/h3>\n<p>No. Pixel equality fails constantly on fonts and antialiasing. Review the differences, or set a tolerance, so the signal survives.<\/p>\n<p><!-- \/pn-faq --><!-- pn-related-reading --><\/p>\n<h2>Related reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2018\/02\/what-is-a-staging-environment-in-software-development\">What is a Staging Environment in Software Development?<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2017\/04\/screenshot-comparison-tools\">Screenshot Comparison Tools<\/a><\/li>\n<li><a href=\"https:\/\/loadfocus.com\/blog\/2014\/06\/how-to-take-snapshots-of-the-browser-using-selenium-webdriver\">How to take screenshots with Selenium WebDriver<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 2<\/span> <span class=\"rt-label rt-postfix\">minutes read<\/span><\/span>Key takeaways Automated visual comparison catches layout regressions no functional test asserts on. Compare the same viewport and state, or the diff is dominated by noise. Review differences rather than gating on pixel equality, which fails constantly. With LoadFocus\u00a0you can visually compare your staging website with your production website automatically, following these steps below: Steps&#8230;  <a href=\"https:\/\/loadfocus.com\/blog\/2018\/02\/how-to-visually-compare-staging-vs-production-websites-automatically\" class=\"more-link\" title=\"Read How to Visually Compare Staging vs. Production Websites Automatically\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":3711,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[155,48],"tags":[250,251,249],"class_list":["post-1297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-testing","category-test-automation","tag-compare-staging-with-production-website","tag-discover-website-urls-dynamically","tag-visual-regression-testing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/comments?post=1297"}],"version-history":[{"count":0,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/posts\/1297\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media\/3711"}],"wp:attachment":[{"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/media?parent=1297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/categories?post=1297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/loadfocus.com\/blog\/wp-json\/wp\/v2\/tags?post=1297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}