{"id":30390,"date":"2021-08-25T17:32:25","date_gmt":"2021-08-25T17:32:25","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=30390"},"modified":"2023-01-09T17:46:07","modified_gmt":"2023-01-10T01:46:07","slug":"instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/","title":{"rendered":"Automatically Run Visual Tests on Every Netlify Deploy"},"content":{"rendered":"\n

Running tests shouldn’t be an afterthought, but it can seem challenging to dive in with the huge variety of frameworks and simply not knowing what<\/em> to test. Instead, we can use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with the Applitools Visual Diff Plugin.<\/p>\n\n\n\n

What is a Netlify Build Plugin?<\/h2>\n\n\n\n

Netlify<\/a> is a hosting and deployment platform that automates taking a web app and publishing it to the web. This also includes the ability to deploy serverless functions, allowing developers to closely develop APIs and backend logic right next to their apps.<\/p>\n\n\n\n

As part of that process, Netlify gives developers the ability to install Build Plugins<\/a>, which helps extend the default deployment allowing additional tools and services to tap.<\/p>\n\n\n

\n
\"Netlify
Visual diff (Applitools) plugin installed on Netlify<\/figcaption><\/figure><\/div>\n\n\n

This makes for a perfect opportunity for things like code analysis or custom build caching for those who don’t want to maintain it themselves, but it’s also an opportunity for adding testing, where we can start using Applitools to run visual tests without having to have any other type of infrastructure or frameworks configured.<\/p>\n\n\n\n

How does Applitools work with Netlify Build Plugins?<\/h2>\n\n\n\n

With Build Plugins, Netlify provides a few different hook locations, meaning, throughout the build and deploy process, there are different steps at which point a Build Plugin can run code.<\/p>\n\n\n\n

One of those steps is called Post Build, where as soon as Netlify finishes building the application, we can determine all of the pages that were built and run a visual test with Applitools Eyes.<\/p>\n\n\n

\n
\"Netlify
Running applitools on Netlify Post Build<\/figcaption><\/figure><\/div>\n\n\n

This provides instant, broad coverage for web apps, making sure that each time we deploy the site, we’re not creating any new regressions or visual bugs.<\/p>\n\n\n\n

How to get started with the Applitools Build Plugin?<\/h2>\n\n\n\n

If you’re already up and running with Netlify, the only thing you need to get started is a free Applitools account<\/a>. Otherwise, this plugin only works for Netlify-deployed applications.<\/p>\n\n\n\n

With your account, you’ll want to be able to locate your Applitools API key. You can find your API key<\/a> inside of your Applitools dashboard under the account dropdown and by selecting My API Key.<\/p>\n\n\n

\n
\"Finding
Finding your Applitools API key<\/figcaption><\/figure><\/div>\n\n\n

Once you’re ready to go, there are two ways to install the Visual Diff plugin: using the Netlify dashboard or using the Netlify configuration file in your project.<\/p>\n\n\n\n

\n

Note: to use advanced settings such as custom browser configurations and ignore regions, you’ll need to use Option 2, using the Netlify configuration file in your project.<\/p>\n<\/blockquote>\n\n\n\n

Option 1: Adding the Applitools Visual Diff Plugin with the Netlify UI<\/h2>\n\n\n\n

Setting up your API key<\/h3>\n\n\n\n

To start, locate to your site inside of Netlify and navigate to the Site Settings section.<\/p>\n\n\n\n

Once inside, select Build & deploy in the sidebar and scroll down to Environment.<\/p>\n\n\n\n

Here, we want to click Edit variables, where we’re going to add a new variable.<\/p>\n\n\n\n

For the name, add APPLITOOLS_API_KEY<\/code>.<\/p>\n\n\n\n

For the value, add your unique Applitools API key.<\/p>\n\n\n

\n
\"Environment
APPLITOOLS_API_KEY environment variable in Netlify<\/figcaption><\/figure><\/div>\n\n\n

Adding the Applitools Visual Diff Build Plugin<\/h3>\n\n\n\n

Next, navigate to the Plugins section of the Netlify dashboard, where it will then give you an option to go to the Netlify plugins directory.<\/p>\n\n\n\n

Here, you can either search for “Applitools” or scroll down to the bottom where the name of the plugin will be “Visual diff (Applitools)”.<\/p>\n\n\n

\n
\"Netlify
Installing Visual diff (Applitools) plugin on Netlify<\/figcaption><\/figure><\/div>\n\n\n

Click the Install button, where it will then ask you to select which site you want to add it to. Find and select your site then confirm installation.<\/p>\n\n\n\n

Running a visual test through Netlify<\/h3>\n\n\n\n

Applitools has the ability to run visual tests by hooking into the Netlify build and deploy process, which means, we need to trigger a new deploy.<\/p>\n\n\n\n

Inside of the Netlify dashboard and navigate to the Deploys section.<\/p>\n\n\n\n

On the right, above the list of recent deployments, where you’ll see a button that says Trigger deploy. Click Trigger deploy, then select Deploy site from the dropdown.<\/p>\n\n\n

\n
\"Deploy
Triggering a new Netlify deployment<\/figcaption><\/figure><\/div>\n\n\n

This will now kick off a new deployment with Netlify. You can even view the logs if you select the new deployment.<\/p>\n\n\n\n

Viewing Applitools Visual Testing results<\/h3>\n\n\n\n

Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page.<\/p>\n\n\n\n

You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name!<\/p>\n\n\n

\n
\"Applitools
New test in Applitools<\/figcaption><\/figure><\/div>\n\n\n

Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected!<\/p>\n\n\n\n

Option 2: Using a netlify.toml to add the Applitools Visual Diff Plugin to a project<\/h2>\n\n\n\n

Setting up your API key<\/h3>\n\n\n\n

Even though we’re going to be setting up the plugin with our Netlify configuration file, we’ll still need to add our API key via the UI.<\/p>\n\n\n\n

To start, locate to your site inside of Netlify and navigate to the Site Settings section.<\/p>\n\n\n\n

Once inside, select Build & deploy in the sidebar and scroll down to Environment.<\/p>\n\n\n\n

Here, we want to click Edit variables, where we’re going to add a new variable.<\/p>\n\n\n\n

For the name, add APPLITOOLS_API_KEY<\/code>.<\/p>\n\n\n\n

For the value, add your unique Applitools API key.<\/p>\n\n\n

\n
\"Environment
APPLITOOLS_API_KEY environment variable in Netlify<\/figcaption><\/figure><\/div>\n\n\n

Adding the Applitools Visual Diff Build Plugin<\/h3>\n\n\n\n

If you don’t already have one, create a netlify.toml<\/code> file inside of the root of your Netlify project.<\/p>\n\n\n\n

Next, add the following:<\/p>\n\n\n\n

[[plugins]]\n  package = \"netlify-plugin-visual-diff\"<\/code><\/pre>\n\n\n\n
This will tell Netlify that you want to use the Visual Diff plugin when deploying your site.<\/p>\n\n\n\n
Running a visual test through Netlify<\/h3>\n\n\n\n
With your new configuration, commit the new file changes and push them out to your Git repository that’s connected to Netlify.<\/p>\n\n\n\n
Unless disabled, this will automatically kick off a new Netlify deploy for your site which will run the visual tests during the build process!<\/p>\n\n\n\n
\n
Note: if you have automatic deployments disabled, try going to the Deploys section and triggering a new build.<\/p>\n<\/blockquote>\n\n\n\n
Viewing Applitools Visual Testing results<\/h3>\n\n\n\n
Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page.<\/p>\n\n\n\n
You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name!<\/p>\n\n\n
\n
\"Applitools
New test in Applitools<\/figcaption><\/figure><\/div>\n\n\n
Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected!<\/p>\n\n\n\n
Optional: Advanced Configuration<\/h3>\n\n\n\n
If using the netlify.toml<\/code> to manage the plugin, you additionally have the option of passing in configurations via Netlify build plugin inputs.<\/p>\n\n\n\n
Head over to the [Applitools Visual Diff plugin GitHub](Viewing Applitools Visual Testing results<\/strong> Once the Netlify deployment as finished, Applitools will have run through your site visually testing each page. You can now head over to the Applitools dashboard, where you’ll now see a new test with your project’s name! Every time you run your test after, Applitools will compare the active state of your project to this baseline and make sure everything is working as expected! ) to learn more!<\/p>\n\n\n\n
Learn more about Applitools<\/h2>\n\n\n\n
Getting started with Netlify and the Applitools Build Plugin is just one of the many ways you can provide broad visual testing coverage on your project.<\/p>\n\n\n\n
Check out the Applitools tutorials<\/a> to find your favorite framework or get in touch to schedule a demo<\/a> with one of our engineers!<\/p>\n","protected":false},"excerpt":{"rendered":"
Running tests shouldn’t be an afterthought, but it can seem challenging to dive in with the huge variety of frameworks and simply not knowing what to test. Instead, we can…<\/p>\n","protected":false},"author":65,"featured_media":30402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[10027,16681],"acf":[],"yoast_head":"\nAutomatically Run Visual Tests on Every Netlify Deploy<\/title>\n<meta name=\"description\" content=\"Learn how to use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with Applitools.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Automatically Run Visual Tests on Every Netlify Deploy\" \/>\n<meta property=\"og:description\" content=\"Running tests shouldn't be an afterthought, but it can seem challenging to dive in with the huge variety of frameworks and simply not knowing what to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-25T17:32:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-10T01:46:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Colby Fayock\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Colby Fayock\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\"},\"author\":{\"name\":\"Colby Fayock\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8\"},\"headline\":\"Automatically Run Visual Tests on Every Netlify Deploy\",\"datePublished\":\"2021-08-25T17:32:25+00:00\",\"dateModified\":\"2023-01-10T01:46:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\"},\"wordCount\":1255,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg\",\"keywords\":[\"Automated Visual Testing\",\"netlify\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\",\"name\":\"Automatically Run Visual Tests on Every Netlify Deploy\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg\",\"datePublished\":\"2021-08-25T17:32:25+00:00\",\"dateModified\":\"2023-01-10T01:46:07+00:00\",\"description\":\"Learn how to use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with Applitools.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg\",\"width\":831,\"height\":542,\"caption\":\"Applitools + Netlify\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Topics\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Automatically Run Visual Tests on Every Netlify Deploy\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8\",\"name\":\"Colby Fayock\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c37c3688dcc3eedacf6d1351f1700ec4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c37c3688dcc3eedacf6d1351f1700ec4?s=96&d=mm&r=g\",\"caption\":\"Colby Fayock\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/cfayock\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Automatically Run Visual Tests on Every Netlify Deploy","description":"Learn how to use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with Applitools.","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:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/","og_locale":"en_US","og_type":"article","og_title":"Automatically Run Visual Tests on Every Netlify Deploy","og_description":"Running tests shouldn't be an afterthought, but it can seem challenging to dive in with the huge variety of frameworks and simply not knowing what to","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2021-08-25T17:32:25+00:00","article_modified_time":"2023-01-10T01:46:07+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg","type":"image\/jpeg"}],"author":"Colby Fayock","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Colby Fayock","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/"},"author":{"name":"Colby Fayock","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8"},"headline":"Automatically Run Visual Tests on Every Netlify Deploy","datePublished":"2021-08-25T17:32:25+00:00","dateModified":"2023-01-10T01:46:07+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/"},"wordCount":1255,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg","keywords":["Automated Visual Testing","netlify"],"articleSection":["Advanced Topics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/","name":"Automatically Run Visual Tests on Every Netlify Deploy","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg","datePublished":"2021-08-25T17:32:25+00:00","dateModified":"2023-01-10T01:46:07+00:00","description":"Learn how to use Netlify Build Plugins to instantly add automated visual testing to every deployment in just a few clicks with Applitools.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/08\/831x542.jpg","width":831,"height":542,"caption":"Applitools + Netlify"},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/instant-visual-testing-coverage-with-the-applitools-visual-diff-plugin-for-netlify\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Advanced Topics","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/"},{"@type":"ListItem","position":3,"name":"Automatically Run Visual Tests on Every Netlify Deploy"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8","name":"Colby Fayock","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c37c3688dcc3eedacf6d1351f1700ec4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c37c3688dcc3eedacf6d1351f1700ec4?s=96&d=mm&r=g","caption":"Colby Fayock"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/cfayock\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/30390"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=30390"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/30390\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/30402"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=30390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=30390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=30390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}