{"id":27786,"date":"2021-03-17T21:42:09","date_gmt":"2021-03-17T21:42:09","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=27786"},"modified":"2021-12-17T14:10:30","modified_gmt":"2021-12-17T22:10:30","slug":"improve-cypress-test-coverage-visual-testing","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/","title":{"rendered":"How to Improve Cypress Test Coverage with Visual Testing"},"content":{"rendered":"\n<p>Cypress is a powerful tool for automating tests inside of a browser, but can be limited by only running code-based tests. How can we take advantage of Cypress and add the power of automated Visual Testing with Applitools Eyes?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>Just looking for an example? Check out the<\/em><a href=\"https:\/\/github.com\/applitools\/tutorial-cypress\"><em> Applitools Cypress Tutorial on GitHub.com<\/em><\/a><em>.<\/em><\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-cypress\"><strong>What is Cypress?<\/strong><\/h2>\n\n\n\n<p>Cypress is an end-to-end testing framework built on JavaScript that allows QA engineers, developers, or really anyone familiar with working in JavaScript, the ability to write tests that interact directly with browsers.<\/p>\n\n\n\n<p>Tools like<a href=\"https:\/\/jestjs.io\/\"> Jest<\/a> might make sense to test the input and output of a function, but you can use Cypress to interact with a button inside of the browser that invokes that function. Taking that a step further, you can automate an entire customer journey using Cypress each step of the way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-does-cypress-work-with-visual-testing-and-applitools\"><strong>How does Cypress work with Visual Testing and Applitools?<\/strong><\/h2>\n\n\n\n<p>Cypress is really good at running tests in the browser, but in order to get effective coverage of that customer journey, you need to write a lot of code with specific selectors that can end up requiring constant maintenance.<\/p>\n\n\n\n<p>That\u2019s where Applitools steps in, adding an additional layer of Visual Testing on top of your tests, combining the interaction automation of Cypress with the AI-powered Applitools Eyes.<\/p>\n\n\n\n<p>When using <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/cypress.html#getting-started-with-applitools\" target=\"_blank\" rel=\"noreferrer noopener\">Applitools Eyes to enable Visual Testing with Cypress<\/a>, Cypress will still be used to open up the browser, interact with the site, and even visit pages. But, instead of writing lots of assertions for each UI component, Applitools will capture a snapshot of that entire page and upload it to the cloud where it performs its change detection algorithms on your app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-we-going-to-build\"><strong>What are we going to build?<\/strong><\/h2>\n\n\n\n<p>We\u2019re going to start off with an existing project that already has Cypress installed.<\/p>\n\n\n\n<p>For more information about installing Cypress, visit the Cypress docs at:<a href=\"https:\/\/docs.cypress.io\/guides\/getting-started\/installing-cypress.html#Installing\"> https:\/\/docs.cypress.io\/guides\/getting-started\/installing-cypress.html#Installing<\/a><\/p>\n\n\n\n<p>With our project ready to go, we\u2019ll first install the Applitools Eyes Cypress SDK using<a href=\"https:\/\/www.npmjs.com\/\"> npm<\/a>.<\/p>\n\n\n\n<p>Once installed, we\u2019ll write a new test that covers a basic example of how you can use Applitools Eyes to add Visual Testing coverage to your app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-installing-the-applitools-eyes-cypress-sdk\"><strong>Step 1: Installing the Applitools Eyes Cypress SDK<\/strong><\/h3>\n\n\n\n<p>To get started with the Applitools Eyes Cypress SDK on a project, first install the SDK from npm:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install @applitools\/eyes-cypress --save-dev<\/code><\/pre>\n\n\n\n<p>This will pull down the SDK from npm and add it as a package to your project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-setting-up-the-applitools-eyes-cypress-sdk-with-cypress\"><strong>Step 2: Setting up the Applitools Eyes Cypress SDK with Cypress<\/strong><\/h3>\n\n\n\n<p>Once installed, the Applitools Eyes Cypress SDK makes configuration easy by making a setup command available.<\/p>\n\n\n\n<p>To configure Applitools Eyes for Cypress, run:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx eyes-setup<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Running-Applitools-Eyes-setup-for-Cypress-1-1024x157.jpg\" alt=\"An image of the CLI successfully running npx eyes-setup\" class=\"wp-image-27792\" width=\"1024\" height=\"157\" title=\"Running Applitools Eyes setup for Cypress\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Running-Applitools-Eyes-setup-for-Cypress-1-1024x157.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Running-Applitools-Eyes-setup-for-Cypress-1-300x46.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Running-Applitools-Eyes-setup-for-Cypress-1-768x118.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Running-Applitools-Eyes-setup-for-Cypress-1.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Running the Eyes setup command<\/figcaption><\/figure>\n\n\n\n<p><em>This will do a few things:<\/em><\/p>\n\n\n\n<ul><li>Configure the Applitools Eyes Cypress SDK as a plugin<\/li><li>Add new Cypress commands to help interact with Applitools Eyes<\/li><li>Import Typescript definitions to optionally use in the project<\/li><\/ul>\n\n\n\n<p>But once finished, we\u2019re all set up and ready to write our first Applitools Eyes test! Let&#8217;s go ahead and start doing Visual Testing with Cypress and Applitools!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-writing-a-new-test-with-cypress\"><strong>Step 3: Writing a new test with Cypress<\/strong><\/h3>\n\n\n\n<p>To get a good sense of how Applitools works, we\u2019re going to use<a href=\"https:\/\/demo.applitools.com\/\"> a demo app<\/a> with<a href=\"https:\/\/demo.applitools.com\/index_v2.html\"> an alternate version<\/a> that includes a breaking change.<\/p>\n\n\n\n<p>We can create a new Cypress test by adding the following code:<\/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\/dannyshain\/c05e652a423597b4e533f00a0beb4e36.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/dannyshain\/c05e652a423597b4e533f00a0beb4e36\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Here\u2019s a breakdown of what\u2019s happening:<\/p>\n\n\n\n<ul><li>We&#8217;re defining a new Cypress test<\/li><li>Before each test, we\u2019re going to visit our demo app<\/li><li>In our test, we click the login button to log into the app<\/li><li>We check that 2 of the on-page headers exist to confirm what page we\u2019re on<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"473\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-1024x473.png\" alt=\"This shows a successfully run Cypress test\" class=\"wp-image-27826\" title=\"Successful Cypress Test\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-1024x473.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-300x139.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-768x355.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-1536x710.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Successful-Cypress-Test-2048x947.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Successfully running a Cypress test<\/em><\/figcaption><\/figure>\n\n\n\n<p>And this works great! We\u2019re confident that the process of logging in is working well.<\/p>\n\n\n\n<p>There are two potential problems with this though.<\/p>\n\n\n\n<p>First, we don\u2019t have any existing IDs on the page that allow us to select the specific headers on the page. If that changes the order, it breaks. To alleviate that, we could apply IDs in the code, but even in that case, if someone makes a small change to the text, it breaks.<\/p>\n\n\n\n<p>Additionally, we\u2019re testing specific text nodes on the page that we have access to with code, what happens if an image breaks or if a color changes that makes the app unusable accidentally?<\/p>\n\n\n\n<p>We can test this out by switching the URL we\u2019re visiting in our Cypress test to:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>beforeEach(() =&gt; cy.visit('https:\/\/demo.applitools.com\/index_v2.html'));<\/code><\/pre>\n\n\n\n<p>After the test runs, we can see that it was successful, but if we notice on the login page, we have a broken image!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress-1024x513.jpg\" alt=\"A test result showing a successful test using Cypress, even when the page has a broken image.\" class=\"wp-image-27827\" title=\"A False Positive with Cypress\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress-1024x513.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress-300x150.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress-768x384.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress-1536x769.jpg 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/False-Positive-with-Cypress.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>False positive testing with Cypress<\/figcaption><\/figure>\n\n\n\n<p>This is where Applitools shines, where we would still be able to detect this issue with Visual Testing.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-adding-visual-testing-to-cypress-with-applitools-eyes\"><strong>Step 4: Adding Visual Testing to Cypress with Applitools Eyes<\/strong><\/h3>\n\n\n\n<p>Because we have Applitools Eyes already installed, setting up our test is straightforward.<\/p>\n\n\n\n<p>Let\u2019s update our test to use Applitools Eyes instead of checking specific selectors on the page:<\/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\/dannyshain\/fb4056c5974d58d03e8c69ce5e92dc6c.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/dannyshain\/fb4056c5974d58d03e8c69ce5e92dc6c\">Gist<\/a>.<\/noscript><\/div>\n<\/div><\/figure>\n\n\n\n<p>Note: remember to switch back to the original demo for the first run!<\/p>\n\n\n\n<p>In our test, we\u2019re now:<\/p>\n\n\n\n<ul><li>Opening Applitools Eyes at the start of the test<\/li><li>Using Check Window to take a snapshot of our Login page<\/li><li>Logging into our application<\/li><li>Taking another snapshot with Check Window of our dashboard<\/li><li>And closing Eyes<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"511\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes-1024x511.jpg\" alt=\"An image showing the first check with Applitools Eyes, which sets the baseline images for our test.\" class=\"wp-image-27828\" title=\"The First Check with Applitools Eyes\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes-1024x511.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes-300x150.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes-768x384.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes-1536x767.jpg 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/First-Check-with-Applitools-Eyes.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Running the first check with Applitools Eyes<\/em><\/figcaption><\/figure>\n\n\n\n<p>Like our first Cypress test, everything looks successful. We were able to log into the app and take a snapshot of both pages.<\/p>\n\n\n\n<p>We can even see these snapshots by logging into our Applitools account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools-1024x436.jpg\" alt=\"The baseline images for the Login Window and App Window in Applitools\" class=\"wp-image-27829\" title=\"Our Baseline Tests in Applitools\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools-1024x436.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools-300x128.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools-768x327.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools-1536x654.jpg 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Baseline-Tests-in-Applitools.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Baseline tests in Applitools<\/em><\/figcaption><\/figure>\n\n\n\n<p>Now, let\u2019s try changing our demo URL again:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>beforeEach(() =&gt; cy.visit('https:\/\/demo.applitools.com\/index_v2.html'));<\/code><\/pre>\n\n\n\n<p>This time, we can see that Cypress actually fails.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"525\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs-1024x525.jpg\" alt=\"The Cypress test now fails due to the detection of visual diffs\" class=\"wp-image-27830\" title=\"Failing Cypress Test Due to Visual Diffs\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs-1024x525.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs-300x154.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs-768x394.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs-1536x787.jpg 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Failing-Cypress-Test-Due-to-Visual-Diffs.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Failing Cypress test due to visual diffs detected<\/em><\/figcaption><\/figure>\n\n\n\n<p>Cypress lets us know that it&#8217;s because diffs were detected on the Login screen, so let\u2019s take a look in Applitools.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes-1024x529.jpg\" alt=\"Applitools Eyes is displaying the differences between the baseline and checkpoint image, highlighting the differences\" class=\"wp-image-27831\" title=\"Changes Detected with Applitools Eyes\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes-1024x529.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes-300x155.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes-768x397.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes-1536x794.jpg 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Changes-Detected-with-Applitools-Eyes.jpg 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Changes detected with Applitools Eyes<\/em><\/figcaption><\/figure>\n\n\n\n<p>We can see that Applitools found that we have a broken image on our page, so it flagged it as an issue, something our previous Cypress-only test wouldn\u2019t have caught!<\/p>\n\n\n\n<p>While we were able to take advantage of Cypress to run our tests inside of a browser, we were able to effectively use Applitools Eyes to provide automated Visual Testing for our app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-get-started-today\">Get Started Today<\/h2>\n\n\n\n<p>Want to try out Applitools Eyes for yourself? You can get started today with a free-forever account at the link below.<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/auth.applitools.com\/users\/register\" target=\"_blank\" rel=\"noreferrer noopener\">Start My free Trial<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated Visual Testing.<\/p>\n","protected":false},"author":65,"featured_media":27837,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[10023,10357,10821],"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>How to Improve Cypress Test Coverage with Visual Testing | Cypress Visual Testing - Applitools<\/title>\n<meta name=\"description\" content=\"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated 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\/improve-cypress-test-coverage-visual-testing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Improve Cypress Test Coverage with Visual Testing\" \/>\n<meta property=\"og:description\" content=\"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated Visual Testing.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-17T21:42:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-17T22:10:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.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=\"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\/improve-cypress-test-coverage-visual-testing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\"},\"author\":{\"name\":\"Colby Fayock\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8\"},\"headline\":\"How to Improve Cypress Test Coverage with Visual Testing\",\"datePublished\":\"2021-03-17T21:42:09+00:00\",\"dateModified\":\"2021-12-17T22:10:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\"},\"wordCount\":1116,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg\",\"keywords\":[\"Applitools Eyes\",\"Cypress\",\"Tutorial\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\",\"name\":\"How to Improve Cypress Test Coverage with Visual Testing | Cypress Visual Testing - Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg\",\"datePublished\":\"2021-03-17T21:42:09+00:00\",\"dateModified\":\"2021-12-17T22:10:30+00:00\",\"description\":\"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated Visual Testing.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#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\":\"How to Improve Cypress Test Coverage with Visual Testing\"}]},{\"@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":"How to Improve Cypress Test Coverage with Visual Testing | Cypress Visual Testing - Applitools","description":"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated 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\/improve-cypress-test-coverage-visual-testing\/","og_locale":"en_US","og_type":"article","og_title":"How to Improve Cypress Test Coverage with Visual Testing","og_description":"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated Visual Testing.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2021-03-17T21:42:09+00:00","article_modified_time":"2021-12-17T22:10:30+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg","type":"image\/jpeg"}],"author":"Colby Fayock","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Colby Fayock","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/"},"author":{"name":"Colby Fayock","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/9e804c33885876e31fe8a1cd871c31c8"},"headline":"How to Improve Cypress Test Coverage with Visual Testing","datePublished":"2021-03-17T21:42:09+00:00","dateModified":"2021-12-17T22:10:30+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/"},"wordCount":1116,"commentCount":0,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg","keywords":["Applitools Eyes","Cypress","Tutorial"],"articleSection":["Getting Started"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/","name":"How to Improve Cypress Test Coverage with Visual Testing | Cypress Visual Testing - Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg","datePublished":"2021-03-17T21:42:09+00:00","dateModified":"2021-12-17T22:10:30+00:00","description":"Cypress is a powerful tool for automating tests inside of a browser. Learn how to take advantage of Cypress and add the power of automated Visual Testing.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2021\/03\/Cypress-with-Eyes_mobile.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/improve-cypress-test-coverage-visual-testing\/#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":"How to Improve Cypress Test Coverage with Visual Testing"}]},{"@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\/27786"}],"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=27786"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/27786\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/27837"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=27786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=27786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=27786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}