{"id":12578,"date":"2018-06-14T04:13:51","date_gmt":"2018-06-14T04:13:51","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/blog\/?p=2578"},"modified":"2022-11-07T08:34:40","modified_gmt":"2022-11-07T16:34:40","slug":"visual-testing-a-guide-for-front-end-developers","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/","title":{"rendered":"Visual Testing: A Guide for Front End Developers"},"content":{"rendered":"

\"\"It is probably safe to assume that any developers reading this article are already testing their applications. At the bare minimum, you\u2019re testing the feature you\u2019re working on as you develop it and checking that it works with any existing code. Many of you are probably using some form of automated functional testing as well. These types of testing are certainly important and they help to ensure that your applications work as expected, but adding visual testing into the mix will improve your testing<\/a> significantly.<\/span><\/p>\n

Today, users access applications in a variety of ways, including wearables, smartphones, tablets, laptops, desktop PCs and an increasing range of smart devices. Now, developers need to account for the ways in which these new and diverse technologies change how their software is presented to and perceived by their users. The typical forms of testing we\u2019ve relied upon for so long simply can\u2019t detect the problems that may exist on every possible device. This is why developers now need to test the visual aspects of their applications. In recent years, developers have started using visual testing methods, tools, and frameworks to meet these new challenges. \u00a0<\/span><\/p>\n

In this post, we make the case that it\u2019s wise to use visual testing<\/a>. Even if you, your team, or your organization are old hands at automated functional testing, we\u2019ll explain why you should add visual testing into your existing infrastructure. We also offer advice about available tools, frameworks and solutions that will help you get started. Whether you\u2019re a novice developer or a seasoned veteran, the information presented in this post will help you deliver the best experience for your users.<\/span><\/p>\n

<\/p>\n

What Is Visual Testing and Why Is it Important?<\/strong><\/h2>\n

We are taught from a very early age that looks shouldn\u2019t matter. Most developers test their code with a similar assumption\u2014that what matters is how the code works, not how it looks. Visual testing verifies that the user interface appears correct to its users. <\/span><\/p>\n

Even though you invested many hours to make your application work and wrote tests to prove that your code functions as expected, and even if everything appears to be working on your end, none of that matters if the application isn\u2019t working properly for your users. Don\u2019t assume that your tests see exactly what your customers do. At best, your tests are a crude approximation of a real human user\u2019s interactions with your software. <\/span><\/p>\n

The developer\u2019s job is to solve real problems for real people with their software. If developers do a good job, users will pay for their product. Problems that appear to be superficial or cosmetic on your end can make it difficult\u2014or even impossible\u2014for users to achieve their desired end results. From their perspective, even if the reason for the problem is out of your control and is really being caused by the way a certain device is rendering your application, it\u2019s still broken.<\/span><\/p>\n

Imagine that you created a new insurance company website. The company wants to improve the user experience by letting them file claims online. They believe that their existing paper-based system is inefficient and costly, and that the new system will both attract new customers and reduce operational expenses. You were responsible for creating the online claims form. Your automated developer tests and internal tests in many designated sites showed that the system works so well that when the site goes live, the old paper-based system will be shut down. <\/span><\/p>\n

When the system went live, the insurance company\u2019s phone lines were immediately overwhelmed by irate customers. They all had the same complaint: they were trying to file a claim, they entered all of the relevant information, but they can\u2019t find a button to submit the form. You investigate the problem and you find that when your form is displayed in a mobile browser, the button that should be visible is being obscured by a large text box because of the device\u2019s space restrictions. This problem did not show itself in your testing, but when the system went live, the users were let down by your software.<\/span><\/p>\n

This example may seem exaggerated, but it\u2019s an entirely plausible situation. It highlights one of the key reasons for visually testing your software: even if your current tests show that the software is functioning as intended on your device\/s, it must also run as expected on the users\u2019 devices. You need to check that the software functions as expected on all possible target devices your users have. This involves testing individual page elements and checking that each one appears in the right shape, position, and size. <\/span><\/p>\n

By using visual testing combined with your existing developer tests, you\u2019ll be able to detect visual issues in the early stages of your development cycle. Visual testing factors in how different environments, operating systems, devices, and sizes will affect your software.<\/span><\/p>\n

How Visual Testing Works<\/strong><\/h2>\n

Today, there are more than 30 open-source tools and commercial visual test automation tools available. Most of these tools work the same way, but they follow a different workflow depending on the target audience. For front end web developers, this will involve using two types of frameworks. First, you need a test runner that enables you to write and run the tests. Second, you need a browser automation framework to simulate user interactions. For the sake of brevity, we\u2019ll treat these two types of frameworks as a single unit and refer to them as (visual) test code.<\/span><\/p>\n

Using the test frameworks, developers write code that simulates real user actions, such as typing text into a field or clicking a button. At relevant points in the test code, they\u2019ll insert commands that capture a screenshot. The first time the test is run, an initial set of screenshots is captured. These screenshots serve as a baseline against which all changes are compared. <\/span><\/p>\n

Once the baseline has been established, the developer runs the test code in the background. When a change is detected, an image of the change is captured. The test runner compares this image to the baseline image for this area of the code. If differences are detected between the images, the test is failed. <\/span><\/p>\n

When all of the test code has been run, a report is automatically generated. A human tester reviews all of the images in the report that are different than the baseline. Many testing tools will generate an image that highlights the differences between the expected baseline and actual image captured in a test run. The image highlights all of the differences in pink. If the difference was caused by a bug, the developer can fix the bug and rerun the test to check that the bug was, indeed, fixed. If the difference was caused by a real change in the UI, the developer can review the screenshot and update the baseline so that future test runs will be passed.<\/span><\/p>\n

Getting Started with Visual Testing<\/strong><\/h2>\n

We can\u2019t cover all of the available tools for visual testing in this short post, but here\u2019s a brief overview of what you need to get started. <\/span><\/p>\n

As we previously mentioned, the first thing you\u2019ll need is a test runner, which will let you write tests to be executed by machines. Test runners, such as <\/span>Jest<\/a> or Mocha<\/a>, let you write Javascript code to describe and organize testing tasks. Each test includes assertions that define a condition that either passes or fails. Tests can be organized into blocks, and these blocks are often put into a single file that is used to test a specific module and\/or application functionality.<\/p>\n

You will recall that once you have a way to write and run tests, you need a tool to interact with the browser. Tools like <\/span>Puppeteer<\/a>, Webdriver.io<\/a>, and Cypress.io<\/a> provide a headless browser that allows your test to perform the same interactions as a human user. They also support visual testing and can generate screenshots and PDFs of web pages.<\/p>\n

You will also need a tool that lets you manage the testing process. Currently, there are a number of companies providing web-based solutions in this space. The best place to start is with Applitools Eyes<\/a><\/span>. To effectively manage visual testing, Applitools manages your baseline images and the potentially large number of images generated during each test run. It generates reports that not only show you what passed and what failed, but that also give you useful insights from current test runs and from all previous test runs.<\/p>\n

Any visual testing solution must also help you effectively maintain your baseline. In addition, it must ensure that any misleading information is removed from specific test runs, but that it isn\u2019t propagated in a way that leads to information overload or hides potentially damaging issues. Applitools checks the boxes for all of these qualities and more.<\/span><\/p>\n

Take Your First Steps Toward Visual Testing<\/strong><\/h2>\n

Visual testing can\u2019t replace your current testing practices, tools, or infrastructure, but it can help you test areas that you\u2019re currently unable to with functional testing alone. In today\u2019s world, where you don\u2019t know where and how your software will run, visual testing will help you discover problems that matter to today\u2019s users. <\/span><\/p>\n

There are many tools that can help you get started with visual testing. Applitools Eyes<\/a> is an excellent option for managing your visual testing process. In addition to the features that were previously mentioned in this post, Applitools<\/a> is designed to handle the many labor-intensive tasks and obstacles that exist with other tools. Considering the many benefits of visual testing, and with the help of accessible, web-based tools like Applitools, your organization should be ready to take its first steps into the world of visual testing. \u00a0<\/span><\/p>\n

— HAPPY TESTING —<\/p>\n

To learn more about Applitools\u2019 visual UI testing and application visual management (AVM) solutions, check out the\u00a0tutorials<\/a>\u00a0on the\u00a0Applitools<\/a>\u00a0website. To get started with Applitools, request a\u00a0demo<\/a>, or\u00a0sign up<\/a>\u00a0for a free Applitools account.<\/p>\n

<\/div>\n","protected":false},"excerpt":{"rendered":"

It is probably safe to assume that any developers reading this article are already testing their applications. At the bare minimum, you\u2019re testing the feature you\u2019re working on as you…<\/p>\n","protected":false},"author":17,"featured_media":10439,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[12691,12690,12802,12686,10262],"acf":[],"yoast_head":"\nVisual Testing: A Guide for Front End Developers - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"It took a while but you finally got on the TDD train. Well, now there are next-generation testing tools that bridge the gap between TTD and traditional software automation testing. These are visual testing tools. This article will show you how you can take your TTD skills to the next level.\" \/>\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\/visual-testing-a-guide-for-front-end-developers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Testing: A Guide for Front End Developers\" \/>\n<meta property=\"og:description\" content=\"It is probably safe to assume that any developers reading this article are already testing their applications. At the bare minimum, you\u2019re testing the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-14T04:13:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-07T16:34:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"401\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gil Tayar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gil Tayar\" \/>\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\/visual-testing-a-guide-for-front-end-developers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\"},\"author\":{\"name\":\"Gil Tayar\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/c9e99fab0bd2081a6a36861d9ca78a12\"},\"headline\":\"Visual Testing: A Guide for Front End Developers\",\"datePublished\":\"2018-06-14T04:13:51+00:00\",\"dateModified\":\"2022-11-07T16:34:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\"},\"wordCount\":1689,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg\",\"keywords\":[\"Developers\",\"Test Engineers\",\"UI Development\",\"Visual Testing Strategies\",\"Visual Testing Tools\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\",\"name\":\"Visual Testing: A Guide for Front End Developers - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg\",\"datePublished\":\"2018-06-14T04:13:51+00:00\",\"dateModified\":\"2022-11-07T16:34:40+00:00\",\"description\":\"It took a while but you finally got on the TDD train. Well, now there are next-generation testing tools that bridge the gap between TTD and traditional software automation testing. These are visual testing tools. This article will show you how you can take your TTD skills to the next level.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg\",\"width\":400,\"height\":401},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#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\":\"Visual Testing: A Guide for Front End Developers\"}]},{\"@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\/c9e99fab0bd2081a6a36861d9ca78a12\",\"name\":\"Gil Tayar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/566240e52d34470d5e766e232d5d59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/566240e52d34470d5e766e232d5d59a9?s=96&d=mm&r=g\",\"caption\":\"Gil Tayar\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/gil_t\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visual Testing: A Guide for Front End Developers - AI-Powered End-to-End Testing | Applitools","description":"It took a while but you finally got on the TDD train. Well, now there are next-generation testing tools that bridge the gap between TTD and traditional software automation testing. These are visual testing tools. This article will show you how you can take your TTD skills to the next level.","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\/visual-testing-a-guide-for-front-end-developers\/","og_locale":"en_US","og_type":"article","og_title":"Visual Testing: A Guide for Front End Developers","og_description":"It is probably safe to assume that any developers reading this article are already testing their applications. At the bare minimum, you\u2019re testing the","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2018-06-14T04:13:51+00:00","article_modified_time":"2022-11-07T16:34:40+00:00","og_image":[{"width":400,"height":401,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg","type":"image\/jpeg"}],"author":"Gil Tayar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gil Tayar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/"},"author":{"name":"Gil Tayar","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/c9e99fab0bd2081a6a36861d9ca78a12"},"headline":"Visual Testing: A Guide for Front End Developers","datePublished":"2018-06-14T04:13:51+00:00","dateModified":"2022-11-07T16:34:40+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/"},"wordCount":1689,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg","keywords":["Developers","Test Engineers","UI Development","Visual Testing Strategies","Visual Testing Tools"],"articleSection":["Advanced Topics"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/","name":"Visual Testing: A Guide for Front End Developers - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg","datePublished":"2018-06-14T04:13:51+00:00","dateModified":"2022-11-07T16:34:40+00:00","description":"It took a while but you finally got on the TDD train. Well, now there are next-generation testing tools that bridge the gap between TTD and traditional software automation testing. These are visual testing tools. This article will show you how you can take your TTD skills to the next level.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2014\/11\/HUGE-EYE-CHART-KEEPCALMANDAUTOMATE-e1528949395725.jpg","width":400,"height":401},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-a-guide-for-front-end-developers\/#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":"Visual Testing: A Guide for Front End Developers"}]},{"@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\/c9e99fab0bd2081a6a36861d9ca78a12","name":"Gil Tayar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/566240e52d34470d5e766e232d5d59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/566240e52d34470d5e766e232d5d59a9?s=96&d=mm&r=g","caption":"Gil Tayar"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/gil_t\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/12578"}],"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\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=12578"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/12578\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/10439"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=12578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=12578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=12578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}