{"id":26963,"date":"2021-02-22T15:34:00","date_gmt":"2021-02-22T15:34:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=26963"},"modified":"2023-01-09T17:59:58","modified_gmt":"2023-01-10T01:59:58","slug":"visual-testing-for-mobile-apps","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/","title":{"rendered":"Visual Testing for Mobile Apps"},"content":{"rendered":"\n<p>A common question is &#8220;does Applitools visual testing work on mobile apps?&#8221;. The answer is a resounding <a href=\"https:\/\/info.applitools.com\/uc7W3\" target=\"_blank\" rel=\"noreferrer noopener\">YES<\/a>! In this post, I&#8217;ll automate a couple of scenarios and show you the power of visual testing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-the-app\">The App<\/h2>\n\n\n\n<p>We&#8217;re going to work with a Todo App which will allow us to add tasks. A cool feature of this app is the ability to add colors to tasks, which is a great way to designate categories for our various types of tasks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"506\" height=\"1024\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-2-506x1024.png\" alt=\"\" class=\"wp-image-26971\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-2-506x1024.png 506w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-2-148x300.png 148w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-2-759x1536.png 759w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-2.png 764w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"1024\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-3-512x1024.png\" alt=\"\" class=\"wp-image-26972\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-3-512x1024.png 512w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-3-150x300.png 150w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-3-768x1536.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-3.png 778w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scenario-1-add-multiple-tasks-of-different-categories\">Scenario #1: Add multiple tasks of different categories<\/h2>\n\n\n\n<p>Our first scenario is to add four tasks, one for each of the different colors\/categories. So here, we declare the 4 tasks and add them to the app: one for purple, blue, yellow, and pink. Next, we verify that the tasks were indeed added.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/84e119e76d2656ec8f9458e8db5e36bd.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/84e119e76d2656ec8f9458e8db5e36bd\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"502\" height=\"1024\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/image-502x1024.png\" alt=\"\" class=\"wp-image-27337\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/image-502x1024.png 502w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/image-147x300.png 147w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/image.png 682w\" sizes=\"(max-width: 502px) 100vw, 502px\" \/><\/figure>\n\n\n\n<p>However, a key aspect of this scenario is to verify that the tasks were added as the right color. This is a native app, so we can&#8217;t make a call to get the CSS value as that is unsupported. And when looking in the Inspector, there was nothing there that identified these tasks by color. Fortunately, visual testing can help us with this!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-visual-testing\">What is Visual Testing?<\/h3>\n\n\n\n<p>Visual testing is an automated technique for verifying the state of your application by using snapshots. This means your tests are not limited to interrogating the DOM to determine status, like what is done with most other automation tools. Instead, with visual testing, a screenshot of your application is taken on every regression run and compared against a baseline image. Therefore, viewing and verifying your application as your users would! <\/p>\n\n\n\n<p>Applitools&#8217; visual testing API is called <em>Eyes<\/em>. The <em>Eyes<\/em> API uses AI to compare the images and is much more reliable than all other forms of visual testing, namely the notoriously flaky pixel-to-pixel and DOM-based approaches offered by other vendors.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-visual-testing\">Adding Visual Testing<\/h3>\n\n\n\n<p>The <em>Eyes<\/em> API can be added to your existing tests so there&#8217;s no need to throwout your test suite and start over! Let&#8217;s add visual testing to Scenario #1 so that we can make sure the tasks were added with the right colors.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/67ab84d225ecaa6de84c4c4f36546905.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/67ab84d225ecaa6de84c4c4f36546905\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Here we&#8217;ve added visual testing with 4 lines of code! ?<\/p>\n\n\n\n<p>On line 21, we&#8217;re simply initializing the <em>Eyes<\/em> API. On line 22 is where we tell <em>Eyes<\/em> that we would like to begin visually testing. <\/p>\n\n\n\n<p>On line 23 is where the magic happens &#8211; we take a screenshot of our app. If this is the first time the test is run, this will become the baseline image. If there is already a baseline image, a new image will be taken and compared to the baseline image to determine if there are any differences. Notice the arguments sent into this call. This is telling Eyes to ignore the status bar region of our app because it is dynamic and will contain a timestamp and notifications. So this part of the app will be ignored every time the test runs!<\/p>\n\n\n\n<p>Finally, on line 24, we&#8217;re done so we can close our <em>Eyes.<\/em> At this point, the screenshots are sent to the Applitools cloud, analyzed, and stored in a nice dashboard. In the event of a failure, your team can easily review the images to determine where the application has changed, and annotate the image with bugs and remarks.<\/p>\n\n\n\n<p>But wait&#8230;<\/p>\n\n\n\n<p>We added visual testing to verify the colors of the tasks. But it&#8217;s doing so much more. It&#8217;s verifying the entire screen (sans the status bar which we explicitly said to ignore). So that means all of our assertions above are already covered by <em>Eyes<\/em> and we can actually DELETE CODE!!! ? In fact, we&#8217;ve deleted almost HALF of the code from this one test alone &#8211; with MORE coverage!!! Woohooo ?<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/9087409345f1a2ca4c76cb2a51a288ee.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/9087409345f1a2ca4c76cb2a51a288ee\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Let&#8217;s try another more scenario.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scenario-2-complete-a-task-from-the-list\">Scenario #2: Complete a task from the list<\/h2>\n\n\n\n<p>In our next scenario, we need to complete one of the tasks by clicking on it, and then verify that it is crossed off.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/8ed376ffa81144f76907ba605a6fbd14.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/8ed376ffa81144f76907ba605a6fbd14\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"1024\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-4-512x1024.png\" alt=\"\" class=\"wp-image-27026\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-4-512x1024.png 512w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-4-150x300.png 150w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-4-768x1536.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-4.png 782w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>Now when it&#8217;s time to verify, we run into the same issue we did in Scenario #1. The strikethrough on the completed task is a CSS effect, and cannot be verified using the Inspector. So, let&#8217;s use visual testing.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/af9ad0771b31e3594f3e482c6f983679.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/af9ad0771b31e3594f3e482c6f983679\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Now we&#8217;re covered! Ok, one more scenario&#8230;<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-scenario-3-add-long-tasks\">Scenario #3: Add long tasks<\/h2>\n\n\n\n<p>For the last scenario, we want to add long tasks. What is the purpose of this test? It&#8217;s to ensure that on this mobile view, the text is displayed properly and doesn&#8217;t get cut off or bleed off the edge of the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"1024\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-5-504x1024.png\" alt=\"\" class=\"wp-image-27027\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-5-504x1024.png 504w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-5-148x300.png 148w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-5-756x1536.png 756w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/image-5.png 768w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/figure>\n\n\n\n<p>But how can we make sure the text is displayed correctly without using visual testing? We can&#8217;t! We can make sure it exists. We can make sure it&#8217;s visible. But only visual testing will make sure that it&#8217;s showing up just as we intend it to.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/angiejones\/791b02cbf39d6d042722c4b6ac4a8ffa.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/angiejones\/791b02cbf39d6d042722c4b6ac4a8ffa\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-visual-bugs-love-mobile-viewports\">Visual Bugs Love Mobile Viewports<\/h2>\n\n\n\n<p>Mobile testing is such a challenge. In addition to not being able to access style attributes from the Inspector, the presentation of your apps can vary based on the various viewport sizes. This makes mobile apps ripe for visual bugs! To make matters worse, traditional mobile automation tools only offer so much and are incapable of catching these visual bugs, and heck, even some of the functional ones as we&#8217;ve seen in Scenarios 1 and 2. If you&#8217;re doing mobile app test automation, you <em>need<\/em> visual testing! Wait no more; create your <a href=\"https:\/\/info.applitools.com\/uc8k5\" target=\"_blank\" rel=\"noreferrer noopener\">forever-free Applitools account<\/a> and improve your testing today!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mobile testing is hard, and unfortunately mobile viewports are ripe for visual bugs. Learn how to catch these expensive bugs using visual testing.<\/p>\n","protected":false},"author":31,"featured_media":27031,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[10021,12783,10103,16642],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.5 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Visual Testing for Mobile Apps with Applitools<\/title>\n<meta name=\"description\" content=\"Mobile apps are ripe with visual bugs, making them a challenge. If you&#039;re doing mobile app test automation, you need visual testing!\" \/>\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-for-mobile-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Testing for Mobile Apps\" \/>\n<meta property=\"og:description\" content=\"Mobile testing is hard, and unfortunately mobile viewports are ripe for visual bugs. Learn how to catch these expensive bugs using visual testing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-22T15:34:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-10T01:59:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"829\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Angie Jones\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angie Jones\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 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-for-mobile-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\"},\"author\":{\"name\":\"Angie Jones\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba\"},\"headline\":\"Visual Testing for Mobile Apps\",\"datePublished\":\"2021-02-22T15:34:00+00:00\",\"dateModified\":\"2023-01-10T01:59:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\"},\"wordCount\":997,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg\",\"keywords\":[\"Appium\",\"Mobile\",\"Mobile App Testing\",\"visual testing\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\",\"name\":\"Visual Testing for Mobile Apps with Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg\",\"datePublished\":\"2021-02-22T15:34:00+00:00\",\"dateModified\":\"2023-01-10T01:59:58+00:00\",\"description\":\"Mobile apps are ripe with visual bugs, making them a challenge. If you're doing mobile app test automation, you need visual testing!\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg\",\"width\":829,\"height\":542,\"caption\":\"Woman shopping online and paying for purchases with banking application on smartphone\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Getting Started\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Visual Testing for Mobile Apps\"}]},{\"@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\/bef60d60f816d3253a3e37120c0b9bba\",\"name\":\"Angie Jones\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g\",\"caption\":\"Angie Jones\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/angiejones\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Visual Testing for Mobile Apps with Applitools","description":"Mobile apps are ripe with visual bugs, making them a challenge. If you're doing mobile app test automation, you need visual testing!","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-for-mobile-apps\/","og_locale":"en_US","og_type":"article","og_title":"Visual Testing for Mobile Apps","og_description":"Mobile testing is hard, and unfortunately mobile viewports are ripe for visual bugs. Learn how to catch these expensive bugs using visual testing.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2021-02-22T15:34:00+00:00","article_modified_time":"2023-01-10T01:59:58+00:00","og_image":[{"width":829,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg","type":"image\/jpeg"}],"author":"Angie Jones","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Angie Jones","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/"},"author":{"name":"Angie Jones","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/bef60d60f816d3253a3e37120c0b9bba"},"headline":"Visual Testing for Mobile Apps","datePublished":"2021-02-22T15:34:00+00:00","dateModified":"2023-01-10T01:59:58+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/"},"wordCount":997,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg","keywords":["Appium","Mobile","Mobile App Testing","visual testing"],"articleSection":["Getting Started"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/","name":"Visual Testing for Mobile Apps with Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg","datePublished":"2021-02-22T15:34:00+00:00","dateModified":"2023-01-10T01:59:58+00:00","description":"Mobile apps are ripe with visual bugs, making them a challenge. If you're doing mobile app test automation, you need visual testing!","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/02\/mobile-visual-testing.jpg","width":829,"height":542,"caption":"Woman shopping online and paying for purchases with banking application on smartphone"},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing-for-mobile-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Getting Started","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/getting-started\/"},{"@type":"ListItem","position":3,"name":"Visual Testing for Mobile Apps"}]},{"@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\/bef60d60f816d3253a3e37120c0b9bba","name":"Angie Jones","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60864923503620d0b54e2493ef75b9d8?s=96&d=mm&r=g","caption":"Angie Jones"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/angiejones\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/26963"}],"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\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=26963"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/26963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/27031"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=26963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=26963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=26963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}