{"id":35712,"date":"2022-03-22T13:59:50","date_gmt":"2022-03-22T20:59:50","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=35712"},"modified":"2023-12-01T10:25:40","modified_gmt":"2023-12-01T18:25:40","slug":"how-to-visually-test-remix-app-applitools-cypress","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/","title":{"rendered":"How to Visually Test a Remix App with Applitools and Cypress"},"content":{"rendered":"\n<p><em>Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.<\/em><\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of Contents<\/h2><ul><li><a href=\"#h-what-is-remix\" data-level=\"2\">What is Remix?<\/a><\/li><li><a href=\"#h-what-does-remix-mean-for-ui-testing\" data-level=\"2\">What Does Remix Mean For UI Testing?<\/a><\/li><li><a href=\"#h-what-about-remix-and-visual-testing\" data-level=\"2\">What about Remix and Visual Testing?<\/a><ul><li><a href=\"#h-introducing-remix-demo-app\" data-level=\"3\">Introducing Remix Demo App<\/a><ul><li><a href=\"#h-running-demo-app-nbsp\" data-level=\"4\">Running Demo App&nbsp;<\/a><\/li><\/ul><\/li><li><a href=\"#h-visual-testing-of-remix-app-with-applitools-and-cypress\" data-level=\"3\">Visual Testing of Remix App with Applitools and Cypress<\/a><ul><li><a href=\"#h-setting-up-cypress\" data-level=\"4\">Setting up Cypress<\/a><\/li><li><a href=\"#h-setting-up-applitools\" data-level=\"4\">Setting up Applitools<\/a><\/li><li><a href=\"#h-writing-tests-with-applitools-and-cypress\" data-level=\"4\">Writing Tests with Applitools and Cypress<\/a><\/li><li><a href=\"#h-running-applitools-tests\" data-level=\"4\">Running Applitools Tests<\/a><\/li><li><a href=\"#h-scaling-visual-tests-across-browsers\" data-level=\"4\">Scaling Visual Tests Across Browsers<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#h-verdict-can-remix-apps-be-visually-tested-with-applitools-and-cypress\" data-level=\"2\">Verdict: Can Remix Apps be Visually Tested with Applitools and Cypress?<\/a><\/li><\/ul><\/div>\n\n\n\n<p>In this blog post, we answer a single question: how to best visually test a <a href=\"https:\/\/remix.run\/\">Remix<\/a>-based app?&nbsp;<\/p>\n\n\n\n<p>We walk through Remix and build a demo app to best showcase the framework. Then, we take a deep dive into visual testing with <a href=\"https:\/\/app14743.cloudwayssites.com\/\">Applitools<\/a> and <a href=\"https:\/\/www.cypress.io\/\">Cypress<\/a>. We close on scaling our test coverage with the <a href=\"https:\/\/app14743.cloudwayssites.com\/product-ultrafast-test-cloud\/\">Ultrafast Test Cloud<\/a> to perform cross-browser validation of the app.<\/p>\n\n\n\n<p>So let our exciting journey begin in pursuit of learning how to visually test the Remix-based app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-remix\">What is Remix?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"627\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Thumbnail.jpg\" alt=\"\" class=\"wp-image-35714\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Thumbnail.jpg 1200w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Thumbnail-300x157.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Thumbnail-1024x535.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Thumbnail-768x401.jpg 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><figcaption class=\"wp-element-caption\"><em>Remix Logo<\/em><\/figcaption><\/figure>\n\n\n\n<p>Web development is an ever-growing space with almost as many ways to build web apps as there are stars in the sky. And it ultimately translates into just how many different User Interface (UI) frameworks and libraries there are. One such library is <a href=\"https:\/\/reactjs.org\/\">React<\/a>, which most people in the web app space have heard about, or even used to build a website or two.&nbsp;<\/p>\n\n\n\n<p>For those unfamiliar with React, it&#8217;s a declarative, component-based library that developers can use to build web apps across different platforms. While React is a great way to develop robust and responsive UIs, many moving pieces still happen behind the scenes. Things like data loading, routing, and more complex work like <a href=\"https:\/\/en.wikipedia.org\/wiki\/Server-side_scripting#Server-side_rendering\">Server-Side Rendering<\/a> are what a new framework called <a href=\"https:\/\/remix.run\/\">Remix<\/a> can handle for React apps.<\/p>\n\n\n\n<p>Remix is a full-stack web framework that optimizes data loading and routing, making pages load faster and improving overall User Experience (UX). The days are long past when our customers would wait minutes while a website reloads, while moving from one page to another, or expecting an update on their feed. Features like Server-Side Rendering, effective routing, and data loading have become the must for getting our users the experience they want and <em>need<\/em>. The Remix framework is an excellent open-source solution for delivering these features to our audience and improving their UX.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-does-remix-mean-for-ui-testing\">What Does Remix Mean For UI Testing?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"902\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools.jpg\" alt=\"\" class=\"wp-image-35715\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools.jpg 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools-300x135.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools-1024x462.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools-768x346.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/RemixCypressApplitools-1536x693.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\">Testing Remix with Cypress and Applitools<\/figcaption><\/figure>\n\n\n\n<p>Our end-users shouldn&#8217;t care what framework we used to build a website. What matters to our users is that the app works and lets them achieve their goals as fast as possible. In the same way, the testing principles always remain the same, so UI testing shouldn&#8217;t be impacted by the frameworks used to create an app. The basics of how we test stay the same although some testing aspects could change. For example, in the case of an <a href=\"https:\/\/angular.io\/\">Angular app<\/a>, we might need to adjust how we wait for the site to fully load by using a specialized test framework like <a href=\"https:\/\/www.protractortest.org\/#\/\">Protractor<\/a>.<\/p>\n\n\n\n<p>Most tests follow a straightforward pattern of <a href=\"https:\/\/testautomationu.applitools.com\/capybara-ruby\/chapter2.1.html\">Arrange, Act, and Assert<\/a>. Whether you are writing a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Unit_testing\">unit test<\/a>, an <a href=\"https:\/\/en.wikipedia.org\/wiki\/Integration_testing\">integration test<\/a>, or an <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/simplify-end-to-etest-maintenance\/\">end-to-end test<\/a>, everything follows this cycle of setting up the data, running through a set of actions and validating the end state.<\/p>\n\n\n\n<p>When writing these end-to-end tests, we need to put ourselves in the shoes of our users. What matters most in this type of testing is replicating a set of core use-cases that our end-users go through. It could be logging into an app, writing a new post, or navigating to a new page. That&#8217;s why UI test automation frameworks like <a href=\"https:\/\/app14743.cloudwayssites.com\/\">Applitools<\/a> and <a href=\"https:\/\/www.cypress.io\/\">Cypress<\/a> are fantastic for testing &#8211; they are largely agnostic of the platform they are testing. With these tools in hand, we can quickly check Remix-based apps the same way we would test any other web application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-about-remix-and-visual-testing\">What about Remix and Visual Testing?<\/h2>\n\n\n\n<p>The main goal of testing is to confirm the app&#8217;s behavior that our users see and go through. This reason is why simply loading UI elements and validating inner text or styling is not enough. Our customers are not interested in HTML or CSS. What they care about is what they can see and interact with on our site, not the code behind it. It&#8217;s not enough for a robust coverage of the complex UI that modern web apps have. We can close this gap with visual testing.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1429\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual.jpg\" alt=\"Contrasting what our tests see (with an image of code) with what our customers see (with an image of a website's UI).\" class=\"wp-image-35716\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual.jpg 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual-300x214.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual-1024x732.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual-768x549.jpg 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Functional-vs-Visual-1536x1097.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Functional vs Visual Testing Perspective<\/em><\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/visual-testing\/\">Visual testing<\/a> allows us to see our app from our customers&#8217; point of view. And that\u2019s where the <a href=\"https:\/\/app14743.cloudwayssites.com\/products-eyes\/\">Applitools Eyes SDK<\/a> comes in! This visual testing tool can enhance the existing end-to-end test coverage to ensure our app is pixel-perfect.<\/p>\n\n\n\n<p>To simplify, what Applitools does for us is that it allows developers to effectively compare visual elements across various screens to find visible defects. Applitools can record our UI elements in their platform and then monitor any visual regressions that our customers might encounter. More specifically, this testing framework exposes the visible differences between <a href=\"https:\/\/help.applitools.com\/hc\/en-us\/articles\/360007188691-What-is-a-baseline-and-how-is-a-baseline-created-\">baseline snapshots<\/a> and future snapshots.<\/p>\n\n\n\n<p>Applitools has integrations with numerous testing platforms like <a href=\"https:\/\/www.cypress.io\/\">Cypress<\/a>, <a href=\"https:\/\/webdriver.io\/\">WebdriverIO<\/a>, <a href=\"https:\/\/www.selenium.dev\/\">Selenium<\/a>, and many others. For this article, we will showcase Applitools with Cypress to add visual test coverage to our Remix app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-introducing-remix-demo-app\">Introducing Remix Demo App<\/h3>\n\n\n\n<p>We can&#8217;t talk about a framework like Remix without seeing it in practice. That&#8217;s why we put together a demo app to best showcase Remix and later test it with Applitools and Cypress.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1267\" height=\"925\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Demo-App.png\" alt=\"A screenshot of a Remix demo app\" class=\"wp-image-35717\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Demo-App.png 1267w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Demo-App-300x219.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Demo-App-1024x748.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-Demo-App-768x561.png 768w\" sizes=\"(max-width: 1267px) 100vw, 1267px\" \/><figcaption class=\"wp-element-caption\"><em>Remix Demo App<\/em><\/figcaption><\/figure>\n\n\n\n<p>We based this app on the <a href=\"https:\/\/remix.run\/docs\/en\/v1\/tutorials\/blog\">Remix Developer Blog app<\/a> that highlights the core functionalities of Remix: data loading, actions, redirects, and more. We shared this demo app and all the tests we cover in this article in <a href=\"https:\/\/github.com\/dmitryvinn\/remix-demo-app-applitools\">this repository<\/a> so that our readers can follow along.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-running-demo-app-nbsp\">Running Demo App&nbsp;<\/h4>\n\n\n\n<p>Before diving into writing tests, we must ensure that our Remix demo application is running.<\/p>\n\n\n\n<p>To start, we need to clone a project from <a href=\"https:\/\/github.com\/dmitryvinn\/remix-demo-app-applitools\">this repository<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">git clone https:\/\/github.com\/dmitryvinn\/remix-demo-app-applitools<\/code><\/pre>\n\n\n\n<p>Then, we navigate into the project\u2019s root directory and install all <a href=\"https:\/\/nodejs.dev\/learn\/npm-dependencies-and-devdependencies\">dependencies<\/a>:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">cd remix-demo-app-applitools\nnpm install<\/code><\/pre>\n\n\n\n<p>After we install the necessary dependencies, our app is ready to start:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">npm run dev<\/code><\/pre>\n\n\n\n<p>After we launch the app, it should be available at <code>http:\/\/localhost:3000\/<\/code>, unless the port is already taken. With our Remix demo app fully functional, we can transition into testing Remix with Applitools and Cypress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-visual-testing-of-remix-app-with-applitools-and-cypress\">Visual Testing of Remix App with Applitools and Cypress<\/h3>\n\n\n\n<p>There is this great quote from a famous American economist, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Richard_Thaler\">Richard Thaler<\/a>: \u201cIf you want people to do something, make it easy.\u201d That\u2019s what Applitools and Cypress did by making testing easy for developers, so people don&#8217;t see it as a chore anymore.<\/p>\n\n\n\n<p>To run our visual test automation using Applitools, we first need to set up Cypress, which will play the role of test runner. We can think about Cypress as a car&#8217;s body, whereas Applitools is an engine that powers the vehicle and ultimately gets us to our destination: a well-tested Remix web app.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-setting-up-cypress\">Setting up Cypress<\/h4>\n\n\n\n<p>Cypress is an open-source JavaScript end-to-end testing framework developers can use to write fast, reliable, and maintainable tests. But rather than reinventing the wheel and talking about the basics of Cypress, we invite our readers to learn more about using this automation framework on the <a href=\"https:\/\/docs.cypress.io\/guides\/overview\/why-cypress\">official site<\/a>, or from <a href=\"https:\/\/testautomationu.applitools.com\/cypress-tutorial\/\">this course<\/a> at <a href=\"https:\/\/testautomationu.applitools.com\">Test Automation University<\/a>.<\/p>\n\n\n\n<p>To install Cypress, we only need to run a single command:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">npm install cypress<\/code><\/pre>\n\n\n\n<p>Then, we need to initialize the <code>cypress<\/code> folder to write our tests. The easiest way to do it is by running the following:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">npx cypress open<\/code><\/pre>\n\n\n\n<p>This command will open Cypress Studio, which we will cover later in the article, but for now we can safely close it. We also recommend deleting sample test suites that Cypress created for us under <code>cypress\/integration<\/code>.<\/p>\n\n\n\n<p><strong>Note:<\/strong> If <code>npx<\/code> is missing on the local machine, follow <a href=\"https:\/\/nodejs.dev\/learn\/the-npx-nodejs-package-runner\">these steps<\/a> on how to update the Node package manager, or run <code>.\/node_modules\/.bin\/cypress open<\/code> instead.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-setting-up-applitools\">Setting up Applitools<\/h4>\n\n\n\n<p>Installing the <a href=\"https:\/\/www.npmjs.com\/package\/@applitools\/eyes-cypress\">Applitools Eyes SDK<\/a> with Cypress is a very smooth process. In our case, because we already had Cypress installed, we only need to run the following:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">npm install @applitools\/eyes-cypress --save-dev<\/code><\/pre>\n\n\n\n<p>To run Applitools tests, we need to get the Applitools API key, so our test automation can use the Eyes platform, including recording the UI elements, validating any changes on the screen, and more. <a href=\"https:\/\/app14743.cloudwayssites.com\/docs\/topics\/overview\/obtain-api-key.html\">This page<\/a> outlines how to get this <code>APPLITOOLS_API_KEY<\/code> from the platform.<\/p>\n\n\n\n<p>After getting the API key, we have <a href=\"https:\/\/app14743.cloudwayssites.com\/tutorials\/cypress.html#running-tests-with-applitools\">two options<\/a> on how to add the key to our tests suite: using a CLI or an Applitools configuration file. Later in this post, we explore how to scale Applitools tests, and the configuration file will play a significant role in that effort. Hence, we continue by creating <code>applitools.config.js<\/code> in our root directory.<\/p>\n\n\n\n<p>Our configuration file will begin with the most basic setup of running a single test thread (<code>testConcurrency<\/code>) for one browser (<code>browser<\/code> field). We also need to add our <code>APPLITOOLS_API_KEY<\/code> under the `apiKey\u2019 field that will look something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">module.exports = {\n  testConcurrency: 1,\n  apiKey: \"DONT_SHARE_OUR_APPLITOOLS_API_KEY\",\n  browser: [\n    \/\/ Add browsers with different viewports\n    { width: 800, height: 600, name: \"chrome\" },\n  ],\n  \/\/ set batch name to the configuration\n  batchName: \"Remix Demo App\",\n};<\/code><\/pre>\n\n\n\n<p>Now, we are ready to move onto the next stage of writing our visual tests with Applitools and Cypress.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-writing-tests-with-applitools-and-cypress\">Writing Tests with Applitools and Cypress<\/h4>\n\n\n\n<p>One of the best things about Applitools is that it nicely integrates with our existing tests with straightforward API.<\/p>\n\n\n\n<p>For this example, we visually test a simple form on the Actions page of our Remix app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1460\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form.png\" alt=\"An Action form in the demo remix app, showing a question: &quot;What is more useful when it is broken?&quot; with an answer field and an answer button.\" class=\"wp-image-35719\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form-300x219.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form-1024x748.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form-768x561.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Test-Actions-Form-1536x1121.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Action Form in Remix App<\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>To begin writing our tests, we need to create a new file named <code>actions-page.spec.js<\/code> in the <code>cypress\/integration<\/code> folder:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1036\" height=\"782\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/actions-tests-location.jpg\" alt=\"\" class=\"wp-image-35720\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/actions-tests-location.jpg 1036w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/actions-tests-location-300x226.jpg 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/actions-tests-location-1024x773.jpg 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/actions-tests-location-768x580.jpg 768w\" sizes=\"(max-width: 1036px) 100vw, 1036px\" \/><figcaption class=\"wp-element-caption\">Basic Applitools Test File<\/figcaption><\/figure>\n\n\n\n<p>Since we rely on Cypress as our test runner, we will continue using its API for writing the tests. For the basic Actions page tests where we validate that the page renders visually correctly, we start with this code snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">describe(\"Actions page form\", () =&gt; {\n  it(\"Visually confirms action form renders\", () =&gt; {\n    \/\/ Arrange\n    \/\/ ...\n\n    \/\/ Act\n    \/\/ ..\n\n    \/\/ Assert\n    \/\/ ..\n\n    \/\/ Cleanup\n    \/\/ ..\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>We continue following the same pattern of Arrange-Act-Assert, but now we also want to ensure that we close all the resources we used while performing the visual testing. To begin our test case, we need to visit the Action page:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">describe(\"Actions page form\", () =&gt; {\n  it(\"Visually confirms action form renders\", () =&gt; {\n    \/\/ Arrange\n    cy.visit(\"http:\/\/localhost:3000\/demos\/actions\");\n\n    \/\/ Act\n    \/\/ ..\n\n    \/\/ Assert\n    \/\/ ..\n\n    \/\/ Cleanup\n    \/\/ ..\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>Now, we can begin the visual validation by using the <a href=\"https:\/\/app14743.cloudwayssites.com\/products-eyes\/\">Applitools Eyes framework<\/a>. We need to \u201copen our eyes,\u201d so-to-speak by calling <code>cy.eyesOpen()<\/code>. It initializes our test runner for Applitools to capture critical visual elements just like we would with our own eyes:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">describe(\"Actions page form\", () =&gt; {\n  it(\"Visually confirms action form renders\", () =&gt; {\n    \/\/ Arrange\n    cy.visit(\"http:\/\/localhost:3000\/demos\/actions\");\n\n    \/\/ Act\n    cy.eyesOpen({\n      appName: \"Remix Demo App\",\n      testName: \"Validate Action Form\",\n    });\n\n    \/\/ Assert\n    \/\/ ..\n\n    \/\/ Cleanup\n    \/\/ ..\n  });\n});\n<\/code><\/pre>\n\n\n\n<p><strong>Note:<\/strong> Technically speaking, <code>cy.eyesOpen()<\/code> should be a part of the Arrange step of writing the test, but for educational purposes, we are moving it under the Act portion of the test case.<\/p>\n\n\n\n<p>Now, to move to the validation phase, we need Applitools to take a screenshot and match it against the existing version of the same UI elements. These screenshots are saved on our Applitools account, and unless we are running the test case for the first time, the Applitools framework will match these UI elements against the version that we previously saved:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">describe(\"Actions page form\", () =&gt; {\n  it(\"Visually confirms action form renders\", () =&gt; {\n    \/\/ Arrange\n    cy.visit(\"http:\/\/localhost:3000\/demos\/actions\");\n\n    \/\/ Act\n    cy.eyesOpen({\n      appName: \"Remi Demo App\",\n      testName: \"Validate Action Form\",\n    });\n\n    \/\/ Assert\n    cy.eyesCheckWindow(\"Action Page\");\n\n    \/\/ Cleanup\n    \/\/ ..\n  });\n});\n<\/code><\/pre>\n\n\n\n<p>Lastly, we need to close our test runner for Applitools by calling <code>cy.closeEyes()<\/code>. With this step, we now have a complete Applitools test case for our Actions page:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">describe(\"Actions page form\", () =&gt; {\n  it(\"Visually confirms action form renders\", () =&gt; {\n    \/\/ Arrange\n    cy.visit(\"http:\/\/localhost:3000\/demos\/actions\");\n\n    \/\/ Act\n    cy.eyesOpen({\n      appName: \"Remi Demo App\",\n      testName: \"Validate Action Form\",\n    });\n\n    \/\/ Assert\n    cy.eyesCheckWindow(\"Action Page\");\n\n    \/\/ Cleanup\n    cy.eyesClose();\n  });\n});\n<\/code><\/pre>\n\n\n\n<p><strong>Note:<\/strong> Although we added a cleanup-stage with <code>cy.eyesClose()<\/code> in the test case itself, we highly recommend moving this method outside of the <code>it()<\/code> function into the <code>afterEach()<\/code> that will run for every test, avoiding code duplication.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-running-applitools-tests\">Running Applitools Tests<\/h4>\n\n\n\n<p>After the hard work of planning and then writing our test suite, we can finally start running our tests. And it couldn\u2019t be easier than with Applitools and Cypress!&nbsp;<\/p>\n\n\n\n<p>We have two options of either executing our tests by using <a href=\"https:\/\/docs.cypress.io\/guides\/guides\/command-line\">Cypress CLI<\/a> or <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/getting-started-cypress-studio\/\">Cypress Studio<\/a>.<\/p>\n\n\n\n<p>Cypress Studio is a great option when we first write our tests because we can walk through every case, stop the process at any point, or replay any failures. These reasons are why we should use Cypress Studio to demonstrate best how these tests function.<\/p>\n\n\n\n<p>We begin running our cases by invoking the following from the project\u2019s root directory:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-sh\"><code class=\"\">npm run cypress-open<\/code><\/pre>\n\n\n\n<p>This operation opens Cypress Studio, where we can select what test suite to run:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1324\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests.png\" alt=\"The Cypress Studio dashboard, where we can select actions-page-spec.js\" class=\"wp-image-35721\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests.png 1824w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests-300x218.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests-1024x743.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests-768x557.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cypress-Studio-Actions-Tests-1536x1115.png 1536w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><figcaption class=\"wp-element-caption\"><em>Actions Tests in Cypress Studio<\/em><\/figcaption><\/figure>\n\n\n\n<p>To validate the result, we need to visit our <a href=\"https:\/\/eyes.applitools.com\/app\/test-results\/\">Applitools dashboard<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1577\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test.png\" alt=\"The Applitools dashboard, displaying the Remix Demo App test with the Action Page.\" class=\"wp-image-35722\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test-1024x807.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Dashboard-First-Test-1536x1211.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Basic Visual Test in the Applitools Dashboard<\/em><\/figcaption><\/figure>\n\n\n\n<p>To make it interesting, we can cause this test to fail by changing the text on the Actions page. We could change the heading to say \u201cFailed Actions!&#8221; instead of the original &#8220;Actions!&#8221; and re-run our test.&nbsp;<\/p>\n\n\n\n<p>This change will cause our original test case to fail because it will catch a difference in the UI (in our case, it\u2019s because of the intentional renaming of the heading). This error message is what we will see in the Cypress Studio:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1394\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio.png\" alt=\"Cypress Studio showing a red error message that reads, in part: &quot;Eyes-Cypress detected diffs or errors during execution of visual tests.&quot;\" class=\"wp-image-35727\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio-300x209.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio-1024x714.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio-768x535.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Failed-Visual-Test-Cypress-Studio-1536x1071.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Failed Visual Test in Cypress Studio<\/em><\/figcaption><\/figure>\n\n\n\n<p>To further deal with this failure, we need to visit the Applitools dashboard:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1577\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test.png\" alt=\"Applitools dashboard showing the latest test results as &quot;Unresolved.&quot;\" class=\"wp-image-35729\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test-1024x807.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-dashboard-failed-test-1536x1211.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Failed Visual Test in Applitools Dashboard<\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>As we can see, the latest test run is shown as <em>Unresolved<\/em>, and we might need to resolve the failure. To see what the difference in the newest test run is, we only need to click on the image in question:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1577\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test.png\" alt=\"A closer look at the Applitools visual test results, highlighting the areas where the text changed in magenta.\" class=\"wp-image-35728\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test-1024x807.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Applitools-Closer-look-at-failed-test-1536x1211.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Closer Look at the Failed Test in Applitools Dashboard<\/em><\/figcaption><\/figure>\n\n\n\n<p>A great thing about Applitools is that their visual AI algorithm is so advanced that it can test our application on different levels to detect content changes as well as layout or color updates. What\u2019s especially important is that Applitools&#8217; algorithm prevents false positives with built-in functionalities like ignoring content changes for apps with dynamic content.&nbsp;<\/p>\n\n\n\n<p>In our case, the test correctly shows that the heading changed, and it\u2019s now up to us to either accept the new UI or reject it and call this failure a legitimate bug. Applitools makes it easy to choose the correct course of action as we only need to press thumbs up to accept the test result or thumbs down to decline it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"808\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results-1024x808.png\" alt=\"\" class=\"wp-image-53308\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results-1024x808.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results-1536x1212.png 1536w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2023\/12\/cross_browser_cypress_results.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><em>Accepting or Rejecting Test Run in Applitools Dashboard<\/em><\/p>\n\n\n\n<p>In our case, the test case failed due to a visual bug that we introduced by \u201cunintentionally\u201d updating the heading.&nbsp;<\/p>\n\n\n\n<p>After finishing our work in the Applitools Dashboard, we can bring the test results back to the developers and file a bug on whoever made the UI change.<\/p>\n\n\n\n<p>But are we done? What about testing our web app on different browsers and devices? Fortunately, Applitools has a solution to quickly scale the tests automation and add cross-browser coverage.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-scaling-visual-tests-across-browsers\">Scaling Visual Tests Across Browsers<\/h4>\n\n\n\n<p>Testing an application against one browser is great, but what about all others? We have checked our Remix app on Chrome, but we didn\u2019t see how the app performs on Firefox, Microsoft Edge, and so on. We haven\u2019t even started looking into mobile platforms and our web app on Android or iOS. Introducing this additional test coverage can get out of hand quickly, but not with Applitools and their <a href=\"https:\/\/app14743.cloudwayssites.com\/product-ultrafast-test-cloud\/\">Ultrafast Test Cloud<\/a>. It\u2019s just one configuration change away!<\/p>\n\n\n\n<p>With <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\">this cloud solution<\/a> from Applitools, we can test our app across different browsers without any additional code. We only have to update our Applitools configuration file, <code>applitools.config.js<\/code>.<\/p>\n\n\n\n<p>Below is an example of how to add coverage for desktop browsers like Chrome, Firefox, Safari and E11, plus two extra test cases for different models of mobile phones:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code class=\"\">module.exports = {\n  testConcurrency: 1,\n  apiKey: \"DONT_SHARE_YOUR_APPLITOOLS_API_KEY\",\n  browser: [\n    \/\/ Add browsers with different viewports\n    { width: 800, height: 600, name: \"chrome\" },\n    { width: 700, height: 500, name: \"firefox\" },\n    { width: 1600, height: 1200, name: \"ie11\" },\n    { width: 800, height: 600, name: \"safari\" },\n    \/\/ Add mobile emulation devices in Portrait or Landscape mode\n    { deviceName: \"iPhone X\", screenOrientation: \"landscape\" },\n    { deviceName: \"Pixel 2\", screenOrientation: \"portrait\" },\n  ],\n  \/\/ set batch name to the configuration\n  batchName: \"Remix Demo App\",\n};\n<\/code><\/pre>\n\n\n\n<p>It&#8217;s important to note that when specifying the configuration for different browsers, we need to define their <code>width<\/code> and <code>height<\/code>, with an additional property for <code>screenOrientation<\/code> to cover non-desktop devices. These settings are critical for testing <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/webinar-recording-advanced-techniques-for\/\">responsive apps<\/a> because many modern websites visually differ depending on the devices our customers use.<\/p>\n\n\n\n<p>After updating the configuration file, we need to re-run our test suite with <code>npm test<\/code>. Fortunately, with the Applitools Ultrafast Test Cloud, it only takes a few seconds to finish running our tests on all browsers, so we can visit our Applitools Dashboard to view the results right away:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1577\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools.png\" alt=\"The Applitools dashboard, showing passed tests for our desired suite of browsers.\" class=\"wp-image-35735\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools-1024x807.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Cross-Browser-coverage-for-Applitools-1536x1211.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Cross-browser Coverage with Applitools<\/em><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"1577\" src=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools.png\" alt=\"The Applitools dashboard, showing a visual checkpoint with a Pixel 2 mobile phone in portrait orientation.\" class=\"wp-image-35736\" srcset=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools.png 2000w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools-300x237.png 300w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools-1024x807.png 1024w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools-768x606.png 768w, https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Mobile-Results-for-Applitools-1536x1211.png 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><figcaption class=\"wp-element-caption\"><em>Mobile Coverage with Applitools<\/em><\/figcaption><\/figure>\n\n\n\n<p>As we can see, with only a few lines in the configuration file, we scaled our visual tests across multiple devices and browsers. We save ourselves time and money whenever we can get extra test coverage without explicitly writing new cases. Maintaining test automation that we write is one of the most resource-consuming steps of the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Systems_development_life_cycle\">Software Development Life Cycle<\/a>. With solutions like Applitools Ultrafast Test Cloud, we can write fewer tests while increasing our test coverage for the entire app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-verdict-can-remix-apps-be-visually-tested-with-applitools-and-cypress\">Verdict: Can Remix Apps be Visually Tested with Applitools and Cypress?<\/h2>\n\n\n\n<p>Hopefully, this article showed that the answer is yes; we can successfully visually test Remix-based apps with Applitools and Cypress!&nbsp;<\/p>\n\n\n\n<p>Remix is a fantastic framework to take User Experience to the next level, and we invite you to learn more about it during the webinar by <a href=\"https:\/\/app14743.cloudwayssites.com\/excellent-ux-with-remix-webinar\/\">Kent C. Dodds \u201cBuilding Excellent User Experiences with Remix\u201d<\/a>.<\/p>\n\n\n\n<p>For more information about Applitools, visit <a href=\"https:\/\/app14743.cloudwayssites.com\/\">their website<\/a>, <a href=\"https:\/\/app14743.cloudwayssites.com\/blog\/\">blog<\/a> and <a href=\"https:\/\/www.youtube.com\/c\/Applitools\">YouTube channel<\/a>. They also provide free courses through <a href=\"https:\/\/testautomationu.applitools.com\/\">Test Automation University<\/a> that can help take anyone&#8217;s testing skills to the next level.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.<\/p>\n","protected":false},"author":102,"featured_media":35770,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[12271],"tags":[10050,10103,16711,12690,10821,16642,12686,16692],"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 Visually Test a Remix App with Applitools and Cypress - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.\" \/>\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\/how-to-visually-test-remix-app-applitools-cypress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Visually Test a Remix App with Applitools and Cypress\" \/>\n<meta property=\"og:description\" content=\"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-22T20:59:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T18:25:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.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=\"Dmitry Vinnik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dmitry Vinnik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\"},\"author\":{\"name\":\"Dmitry Vinnik\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/301992443be308a1324ea761e5977770\"},\"headline\":\"How to Visually Test a Remix App with Applitools and Cypress\",\"datePublished\":\"2022-03-22T20:59:50+00:00\",\"dateModified\":\"2023-12-01T18:25:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\"},\"wordCount\":2804,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg\",\"keywords\":[\"Cross-browser Testing\",\"Mobile App Testing\",\"Remix\",\"Test Engineers\",\"Tutorial\",\"visual testing\",\"Visual Testing Strategies\",\"web testing\"],\"articleSection\":[\"Getting Started\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\",\"name\":\"How to Visually Test a Remix App with Applitools and Cypress - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg\",\"datePublished\":\"2022-03-22T20:59:50+00:00\",\"dateModified\":\"2023-12-01T18:25:40+00:00\",\"description\":\"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#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 Visually Test a Remix App with Applitools and Cypress\"}]},{\"@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\/301992443be308a1324ea761e5977770\",\"name\":\"Dmitry Vinnik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/09738f15846edb09e70bd59cf41f030e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/09738f15846edb09e70bd59cf41f030e?s=96&d=mm&r=g\",\"caption\":\"Dmitry Vinnik\"},\"description\":\"Dmitry is a Developer Advocacy Consultant at Proactive DevRel. His goal is to help developers be more productive through open source. Dmitry continues being a developer-first, so he applies the same mindset and passion when working on open source projects, creating new educational content, or giving conference talks. Dmitry has a background in medicine and bioinformatics, but these days he is more interested in understanding developer wellness and work-life balance.\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/dmitryvinnik\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Visually Test a Remix App with Applitools and Cypress - AI-Powered End-to-End Testing | Applitools","description":"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.","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\/how-to-visually-test-remix-app-applitools-cypress\/","og_locale":"en_US","og_type":"article","og_title":"How to Visually Test a Remix App with Applitools and Cypress","og_description":"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2022-03-22T20:59:50+00:00","article_modified_time":"2023-12-01T18:25:40+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg","type":"image\/jpeg"}],"author":"Dmitry Vinnik","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dmitry Vinnik","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/"},"author":{"name":"Dmitry Vinnik","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/301992443be308a1324ea761e5977770"},"headline":"How to Visually Test a Remix App with Applitools and Cypress","datePublished":"2022-03-22T20:59:50+00:00","dateModified":"2023-12-01T18:25:40+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/"},"wordCount":2804,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg","keywords":["Cross-browser Testing","Mobile App Testing","Remix","Test Engineers","Tutorial","visual testing","Visual Testing Strategies","web testing"],"articleSection":["Getting Started"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/","name":"How to Visually Test a Remix App with Applitools and Cypress - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg","datePublished":"2022-03-22T20:59:50+00:00","dateModified":"2023-12-01T18:25:40+00:00","description":"Is Remix too new to be visually tested? Let\u2019s find out with Applitools and Cypress.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/Remix-and-Applitools-Love_831x542.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/how-to-visually-test-remix-app-applitools-cypress\/#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 Visually Test a Remix App with Applitools and Cypress"}]},{"@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\/301992443be308a1324ea761e5977770","name":"Dmitry Vinnik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/09738f15846edb09e70bd59cf41f030e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/09738f15846edb09e70bd59cf41f030e?s=96&d=mm&r=g","caption":"Dmitry Vinnik"},"description":"Dmitry is a Developer Advocacy Consultant at Proactive DevRel. His goal is to help developers be more productive through open source. Dmitry continues being a developer-first, so he applies the same mindset and passion when working on open source projects, creating new educational content, or giving conference talks. Dmitry has a background in medicine and bioinformatics, but these days he is more interested in understanding developer wellness and work-life balance.","url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/dmitryvinnik\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/35712"}],"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\/102"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=35712"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/35712\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/35770"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=35712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=35712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=35712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}