{"id":46837,"date":"2023-02-07T08:43:16","date_gmt":"2023-02-07T16:43:16","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=46837"},"modified":"2023-12-01T11:38:48","modified_gmt":"2023-12-01T19:38:48","slug":"cross-browser-testing-at-applitools-using-ultrafast-grid","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/","title":{"rendered":"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid"},"content":{"rendered":"\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><em>This is a story about how standard tests were not able to identify a bug, as the CSS and HTML files were valid, but when rendered on Chrome on a Mac images were not displayed correctly. <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/platform\/ultrafast-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Applitools Ultrafast Grid (UFG)<\/a><\/span><\/strong> helped us identify the bug at an early stage in development, before deploying the change. These types of bugs are a regular occurrence in any organization, and without UFG, these bugs can easily make it to production and remain there undetected until a customer complains about the problem. Translation support from Michael Sedley.<\/em><\/p>\n\n\n\n<p>Front end development is complicated, and it involves a wide range of knowledge and tools to develop web applications. Regression testing across different systems, browsers, and devices makes it almost impossible to be sure that an application will display correctly on every system and there are no visual regressions as a result of a minor code change.<\/p>\n\n\n\n<p>A real-life example occurred to me during my first week as an Applitools employee, when I fixed a minor bug using my Linux machine. Inadvertently, in the process, I created a more serious visual bug which was only visible on certain devices.<\/p>\n\n\n\n<p>Had UFG not alerted me to the bug, the code would have gone to production and the result would have affected the usability of our flagship product on a Mac. This would have reflected badly on the professionalism of the company and would have affected the company representation, trust in our product, and sales.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-understanding-the-problem\">Understanding the problem<\/h2>\n\n\n\n<p>In recent months, we improved <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/platform\/eyes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Applitools Eyes<\/a><\/span><\/strong>\u2019 ability to perform visual testing on images which are semi-transparent. In the past, Eyes would test an entire screen or defined region, but now using the <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/quickstart\/storybook\/storybook-angular\" target=\"_blank\" rel=\"noreferrer noopener\">Storybook SDK<\/a><\/span><\/strong>, users can automatically test each component separately, without needing to define a test for each component.<\/p>\n\n\n\n<p>For example, when testing a gallery component, Eyes can identify visual bugs and regressions over all screen elements, including the appearance of buttons, controls, fonts, shadows, images, as well as backgrounds that include a transparency gradient.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"703\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-1-1-1024x703.png\" alt=\"\" class=\"wp-image-53484\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-1-1-1024x703.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-1-1-300x206.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-1-1-768x528.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-1-1.png 1115w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p class=\"has-text-align-center\"><em>Figure 1: Transparent Background<\/em><\/p>\n\n\n\n<p>After implementing the transparency feature, a visual bug was reported.&nbsp; In a screen capture of a semi-transparent screen region, unexpected grid lines appeared on top of the tested image.<\/p>\n\n\n\n<p>The root cause of these lines wasn\u2019t clear, so as a first step, we developed a test plan to reproduce the issue. I created a semi-transparent image, all gray (rgb = 127,127,127), with a constant alpha (transparency) channel (alpha=0.5). Fortunately, the bug was easily reproduced and I managed to create easily identifiable grid lines:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2-1024x518.png\" alt=\"\" class=\"wp-image-53485\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2-1024x518.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2-300x152.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2-768x388.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2-1536x777.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-2.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>As I experimented with different transparency settings, it was clear that the color of the grid lines was the same as the color of the image, and it became stronger as the image transparency was lower.<\/p>\n\n\n\n<p>After further investigation, I discovered that the image viewer component uses tiles to represent large images, and the tiles had one pixel overlap. In the past, when all images were RBG images with no transparency, the overlapping pixel was not visible to the human eye.&nbsp; When I added semi-transparency, as the adjacent tiles were stacked on top of each other, sampling the outcoming color inside the grid line produced a 192 grayscale value, which is the exact outcome of stacking two half transparent gray layers over a white background:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><code>(white \u22c5 0.5 + gray \u22c5 0.5) \u22c5 0.5 + gray \u22c5 0.5<\/code> <br> given<code> (white:=255, gray:=128)<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-solving-the-preliminary-bug\">Solving the preliminary bug<\/h3>\n\n\n\n<p>To resolve this bug, I recalculated the position and scale of each region so that there would not be an overlap and the line between regions would not appear.<br>For example, if the first tile had <code>width: 480px<\/code> and <code>left: 0<\/code>, the next adjacent tile should be positioned using <code>left: 480<\/code>, so that there is a zero pixel overlap between tiles.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3-1024x518.png\" alt=\"\" class=\"wp-image-53486\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3-1024x518.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3-300x152.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3-768x388.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3-1536x777.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-3.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>I tested the results on my local (Linux) machine and assumed that the issue was resolved.<\/p>\n\n\n\n<p>I didn\u2019t realize that when I fixed this bug, I had also created a new issue which would have been almost impossible to anticipate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-ufg-identified-the-bug-i-created-before-deployment\">How UFG identified the bug I created before deployment<\/h3>\n\n\n\n<p>At Applitools, we understand the importance of quality visual testing across browsers, so before deployment, every code change that impacts the Eyes interface must be tested by Applitools Eyes using UFG.<\/p>\n\n\n\n<p>We are proud to \u201ceat our own dogfood.\u201d We rely on our visual testing tools to make sure that our products are visually perfect before release.<\/p>\n\n\n\n<p>Our integration pipeline is configured to use UFG to test the UI change on multiple devices and screen settings so that we can confirm that the interface is consistent on every browser, operating system, and screen size.<\/p>\n\n\n\n<p>We discovered that fixing the bug of a one pixel overlap created a new bug on certain systems where there was a gap visible between tiles.&nbsp; Frustratingly, this bug was not reproducible in any of the devices used in development, and could not have been discovered with conventional manual visual testing.<\/p>\n\n\n\n<p>The bug was only visible on screens with Retina Display which uses HiDPI.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4-1024x518.png\" alt=\"\" class=\"wp-image-53487\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4-1024x518.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4-300x152.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4-768x388.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4-1536x777.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-4.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5-1024x518.png\" alt=\"\" class=\"wp-image-53488\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5-1024x518.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5-300x152.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5-768x388.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5-1536x777.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross-browser-ufg-5.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>What was interesting about this bug, is that it highlighted an inconsistency in the way that the same browser (Chrome) displays the same UI on different screen types.<\/p>\n\n\n\n<p>What happened?<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-the-bug-and-the-solution\">The bug and the solution<\/h2>\n\n\n\n<p>After some research, it turns out that there is (seemingly) a bug in the way Chrome behaves on Mac computers with Retina display (see <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/stackoverflow.com\/questions\/27977269\/how-can-i-remove-the-single-pixel-space-between-these-elements-on-retina-display\" target=\"_blank\" rel=\"noreferrer noopener\">1<\/a><\/span><\/strong>, <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/stackoverflow.com\/questions\/27977269\/how-can-i-remove-the-single-pixel-space-between-these-elements-on-retina-display\" target=\"_blank\" rel=\"noreferrer noopener\">2<\/a><\/span><\/strong>, <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/stackoverflow.com\/questions\/26386621\/1px-gap-between-divs-on-hidpi-display\" target=\"_blank\" rel=\"noreferrer noopener\">3<\/a><\/span><\/strong>). It turns out that using percentages or fractions of pixels for positioning and scaling of elements can lead to unexpected results.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-so-what-is-the-solution\">So, what is the solution?<\/h3>\n\n\n\n<p>The solution itself is very elegant \u2013 all we had to do was to round each canvas scaling so that the canvas size would always be an integer:<\/p>\n\n\n\n<p class=\"has-text-align-center\"><code>scale = Math.round(scale * canvasSize) \/ canvasSize;<\/code><\/p>\n\n\n\n<p>Thus, if the width of the canvas is 480 and our scale factor is 0.17, the width of our scaled canvas would not be 480 * 0.17 = 81.6, but would be 82 &#8211; this way we maintain compatibility with Retina displays and prevent unwanted gaps from being created.<\/p>\n\n\n\n<p>This bug was easy to resolve once we were aware of it, but without UFG we would never have identified it using any of our test computers.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group pt-xs pb-xs\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2>\n\n\n\n<p>Maintaining a quality front end for all configurations is an ongoing challenge in every company and every organization.<\/p>\n\n\n\n<p>Solving a bug for one audience can create a bigger bug for a wider audience. In this article, we saw a <strong>classic example<\/strong> of a malfunction, where the initial solution we implemented only <strong>made things worse<\/strong>.<\/p>\n\n\n\n<p>The number of users who use Applitools Eyes for testing semi-transparent components is significantly lower than the number of eyes users who work with Retina displays (most Apple users) \u2013 so the initial approach we took to solve the problem could have caused significantly more harm than good. Even worse \u2013 we could have caused significant damage to the user experience, and not know about it. No modern organization wants to rely on frustrated customer feedback to discover bugs in their application or websites.<\/p>\n\n\n\n<p>Using UFG reduces the likelihood that errors of this type will pass under the radar and allows developers, product managers, and all stakeholders in the development process to significantly reduce the fear factor in deploying new features. The UFG is insurance against platform-dependent visual bugs and provides the ability to perform true multi-platform coverage.<\/p>\n\n\n\n<p>Don\u2019t wait to discover your visual bugs from user reports. We invite you to try UFG \u2013 our team of experts is here to <a href=\"https:\/\/help.applitools.com\/hc\/requests\/new\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">help with any questions or problems<\/span><\/strong><\/a>, and <a href=\"https:\/\/app14743.cloudwayssites.com\/contact\/sales\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">assist you migrate Applitools Eyes and UFG into your integration pipeline<\/span><\/strong><\/a>. For more information, see <a href=\"https:\/\/app14743.cloudwayssites.com\/docs\/topics\/overview\/using-the-ultrafast-grid.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Introduction to the Ultrafast Grid<\/span><\/strong><\/a> in the <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/docs\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\">Applitools Knowledge Center<\/a><\/span><\/strong>.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>This is a story about how standard tests were not able to identify a bug, as the CSS and HTML files were valid, but when rendered on Chrome on a&#8230;<\/p>\n","protected":false},"author":116,"featured_media":46920,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10558],"tags":[16794,10050,16870,11051],"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>Cross-Browser Testing at Applitools Using Ultrafast Grid<\/title>\n<meta name=\"description\" content=\"Read a case study from our engineering team at Applitools identified a visual bug before deploying to production using Ultrafast Grid.\" \/>\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\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid\" \/>\n<meta property=\"og:description\" content=\"This is a story about how standard tests were not able to identify a bug, as the CSS and HTML files were valid, but when rendered on Chrome on a Mac\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-07T16:43:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T19:38:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png\" \/>\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\/png\" \/>\n<meta name=\"author\" content=\"Noam Gaash\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noam Gaash\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\"},\"author\":{\"name\":\"Noam Gaash\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/508cd6acb1ca2fe38237ee3650175683\"},\"headline\":\"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid\",\"datePublished\":\"2023-02-07T16:43:16+00:00\",\"dateModified\":\"2023-12-01T19:38:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\"},\"wordCount\":1256,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png\",\"keywords\":[\"Applitools\",\"Cross-browser Testing\",\"UFG\",\"Ultrafast Grid\"],\"articleSection\":[\"Product\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\",\"name\":\"Cross-Browser Testing at Applitools Using Ultrafast Grid\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png\",\"datePublished\":\"2023-02-07T16:43:16+00:00\",\"dateModified\":\"2023-12-01T19:38:48+00:00\",\"description\":\"Read a case study from our engineering team at Applitools identified a visual bug before deploying to production using Ultrafast Grid.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png\",\"width\":831,\"height\":542,\"caption\":\"Applitools Ultrafast Grid cross-browser testing\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Product\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid\"}]},{\"@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\/508cd6acb1ca2fe38237ee3650175683\",\"name\":\"Noam Gaash\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a9793f8b4676e5d562dab22711b36795?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a9793f8b4676e5d562dab22711b36795?s=96&d=mm&r=g\",\"caption\":\"Noam Gaash\"},\"description\":\"Noam Gaash is a JavaScript SDK engineer at Applitools, passionate about web technologies, computer vision, and improving development workflows. He\u2019s an active open-source contributor and a strong believer in the power of technology to create positive social impact and bring people together. Outside of work, Noam enjoys dancing salsa with his girlfriend and spending time with his majestic cat, Spoty.\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/noam-gaash\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cross-Browser Testing at Applitools Using Ultrafast Grid","description":"Read a case study from our engineering team at Applitools identified a visual bug before deploying to production using Ultrafast Grid.","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\/cross-browser-testing-at-applitools-using-ultrafast-grid\/","og_locale":"en_US","og_type":"article","og_title":"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid","og_description":"This is a story about how standard tests were not able to identify a bug, as the CSS and HTML files were valid, but when rendered on Chrome on a Mac","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2023-02-07T16:43:16+00:00","article_modified_time":"2023-12-01T19:38:48+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png","type":"image\/png"}],"author":"Noam Gaash","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Noam Gaash","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/"},"author":{"name":"Noam Gaash","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/508cd6acb1ca2fe38237ee3650175683"},"headline":"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid","datePublished":"2023-02-07T16:43:16+00:00","dateModified":"2023-12-01T19:38:48+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/"},"wordCount":1256,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png","keywords":["Applitools","Cross-browser Testing","UFG","Ultrafast Grid"],"articleSection":["Product"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/","name":"Cross-Browser Testing at Applitools Using Ultrafast Grid","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png","datePublished":"2023-02-07T16:43:16+00:00","dateModified":"2023-12-01T19:38:48+00:00","description":"Read a case study from our engineering team at Applitools identified a visual bug before deploying to production using Ultrafast Grid.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/02\/UFG.png","width":831,"height":542,"caption":"Applitools Ultrafast Grid cross-browser testing"},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-testing-at-applitools-using-ultrafast-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Product","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/product\/"},{"@type":"ListItem","position":3,"name":"How We Identified and Resolved a Bug Before Release Using Applitools Ultrafast Grid"}]},{"@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\/508cd6acb1ca2fe38237ee3650175683","name":"Noam Gaash","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a9793f8b4676e5d562dab22711b36795?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a9793f8b4676e5d562dab22711b36795?s=96&d=mm&r=g","caption":"Noam Gaash"},"description":"Noam Gaash is a JavaScript SDK engineer at Applitools, passionate about web technologies, computer vision, and improving development workflows. He\u2019s an active open-source contributor and a strong believer in the power of technology to create positive social impact and bring people together. Outside of work, Noam enjoys dancing salsa with his girlfriend and spending time with his majestic cat, Spoty.","url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/noam-gaash\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/46837"}],"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\/116"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=46837"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/46837\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/46920"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=46837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=46837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=46837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}