{"id":46171,"date":"2023-01-27T12:02:48","date_gmt":"2023-01-27T20:02:48","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=46171"},"modified":"2023-12-01T11:30:36","modified_gmt":"2023-12-01T19:30:36","slug":"future-proofing-your-test-automation-pipeline","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/","title":{"rendered":"Future-Proofing Your Test Automation Pipeline"},"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>Learn how to future-proof your test automation pipeline with Cypress and Applitools by adding tests that run from GitHub Actions.<\/em> <em>In this article, we&#8217;ll share how to ensure your test automation pipeline can scale while staying reliable and easy to maintain.<\/em><\/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-automating-different-types-of-tests\">Automating different types of tests<\/h2>\n\n\n\n<p>To illustrate our different types of test automation, we\u2019ll be using the example project <a href=\"https:\/\/github.com\/cypress-io\/cypress-heroes\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Cypress Heroes<\/span><\/strong><\/a>. In this full-stack TypeScript app, users can take the following actions:<\/p>\n\n\n\n<ul>\n<li>Log in with an email and password<\/li>\n\n\n\n<li>Like heroes, which increments the hero\u2019s number of fans<\/li>\n\n\n\n<li>Hire heroes, which increments the hero\u2019s number of saves<\/li>\n\n\n\n<li>Manage hero profile information like name, superpowers, and price<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"643\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-1.png\" alt=\"\" class=\"wp-image-53433\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-1.png 846w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-1-300x228.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-1-768x584.png 768w\" sizes=\"(max-width: 846px) 100vw, 846px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>ICYMI<\/strong>: Watch the on-demand recording of <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/event\/future-proofing-automation-pipeline-cypress-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\">Future-Proofing Your Automation Pipeline<\/a><\/span><\/strong> to see Ely Lucas from Cypress demo the example project.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-end-to-end-testing\">End-to-end testing<\/h3>\n\n\n\n<p>Cypress is traditionally known for end-to-end testing. You automate user interactions for specific scenarios from start to finish in the browser, and then run functional assertions to check the state of elements at each step. End-to-end tests are hidden in an actual web server and hit the site just like a user would.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2-1024x453.png\" alt=\"\" class=\"wp-image-53434\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2-1024x453.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2-300x133.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2-768x340.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2-1536x679.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-2.png 1553w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Measurable stats for code coverage of your end-to-end testing can act as a health metric for your website or app. Adding coverage reports to your automation pipeline as commits can help ensure you\u2019re testing all parts of your code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-component-testing\">Component testing<\/h3>\n\n\n\n<p>If you\u2019re using a component-based framework like React or Angular or a design system like Storybook, you can also do component testing to test UI components. In this example, we have a button component with a few tests that pass, the hero card test, and a test for the login form. These components are being mounted in isolation outside of your typical web server.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3-1024x399.png\" alt=\"\" class=\"wp-image-53435\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3-1024x399.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3-300x117.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3-768x300.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3-1536x599.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-3.png 1559w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Think of component tests as \u201cUI unit\u201d tests. While they don\u2019t give end-to-end coverage, they\u2019re quick and easy to run.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-api-testing\">API testing<\/h3>\n\n\n\n<p>For your back end, you\u2019ll need to automate API tests. The example project is using a community-built plugin called <a href=\"https:\/\/github.com\/filiphric\/cypress-plugin-api\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">cypress-plugin-api<\/span><\/strong><\/a>. This plugin provides an interface inside the Cypress app to test APIs. It&#8217;s really cool and it&#8217;s super fun, and it allows you to write tests that you would have to do manually in a tool like Postman.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Fun fact<\/strong>: Cypress Ambassador <a href=\"https:\/\/filiphric.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Filip Hric<\/span><\/strong><\/a> developed the cypress-plugin-api. Check out <a href=\"https:\/\/testautomationu.applitools.com\/instructors\/filip_hric.html\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Filip\u2019s Test Automation University courses<\/span><\/strong><\/a>.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4-1024x399.png\" alt=\"\" class=\"wp-image-53436\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4-1024x399.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4-300x117.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4-768x300.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4-1536x599.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-4.png 1559w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The API tests in our example are in the separate server project. We can use the command npx cypress open, and then we can run those tests in Chrome. We can see all of our results that we&#8217;re getting the response of the status codes. We can view a post request, the headers that were sent, the headers that were returned, and other stuff that you normally get from a tool like Postman.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5-1024x452.png\" alt=\"\" class=\"wp-image-53437\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5-1024x452.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5-300x132.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5-768x339.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5-1536x677.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-5.png 1558w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>And it&#8217;s just baked into the app, which is really nice. Cypress is basically a web app that tests a web app. And so, you could extend Cypress as an app with things like this to help you do your testing and to have it all seamlessly integrated.<\/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-running-a-pipeline-with-github-actions\">Running a pipeline with GitHub Actions<\/h2>\n\n\n\n<p>The example project uses GitHub Actions to set up the test automation pipeline. When working on smaller projects, it&#8217;s easy to have CI interactions baked into your repository, all in one place.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-configuring-your-github-action\">Configuring your GitHub Action<\/h3>\n\n\n\n<p>With GitHub Actions, you declare everything you need in a YAML file in the .github\/workflows folder. Your actions become part of your repository and are covered by version control. If you make any changes, you can review them easily with a simple line-by-line diff. GitHub Actions make it easy to automate processes alongside other interactions you make with your repository. For example, if you open a pull request, you can have it automatically kick off your tests and do linting. You can even perform static code analysis before merging changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6-1024x528.png\" alt=\"\" class=\"wp-image-53439\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6-1024x528.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6-300x155.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6-768x396.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6-1536x792.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-6.png 1562w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Some environment variables are set at the top of the YAML file. The API URL is what the client app uses to communicate to the API. The example app is hooked up to send test results to the Cypress Cloud. Those results can then be used for analytics, diagnostics, reporting, and optimizing our test workflows. The Cypress cloud also requires a GitHub token, so it can do things like correctly identify what pull request is being merged.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>For those new to GitHub Actions<\/strong>: You can define environment variables per step in a job, but declaring them at the top helps you update them painlessly.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-running-each-of-our-tests\">Running each of our tests<\/h3>\n\n\n\n<p>To keep things simple, there is only one job right now in this GitHub Action. First, it checks out the code straight from GitHub. Next, it builds the project using the Cypress GitHub Action. The Cypress GitHub Action does a few things for you like building your application or npm installing or yarn installing the dependencies.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"300\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-7.png\" alt=\"\" class=\"wp-image-53440\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-7.png 547w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-7-300x165.png 300w\" sizes=\"(max-width: 547px) 100vw, 547px\" \/><\/figure>\n\n\n\n<p>Building first means that subsequent jobs don&#8217;t have to build the app again. We&#8217;ve set run test to false, which is a parameter to the Cypress GitHub Action, because we don&#8217;t want to run the tests here. We&#8217;ll be running the tests separately below.<\/p>\n\n\n\n<p>We have our component tests in our GitHub Action. We tell it to install false, since we installed it up above. And then we run our custom test command, which opens Cypress in run mode and initiates component testing. This record tells the GitHub Action to send the results to Cypress Cloud.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"153\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-8.png\" alt=\"\" class=\"wp-image-53441\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-8.png 882w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-8-300x52.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-8-768x133.png 768w\" sizes=\"(max-width: 882px) 100vw, 882px\" \/><\/figure>\n\n\n\n<p>And then we have to start the client and server. For both end-to-end tests and API tests, the application must be up and running component tests. For the end-to-end test and API tests, the example app is hitting live servers.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Nie_BL1yJa8FRxrXC60qtsajj4hEl-wL6ElTLIGzLm3kenVkmUrsLbq_XriuSDSQuiB6YSa0400Ro3sZTw_trO9ikHibblChNhn64YIKa07G-pVvPVuUX5AO8c9kwx1gbkO3ciY0si7e5NlgwQs9pCipVOFo5Sj1phHpBfxsszacLyGkyc2v-a71reJ6kw\" width=\"599\" height=\"158\"><\/p>\n\n\n\n<p>This run command will start both the React app and the Node server, and then it will run the end-to-end test. We&#8217;re telling it again to not install the dependency, since it was already installed. Then, we&#8217;re running the command to start the end-to-end testing. The wait command will wait to make sure that both the client URL and the API URL are both up and running before it will start the test. If the test starts before both URLs get up and running, you&#8217;ll have some tests fail.<\/p>\n\n\n\n<p>Another thing that the Cypress GitHub Action does is that you have the option to wait for these services to be live before the testing starts. By default, the npm run test commands are going to use the Chromium browser built into Electron. If you want to test on other browsers, you must make sure those browsers are installed on the runner. Cypress provides Docker images that you can add to your configuration to download the different browsers. However, downloading additional browsers increases the file size and makes the runs take longer.<\/p>\n\n\n\n<p>Make sure that the Cypress binary itself is downloaded and installed. It&#8217;s going to run headlessly. This is because the command set up in these scripts is run mode, which is headless, whereas open mode is with the UI.<\/p>\n\n\n\n<p>And then it will run the API test, which is very similar to end-to-end tests, except that since we&#8217;re not hitting the actual client app \u2013 only hitting the API app \u2013 we&#8217;re only waiting to make sure that the API URL is up and running.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"177\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-9.png\" alt=\"\" class=\"wp-image-53442\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-9.png 888w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-9-300x60.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-9-768x153.png 768w\" sizes=\"(max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<p>If you write test cases per the local database for end-to-end testing before pushing to GitHub Actions, someone else running those test cases on their system could potentially fail. In whatever kind of test automation you develop, you\u2019ll need to handle test data properly to avoid collisions. There are many different strategies you can follow. For more information on this and solving sample data dependency, watch my talk <a href=\"https:\/\/www.youtube.com\/watch?v=6DQhfjq_HSI\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Managing the Test Data Nightmare<\/span><\/strong><\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-long-do-the-test-suites-take\">How long do the test suites take?<\/h3>\n\n\n\n<p>When running your tests with Cypress and GitHub Actions, the results are uploaded to Cypress Cloud. You can go into Cypress Cloud and actually watch replays of all these tests that happened. The entire pipeline run in the example was 3 minutes and 50 seconds for all three test suites.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"108\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-10.png\" alt=\"\" class=\"wp-image-53443\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-10.png 677w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-10-300x48.png 300w\" sizes=\"(max-width: 677px) 100vw, 677px\" \/><\/figure>\n\n\n\n<p>The individual test suites we ran took the following times:<\/p>\n\n\n\n<ul>\n<li>Component tests: 49 seconds<\/li>\n\n\n\n<li>End-to-end tests: 1 minute and 18 seconds<\/li>\n\n\n\n<li>API tests: 13 seconds<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"406\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-11-1024x406.png\" alt=\"\" class=\"wp-image-53444\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-11-1024x406.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-11-300x119.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-11-768x304.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-11.png 1146w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\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-improving-test-coverage-with-visual-assertions\">Improving test coverage with visual assertions<\/h2>\n\n\n\n<p>Since all the Cypress tests are run inside of the browser window, you can visually see them and inspect to make sure that they&#8217;re looking correctly. But this type of review is a manual step. If someone accidentally makes a change to the stylesheet, the site could no longer be running properly, but if we run the tests, they\u2019ll pass.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12-1024x437.png\" alt=\"\" class=\"wp-image-53445\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12-1024x437.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12-300x128.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12-768x328.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12-1536x655.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-12.png 1559w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We can use Applitools Eyes to fix this issue.<\/p>\n\n\n\n<p>Visual testing is meant to automate the things that traditional automation is not so good at. For example, as long as particular IDs on your page are in the DOM somewhere, your traditional automation scripts with something like Cypress are still going to find and interact with the elements. Applitools Eyes uses visual AI to look at an app and be able to detect these kinds of visual differences that traditional assertions struggle to capture. Let\u2019s add some visual snapshots to these end-to-end tests.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-applitools-to-your-project\">Adding Applitools to your project<\/h3>\n\n\n\n<p>First, you\u2019ll need an Applitools account. You can <a href=\"https:\/\/auth.applitools.com\/users\/register?utm_content=https:\/\/app14743.cloudwayssites.com\/\">register a free Applitools account<\/a> with your GitHub username or your email, and you&#8217;ll be good to go. You\u2019ll need your Applitools API key for when we run tests with Applitools.<\/p>\n\n\n\n<p>Next, we\u2019ll need to install the Applitools SDK using npm install @applitools\/eyes-cypress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"991\" height=\"191\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-13.png\" alt=\"\" class=\"wp-image-53446\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-13.png 991w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-13-300x58.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-13-768x148.png 768w\" sizes=\"(max-width: 991px) 100vw, 991px\" \/><\/figure>\n\n\n\n<p>It can be a dev dependency or it can be a regular dependency \u2013 whichever you prefer. In the example project, we use a dev dependency. In the example project, we\u2019re using the <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/quickstart\/web\/cypress\">Applitools Eyes SDK for Cypress<\/a>, we have <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/\">Applitools SDKs<\/a> for basically every tool framework you got.<br>Next, we&#8217;ll need to create an Applitools configuration file. Where in Cypress projects, you have your cypress.config.js file, basically we want one that&#8217;s called applitools.config.js.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"317\" height=\"390\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-14.png\" alt=\"\" class=\"wp-image-53447\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-14.png 317w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-14-244x300.png 244w\" sizes=\"(max-width: 317px) 100vw, 317px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-configuring-your-applitools-runner\">Configuring your Applitools runner<\/h3>\n\n\n\n<p>In the Applitools config file, we will specify the configuration for running visual tests. There&#8217;s a separation between declaring configuration and actually adding test steps.<br>One of the settings we want is called batchName, and we&#8217;re going to set that to \u201ccy heroes visual tests\u201d to reflect the name of our demo app. The batch name will appear in the Eyes Test Manager (or the Applitools \u201cdashboard\u201d) after we run our visual tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"135\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-15.png\" alt=\"\" class=\"wp-image-53448\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-15.png 545w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-15-300x74.png 300w\" sizes=\"(max-width: 545px) 100vw, 545px\" \/><\/figure>\n\n\n\n<p>Next, we\u2019ll set the browsers. This will be a list, with each item being an entry that specifies a browser configuration, including name, width, and height.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"609\" height=\"451\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-16.png\" alt=\"\" class=\"wp-image-53449\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-16.png 609w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-16-300x222.png 300w\" sizes=\"(max-width: 609px) 100vw, 609px\" \/><\/figure>\n\n\n\n<p>Typically, since Cypress runs inside of an Electron app, it can be challenging to test mobile browsers. However, the Applitools Ultrafast Grid enables us to render our visual snapshots on mobile devices. The settings for mobile devices are going to be a bit different than those for browsers. Instead of having a name, we&#8217;re going to have a device name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"311\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-17.png\" alt=\"\" class=\"wp-image-53450\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-17.png 483w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-17-300x193.png 300w\" sizes=\"(max-width: 483px) 100vw, 483px\" \/><\/figure>\n\n\n\n<p>Our applitools.config.js file is complete. When we run our tests \u2013 either locally or in the GitHub Action \u2013 Applitools will render the snapshots it captures on these four browser configurations in the Ultrafast Grid and report results using the batch name. Furthermore, the local platform doesn\u2019t matter. Even if you run this test on Windows, the Ultrafast Grid can still render snapshots on Safari and mobile emulators. A snapshot is just going to be a capture of that full page. Applitools will do the re-rendering with the appropriate size, the appropriate browser configuration, and all that will happen in the cloud. Essentially you can do multi-browser and multi-platform testing with simple declarations.<\/p>\n\n\n\n<p>Now that we have completed the configuration, let\u2019s update the tests to capture visual snapshots, starting with the homepage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-setting-up-our-test-suites\">Setting up our test suites<\/h3>\n\n\n\n<p>You need to make sure that your tests aren\u2019t interfering with other tests. In these tests, we&#8217;re going through and modifying some of the heroes that are in the application. The state of the application changes per test, so to get around that, we&#8217;re creating a new hero just for working with our tests and deleting the hero after the tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"177\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-18.png\" alt=\"\" class=\"wp-image-53451\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-18.png 529w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-18-300x100.png 300w\" sizes=\"(max-width: 529px) 100vw, 529px\" \/><\/figure>\n\n\n\n<p>In the example, we&#8217;re using Cypress tasks, which is code that actually runs on the Node process part of Cypress. It&#8217;s directly communicating with our database to add the hero, delete the hero, and all the other types of setup tasks that we want to do before we actually run our test.<\/p>\n\n\n\n<p>So it&#8217;s going to happen for each of the tests, and then we&#8217;re visiting the homepage and getting access to the hero.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"652\" height=\"129\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-19.png\" alt=\"\" class=\"wp-image-53452\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-19.png 652w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-19-300x59.png 300w\" sizes=\"(max-width: 652px) 100vw, 652px\" \/><\/figure>\n\n\n\n<p>We get our new hero and then we call cy.deleteHero, which is going to call the database to delete the hero. From the describe block at the start of every test, we get our hero. And then, finally, we have the hero card by its name, and we find the button that has the right selectors, so we can actually select it and click the button.<\/p>\n\n\n\n<p>This test is making sure that you\u2019re logged in before you can like this hero. We&#8217;re making sure that the modal popped up, clicking the okay on the modal, and then making sure that modal disappears and does not exist anymore.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"857\" height=\"447\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-20.png\" alt=\"\" class=\"wp-image-53453\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-20.png 857w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-20-300x156.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-20-768x401.png 768w\" sizes=\"(max-width: 857px) 100vw, 857px\" \/><\/figure>\n\n\n\n<p>Down below we have another suite for when a normal user is logged in. And so we&#8217;re using a custom Cypress command to log in with this username and password. You can define these custom commands that are like making your own function, encapsulating a little bit of logic so that it could be reusable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"441\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-21.png\" alt=\"\" class=\"wp-image-53454\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-21.png 931w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-21-300x142.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-21-768x364.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<p>So what we&#8217;re doing to test the login is going to the homepage, running the login process, and verifying the login was actually successful. The cy.session is caching a session for us to restore the session later from cookies. This helps speed up your test so you&#8217;re not having to go through the whole flow of actually logging in again.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"820\" height=\"252\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-22.png\" alt=\"\" class=\"wp-image-53455\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-22.png 820w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-22-300x92.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-22-768x236.png 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/figure>\n\n\n\n<p>We have another suite here for when an admin user is logged in, because an admin user can edit users and delete heroes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"895\" height=\"486\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-23.png\" alt=\"\" class=\"wp-image-53456\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-23.png 895w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-23-300x163.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-23-768x417.png 768w\" sizes=\"(max-width: 895px) 100vw, 895px\" \/><\/figure>\n\n\n\n<p>&nbsp;In the example, negative login tests \u2013 where you use the wrong username and\/or password \u2013 are under the component tests.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"838\" height=\"432\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-24.png\" alt=\"\" class=\"wp-image-53457\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-24.png 838w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-24-300x155.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-24-768x396.png 768w\" sizes=\"(max-width: 838px) 100vw, 838px\" \/><\/figure>\n\n\n\n<p>In the login form component test, when an email and password is invalid, an error should show. The example uses cy.intercept to mock the API request that goes to the cert, which goes to the off endpoint and returns a status code 401, which represents an invalid login.<\/p>\n\n\n\n<p>You can either write a component test or an end-to-end test. In this case, a component test makes it easier to set up the mock data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-adding-a-call-to-applitools-eyes\">Adding a call to Applitools Eyes<\/h3>\n\n\n\n<p>With the test suites set up, we\u2019re ready to add some visual snapshots here. We need to call an Eyes session using the Applitools Eyes SDK. The idea is that we open our eyes, and we can take visual snapshots. And then at the end of the test, we will close our eyes to say that we&#8217;ve captured all the snapshots for that session or for that test. And at that point, Applitools Eyes will upload the snapshots that are captured to the Applitools Eyes server, do all of the re-rendering of the things of those four browsers in the Ultrafast Grid. Then we can log into the Applitools dashboard and we can see exactly what happened with our testing.<br>To get the autocomplete for Eyes commands, we need to set up the Applitools Eyes stuff with the Cypress project. We already did npm install on the package, so we\u2019ll need to run npx eyes-setup.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"408\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-26-1024x408.png\" alt=\"\" class=\"wp-image-53458\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-26-1024x408.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-26-300x120.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-26-768x306.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-26.png 1049w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We\u2019ll want to use the command cy.eyesOpen in the homepage describe block under the beforeEach method. We want to pass an app name and test name for logging and reporting purposes. You might also put their Cypress eyes open code in the beforeEach of the test cases, so the call doesn\u2019t need to be duplicated.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"234\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-27-1.png\" alt=\"\" class=\"wp-image-53460\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-27-1.png 513w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-27-1-300x137.png 300w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<p>Then, in the afterEach block, you\u2019ll call cy.eyesClose.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"658\" height=\"154\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-28.png\" alt=\"\" class=\"wp-image-53461\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-28.png 658w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-28-300x70.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/figure>\n\n\n\n<p>In this test, you must log in, make sure that the modal pops up, log in, and then click okay in the modal and make sure the modal disappears, so we\u2019ll need a snapshot when the modal is up and one when the modal goes away. In this case, we\u2019ll capture the whole window.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20230324151200im_\/https:\/\/lh5.googleusercontent.com\/2wtAlFDyVMLZPDbPDwWYoDth42w-tv70p2GaIKP_XnJIy_2jzifCsbnvCC_ShpotJq8CiKJTe3uwERZyPnVaX3qV-AE5c5uopHsH2XHkx-wGdEFYeRJNbOG2NMpmnIGulrnB1qnw_V_Q1nORO_wic-xWB-hIJECje1vVo3HJDSzA0v17J7aKxkfCiPISCQ\" alt=\"\"\/><\/figure>\n\n\n\n<p>If we didn&#8217;t want to capture everything, we could actually capture a region, like a div or even an individual element. On a small scale, using the region option does not make a measurable difference in execution speed, but it gives you a way to tune the type of snapshot we want.<\/p>\n\n\n\n<p>For capturing the next step, we can basically copy the whole call there and paste it, changing the tag to homepage with the modal dismissed.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20230324151200im_\/https:\/\/lh6.googleusercontent.com\/QtduOiE_eJ9h7moTNdYRKR_vE4Lf0UbS6l86zK6Os1GDK8VTHJmSikNc1joj96NWsDPo29kq5uEp2At4poZsx8hEagICBZEii1FJ1CZMTMpTq45Ge4K4-5Tp8p1D7jpSV2304zkVzLPwdfjb8vZnOWud-ux_y5CiSLNOaF77yEqqHje5oByQOGnlulqrSA\" alt=\"\"\/><\/figure>\n\n\n\n<p>These snapshots are very straightforward to write, and something that we could consider is that some of those other assertions you might arguably be able to remove. The visual snapshot is going to capture everything on that window, so if it&#8217;s there and visible, we&#8217;re going to capture it and track it over time.<\/p>\n\n\n\n<p>You would still need to keep all of your interactions, but you can remove most of your assertions checking visible elements. However, there are certainly things where if you want to check a very specific numeric value, you still want to keep those assertions.<\/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-running-the-updated-tests\">Running the updated tests<\/h2>\n\n\n\n<p>All we need to do to run this test is make sure that we have our Applitools API key from our account saved as an environment variable of the Cypress application.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: If you happen to steal someone\u2019s API key, it doesn&#8217;t really help you. It just means they\u2019ll see your results, and you won&#8217;t. API keys should be kept secret and safe.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-the-applitools-eyes-dashboard\">Using the Applitools Eyes dashboard<\/h3>\n\n\n\n<p>So to see the visual testing results, we will need to view them in the Applitools Eyes dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-29-1024x517.png\" alt=\"\" class=\"wp-image-53462\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-29-1024x517.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-29-300x151.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-29-768x388.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-29.png 1421w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>You can view your test results in a grid to see the UI quickly, or you can view your results in a list to see your configurations quickly.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"395\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-30-1024x395.png\" alt=\"\" class=\"wp-image-53463\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-30-1024x395.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-30-300x116.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-30-768x296.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-30.png 1423w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>On the left, you&#8217;ve got the batch name that was set. Then on the main part of the body, you&#8217;ll see there are actually four tests. We only wrote one test, but each test is run once per browser configuration we specified, providing cross-browser and cross-platform testing without additional steps.<\/p>\n\n\n\n<p>If we open up the snapshots, you can see the two snapshots that we captured. These results are new, because this is the first time we&#8217;ve run the test.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"531\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-31-1024x531.png\" alt=\"\" class=\"wp-image-53464\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-31-1024x531.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-31-300x156.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-31-768x398.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-31.png 1115w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>We\u2019ve established the snapshot as a baseline image, meaning anything in the future will be checked against that.<\/p>\n\n\n\n<p>That&#8217;s where that visual aspect of the testing comes in. Your Cypress results will essentially tell you if it was bare bones basic functional, and then Eyes will tell you what it actually looked like. You get richer results together.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-resolving-test-results-in-the-dashboard\">Resolving test results in the dashboard<\/h3>\n\n\n\n<p>Let\u2019s see what this looks like if we make that visual change.<\/p>\n\n\n\n<p>In the main file, we\u2019ve updated the stylesheet and run the test again. There is no need to do anything in the Applitools Eyes dashboard before re-running the test.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-32-1024x325.png\" alt=\"\" class=\"wp-image-53465\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-32-1024x325.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-32-300x95.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-32-768x243.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-32.png 1123w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The new test batch is in an unresolved state because Eyes detected a visual difference. In theory, a visual difference could be good or bad. You could be making an intentional change. Visual AI is basically a change detector that makes it obvious to you, the human, to decide what is good or bad. Then anytime Applitools Eyes sees the same kind of passing or failing behavior in the future, it&#8217;ll remember.<\/p>\n\n\n\n<p>It\u2019s important to note that the unresolved test results won\u2019t stop your test automation job or your automation flow. Test automation would complete normally. You as the human tester would review visual test results in the Eyes Test Manager (the \u201cdashboard\u201d) afterwards. The pipeline would not wait for you to manually mark visual test results.<\/p>\n\n\n\n<p>Let&#8217;s open up one of those snapshots so we can see it full screen.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"480\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-33.png\" alt=\"\" class=\"wp-image-53466\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-33.png 859w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-33-300x168.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/future-proofing-tests-33-768x429.png 768w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/figure>\n\n\n\n<p>In the upper left, below the View menu in the ribbon, there\u2019s a dropdown to show both so that you can see the baseline and test side by side.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20230324151200im_\/https:\/\/lh6.googleusercontent.com\/gd6agBFg2IUfXmq6OQorgPu-qZ2jIsRheced9Ab7OtoVY9Z8MRGAH0vYateVh0Kwe0FpbMKruQV8wf469XnYHMbpPLXs5rbXjXQx_Gwh96A3KEaFsNutpPPvGnzpu6vkbpwcM2Pb8sVqmVexOtaGcsyEBazkDiwM4ha5V_Hk11iR3fHaRKcQYgABeMOGSw\" alt=\"\"\/><\/figure>\n\n\n\n<p>In the example, we had removed the stylesheet, so we can see very clearly that it&#8217;s very different. It&#8217;s not always this obvious. In this case, pretty much the whole screen is different. But if it were like a single button that was missing or something shunted a little bit, it would show that a specific area was different. That&#8217;s the power of the visual AI check.<\/p>\n\n\n\n<p>Whenever Applitools detects a visual change, you can mark it as \u201cpassing\u201d with a thumbs-up. Then that snapshot automatically becomes the new baseline against which future checkpoints are compared. Applitools will go to the background and track similar images. And it will automatically update those appropriately as well.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note<\/strong>: If you ever want to \u201creset\u201d snapshots, you can also delete the baselines and run your tests \u201cfresh\u201d as if for the first time. The snapshots they capture will automatically become new baseline images.<\/p>\n<\/blockquote>\n\n\n\n<p>Once we\u2019ve resolved all test results, we\u2019ll need to save. And now if we were to rerun our test again, Applitools Eyes would see the new snapshots and pass tests as appropriate. If you have dynamic content or test data, you add region annotations, which will ignore anything in the region box.<br>It is possible to compare your production and staging environments. You can use our <strong><span style=\"text-decoration: underline;\"><a href=\"https:\/\/app14743.cloudwayssites.com\/docs\/topics\/integrations\/github-integration.html\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Integration<\/a><\/span><\/strong> to manage different branches or versions of your application. We also support different baselines for A\/B testing.<\/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-closing-thoughts\">Closing thoughts<\/h2>\n\n\n\n<p>That&#8217;s basically how you would do visual testing with Applitools and Cypress. There are two big points to remember if you want to add visual testing to your own test suites:<\/p>\n\n\n\n<ul>\n<li>To get these tests running in your pipeline, the only change you&#8217;d have to make is to inject the Applitools API key in those environment variables.<\/li>\n\n\n\n<li>We didn\u2019t really add a fourth suite of tests. Visual testing is more of a technique or an aspect of testing, not necessarily its own category of tests. All you have to do is work in the SDK, capture some snapshots, and you&#8217;re good to roll.<\/li>\n<\/ul>\n\n\n\n<p>We hope this guide has helped you to build out your test automation pipeline to be more reliable and scalable. If you liked the guide, check out our <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Applitools tutorials<\/span><\/strong><\/a> for other guides on building your test automation pipeline. Watch the on-demand recording of <a href=\"https:\/\/app14743.cloudwayssites.com\/event\/future-proofing-automation-pipeline-cypress-webinar\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Future-Proofing Your Automation Pipeline<\/span><\/strong><\/a> to see the full walkthrough. To keep up-to-date with test automation, you can peruse our latest courses taught by industry-leading testing experts on <a href=\"https:\/\/testautomationu.applitools.com\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong><span style=\"text-decoration: underline;\">Test Automation University<\/span><\/strong><\/a>. Happy testing!<\/p>\n\n\n<section class=\"article-group\">\n    <div class=\"is-featured\">\n      <div class=\"title-bar\">\n      <div><\/div>\n    <\/div>      <div class=\"row\">\n        <div class=\"col-md-6\">\n          \t<div class=\"item is-primary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-5-audience-qa\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<source srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-831x540.jpg\" media=\"screen and (min-width: 768px)\" \/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-384x242.jpg\" width=\"384\" height=\"242\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 5: Audience Q&#038;A<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 01.11.2023\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n        <\/div>\n        <div class=\"col-md-6\">\n          \t<div class=\"item is-secondary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-4-changing-frameworks\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-200x200.jpg\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 4: Changing Frameworks<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 01.05.2023\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n\t<div class=\"item is-secondary\">\n\t\t<a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/let-the-engineers-speak-part-3-favorite-test-integrations\/\" >\n\t\t\t\t\t\t\t<picture class=\"image\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/12\/Title-200x200.jpg\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\">\n\t\t\t\t<\/picture>\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t<h3 class=\"title\">Let the Engineers Speak! Part 3: Favorite Test Integrations<\/h3>\n\t\t\t\t\t\t\t\t\t<div class=\"meta\">\n\t\t\t\t\t\tArticles &mdash; 12.28.2022\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/a>\n\t<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <\/section><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to future-proof your test automation pipeline with Cypress and Applitools by adding tests that run from GitHub Actions. In this article, we&#8217;ll share how to ensure your test&#8230;<\/p>\n","protected":false},"author":8,"featured_media":46304,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004,10002],"tags":[10023,16860,10357,10061,10152,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>Future-Proofing Your Test Automation Pipeline<\/title>\n<meta name=\"description\" content=\"In this article, we&#039;ll share how to ensure your test automation pipeline can scale while staying reliable and easy to maintain.\" \/>\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\/future-proofing-your-test-automation-pipeline\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Future-Proofing Your Test Automation Pipeline\" \/>\n<meta property=\"og:description\" content=\"Learn how to future-proof your test automation pipeline with Cypress and Applitools by adding tests that run from GitHub Actions. In this article, we&#039;ll\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-27T20:02:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T19:30:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.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=\"Applitools Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Applitools Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\"},\"author\":{\"name\":\"Applitools Team\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000\"},\"headline\":\"Future-Proofing Your Test Automation Pipeline\",\"datePublished\":\"2023-01-27T20:02:48+00:00\",\"dateModified\":\"2023-12-01T19:30:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\"},\"wordCount\":3860,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg\",\"keywords\":[\"Applitools Eyes\",\"ci\/cd\",\"Cypress\",\"Functional Testing\",\"Test Automation\",\"visual testing\"],\"articleSection\":[\"Advanced Topics\",\"Events\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\",\"name\":\"Future-Proofing Your Test Automation Pipeline\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg\",\"datePublished\":\"2023-01-27T20:02:48+00:00\",\"dateModified\":\"2023-12-01T19:30:36+00:00\",\"description\":\"In this article, we'll share how to ensure your test automation pipeline can scale while staying reliable and easy to maintain.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg\",\"width\":831,\"height\":542,\"caption\":\"Cypress Heroes app homepage\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Topics\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Future-Proofing Your Test Automation Pipeline\"}]},{\"@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\/7adb2f3d4eb42c65ccc8cd7ef840b000\",\"name\":\"Applitools Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g\",\"caption\":\"Applitools Team\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/itay\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Future-Proofing Your Test Automation Pipeline","description":"In this article, we'll share how to ensure your test automation pipeline can scale while staying reliable and easy to maintain.","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\/future-proofing-your-test-automation-pipeline\/","og_locale":"en_US","og_type":"article","og_title":"Future-Proofing Your Test Automation Pipeline","og_description":"Learn how to future-proof your test automation pipeline with Cypress and Applitools by adding tests that run from GitHub Actions. In this article, we'll","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2023-01-27T20:02:48+00:00","article_modified_time":"2023-12-01T19:30:36+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg","type":"image\/jpeg"}],"author":"Applitools Team","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Applitools Team","Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/"},"author":{"name":"Applitools Team","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/7adb2f3d4eb42c65ccc8cd7ef840b000"},"headline":"Future-Proofing Your Test Automation Pipeline","datePublished":"2023-01-27T20:02:48+00:00","dateModified":"2023-12-01T19:30:36+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/"},"wordCount":3860,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg","keywords":["Applitools Eyes","ci\/cd","Cypress","Functional Testing","Test Automation","visual testing"],"articleSection":["Advanced Topics","Events"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/","name":"Future-Proofing Your Test Automation Pipeline","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg","datePublished":"2023-01-27T20:02:48+00:00","dateModified":"2023-12-01T19:30:36+00:00","description":"In this article, we'll share how to ensure your test automation pipeline can scale while staying reliable and easy to maintain.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/01\/cypress-heroes-homepage.jpg","width":831,"height":542,"caption":"Cypress Heroes app homepage"},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/future-proofing-your-test-automation-pipeline\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Advanced Topics","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/"},{"@type":"ListItem","position":3,"name":"Future-Proofing Your Test Automation Pipeline"}]},{"@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\/7adb2f3d4eb42c65ccc8cd7ef840b000","name":"Applitools Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ab026ef5311aa0450f87e2ccab9c2fdc?s=96&d=mm&r=g","caption":"Applitools Team"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/itay\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/46171"}],"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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=46171"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/46171\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/46304"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=46171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=46171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=46171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}