{"id":34121,"date":"2022-02-04T09:37:50","date_gmt":"2022-02-04T17:37:50","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=34121"},"modified":"2022-07-21T07:24:34","modified_gmt":"2022-07-21T14:24:34","slug":"cross-browser-tests-cypress-all-browsers","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/","title":{"rendered":"How to Run Cross Browser Tests with Cypress on All Browsers"},"content":{"rendered":"\n

Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.<\/em><\/p>\n\n\n\n

Ah, Cypress \u2013 the darling end-to-end test framework of the JavaScript world. In the past few years, Cypress<\/a> has surged in popularity due to its excellent developer experience. It runs right in the browser alongside web apps, making it a natural fit for frontend developers. Its API is both concise and powerful. Its interactions automatically handle waiting to avoid any chance of flakiness. Cypress almost seems like a strong contender to dethrone Selenium WebDriver<\/a> as the king of browser automation tools.<\/p>\n\n\n\n

However, Cypress has a critical weakness: it cannot natively run tests against all<\/em> browser types. At the time of writing this article, Cypress supports only a limited set of browsers<\/a>: Chrome, Edge, and Firefox. That means no support for Safari or IE. Cypress also doesn\u2019t support mobile web browsers. Ouch! These limitations alone could make you think twice about choosing to automate your tests in Cypress.<\/p>\n\n\n\n

Thankfully, there is<\/em> a way to run Cypress tests against any<\/em> browser type, including Safari, IE, and mobile browsers: using Applitools Ultrafast Test Grid<\/a>. With the help of Applitools, you can achieve full cross-browser testing<\/a> with Cypress, even for large-scale test suites. Let\u2019s see how it\u2019s done. We\u2019ll start with a basic Cypress test, and then we\u2019ll add visual snapshots that can be rendered in any browser in the Applitools cloud.<\/p>\n\n\n\n

Defining a Test Case<\/h2>\n\n\n\n

Let\u2019s define a basic web app login test for the Applitools demo site<\/a>. The site mimics a basic banking app. The first page is a login screen:<\/p>\n\n\n\n

\"Demo<\/figure>\n\n\n\n

You can enter any username or password to login. Then, the main page appears:<\/p>\n\n\n\n

\"Demo<\/figure>\n\n\n\n

Nothing fancy here. The steps for our test case are straightforward:<\/p>\n\n\n\n

Scenario: Successful login\n  Given the login page is displayed\n  When the user enters their username and password\n  And the user clicks the login button\n  Then the main page is displayed\n<\/code><\/pre>\n\n\n\n
These steps would be the same for the login behavior of any other application.<\/p>\n\n\n\n
Automating a Cypress Test<\/h2>\n\n\n\n
Let\u2019s automate our login test using Cypress. Create a JavaScript project and install Cypress<\/a>. Then, create a new test case spec: cypress\/integration\/login.spec.js<\/code>. Add the following test case to the spec file:<\/p>\n\n\n\n
describe('Login', () => {\n\n    beforeEach(() => {\n        cy.viewport(1600, 1200)\n    })\n\n    it('should log into the demo app', () => {\n        loadLoginPage()\n        verifyLoginPage()\n        performLogin()\n        verifyMainPage()\n    })\n})\n<\/code><\/pre>\n\n\n\n
Cypress uses Mocha<\/a> as its core test framework. The beforeEach <\/code>call makes sure the browser viewport is large enough to show all elements in the demo app. The test case itself has a helper function for each test step.<\/p>\n\n\n\n
The first function, loadLoginPage<\/code>, loads the login page:<\/p>\n\n\n\n
function loadLoginPage() {\n    cy.visit('https:\/\/demo.applitools.com')\n}\n<\/code><\/pre>\n\n\n\n
The second function, verifyLoginPage<\/code>, makes sure that the login page loads correctly:<\/p>\n\n\n\n
function verifyLoginPage() {\n    cy.get('div.logo-w').should('be.visible')\n    cy.get('#username').should('be.visible')\n    cy.get('#password').should('be.visible')\n    cy.get('#log-in').should('be.visible')\n    cy.get('input.form-check-input').should('be.visible')\n}\n<\/code><\/pre>\n\n\n\n
The third function, performLogin<\/code>, actually does the interaction of logging in:<\/p>\n\n\n\n
function performLogin() {\n    cy.get('#username').type('andy')\n    cy.get('#password').type('i<3pandas')\n    cy.get('#log-in').click()\n}\n<\/code><\/pre>\n\n\n\n
The fourth and final function, verifyMainPage<\/code>, makes sure that the main page loads correctly:<\/p>\n\n\n\n
function verifyMainPage() {\n\n    \/\/ Check various page elements\n    cy.get('div.logo-w').should('be.visible')\n    cy.get('div.element-search.autosuggest-search-activator > input').should('be.visible')\n    cy.get('div.avatar-w img').should('be.visible')\n    cy.get('ul.main-menu').should('be.visible')\n    cy.contains('Add Account').should('be.visible')\n    cy.contains('Make Payment').should('be.visible')\n    cy.contains('View Statement').should('be.visible')\n    cy.contains('Request Increase').should('be.visible')\n    cy.contains('Pay Now').should('be.visible')\n\n    \/\/ Check time message\n    cy.get('#time').invoke('text').should('match', \/Your nearest branch closes in:( \\d+[hms])+\/)\n\n    \/\/ Check menu element names\n    cy.get('ul.main-menu li span').should(items => {\n        expect(items[0]).to.contain.text('Card types')\n        expect(items[1]).to.contain.text('Credit cards')\n        expect(items[2]).to.contain.text('Debit cards')\n        expect(items[3]).to.contain.text('Lending')\n        expect(items[4]).to.contain.text('Loans')\n        expect(items[5]).to.contain.text('Mortgages')\n    })\n\n    \/\/ Check transaction statuses\n    const statuses = ['Complete', 'Pending', 'Declined']\n    cy.get('span.status-pill + span').each(($span, index) => {\n        expect(statuses).to.include($span.text())\n    })\n}\n<\/code><\/pre>\n\n\n\n
The first three functions are fairly concise, but the fourth one is a doozy. The main page has so many things to check, and despite its length, this step doesn\u2019t even check everything!<\/p>\n\n\n\n
Run this test locally to make sure it works (npx cypress open<\/code>). It should pass using any local browser (Chrome, Edge, Electron, or Firefox).<\/p>\n\n\n\n
Introducing Visual Snapshots<\/h2>\n\n\n\n
You could run this login test on your local machine or from your Continuous Integration (CI) service, but in its present form, it can\u2019t run on those extra browsers (Safari, IE, mobile). To do that, we need the help of visual testing techniques using Applitools Visual AI and the Ultrafast Test Cloud.<\/p>\n\n\n\n
Visual testing<\/a> is the practice of inspecting visual differences between snapshots of screens in the app you are testing. You start by capturing a \u201cbaseline\u201d snapshot of, say, the login page to consider as \u201cright\u201d or \u201cexpected.\u201d Then, every time you run the tests, you capture a new snapshot of the same page and compare it to the baseline. By comparing the two snapshots side-by-side, you can detect any visual differences. Did a button go missing? Did the layout shift to the left? Did the colors change? If nothing changes, then the test passes. However, if there are changes, a human tester should review the differences to decide if the change is good or bad.<\/p>\n\n\n\n
Manual testers have done visual testing since the dawn of computer screens. Applitools Visual AI<\/a> simply automates the process. It highlights differences in side-by-side snapshots so you don\u2019t miss them. Furthermore, Visual AI focuses on meaningful changes that human eyes would notice. If an element shifts one pixel to the right, that\u2019s not a problem<\/a>. Visual AI won\u2019t bother you with that noise.<\/p>\n\n\n\n
If a picture is worth a thousand words, then a visual snapshot is worth a thousand assertions.<\/strong> We could update our login test to take visual snapshots using Applitools Eyes SDK<\/a> in place of lengthy assertions. Visual snapshots provide stronger coverage than the previous assertions. Remember how verifyMainPage<\/code> had several checks but still didn\u2019t cover all the elements on the page? A visual snapshot would implicitly capture everything with only one line of code. Visual testing like this enables more effective functional testing than traditional assertions.<\/p>\n\n\n\n
But back to the original problem: how does this enable us to run Cypress tests in Safari, IE, and mobile browsers? That\u2019s the magic of snapshots. Notice how I said \u201csnapshot\u201d and not \u201cscreenshot.\u201d A screenshot<\/em> is merely a grid of static pixels. A snapshot<\/em>, however, captures full page content \u2013 HTML, CSS, and JavaScript \u2013 that can be re-rendered in any browser configuration. If we update our Cypress test to take visual snapshots of the login page and the main page, then we could run our test one time locally to capture the snapshots, Then, the Applitools Eyes SDK would upload the snapshots to the Applitools Ultrafast Test Cloud<\/a> to render them in any target browser \u2013 including browsers not natively supported by Cypress \u2013 and compare them against baselines. All the heavy work for visual checkpoints would be done by the Applitools Ultrafast Test Cloud, not by the local machine. It also works fast, since re-rendering snapshots takes much less time than re-running full Cypress tests.<\/p>\n\n\n\n
Updating the Cypress Test<\/h2>\n\n\n\n
Let\u2019s turn our login test into a visual test. First, make sure you have an Applitools account. You can register for a free account<\/a> to get started.<\/p>\n\n\n\n
Your account comes with an API key. Visual tests using Applitools Eyes need this API key for uploading results to your account. On your machine, set this key as an environment variable.<\/p>\n\n\n\n
On Linux and macOS:<\/p>\n\n\n\n
$ export APPLITOOLS_API_KEY=<value><\/code><\/pre>\n\n\n\n
On Windows:<\/p>\n\n\n\n
> set APPLITOOLS_API_KEY=<value><\/code><\/pre>\n\n\n\n
Time for coding! The test case steps remain the same, but the test case must be wrapped by calls to Applitools Eyes:<\/p>\n\n\n\n
describe('Login', () => {\n\n    it('should log into the demo app', () => {\n\n        cy.eyesOpen({\n            appName: 'Applitools Demo App',\n            testName: 'Login',\n        })\n\n        loadLoginPage()\n        verifyLoginPage()\n        performLogin()\n        verifyMainPage()\n    })\n\n    afterEach(() => {\n        cy.eyesClose()\n    })\n})\n<\/code><\/pre>\n\n\n\n
Before the test begins, cy.eyesOpen(...)<\/code> tells Applitools Eyes to start watching the browser. It also sets names for the app under test and the test case itself. Then, at the conclusion of the test, cy.eyesClose()<\/code> tells Applitools Eyes to stop watching the browser.<\/p>\n\n\n\n
The interaction functions, loadLoginPage <\/code>and performLogin<\/code>, do not need any changes. The verification functions do:<\/p>\n\n\n\n
function verifyLoginPage() {\n    cy.eyesCheckWindow({\n        tag: \"Login page\",\n        target: 'window',\n        fully: true\n    });\n}\n\nfunction verifyMainPage() {\n    cy.eyesCheckWindow({\n        tag: \"Main page\",\n        target: 'window',\n        fully: true,\n        matchLevel: 'Layout'\n    });\n}\n<\/code><\/pre>\n\n\n\n
All the assertion calls are replaced by one-line snapshots using Applitools Eyes. These snapshots capture the full window for both pages. The main page also sets a match level to \u201clayout\u201d so that differences in text and color are ignored.<\/p>\n\n\n\n
The test code changes are complete, but you need to do one more thing: you must specify browser configurations to test in the Applitools Ultrafast Test Cloud. Add a file named applitools.config.js<\/code> to the root level of the project, and add the following content:<\/p>\n\n\n\n
module.exports = {\n    testConcurrency: 5,\n    apiKey: 'APPLITOOLS_API_KEY',\n    browser: [\n        \/\/ Desktop\n        {width: 800, height: 600, name: 'chrome'},\n        {width: 700, height: 500, name: 'firefox'},\n        {width: 1600, height: 1200, name: 'ie11'},\n        {width: 1024, height: 768, name: 'edgechromium'},\n        {width: 800, height: 600, name: 'safari'},\n        \/\/ Mobile\n        {deviceName: 'iPhone X', screenOrientation: 'portrait'},\n        {deviceName: 'Pixel 2', screenOrientation: 'portrait'},\n        {deviceName: 'Galaxy S5', screenOrientation: 'portrait'},\n        {deviceName: 'Nexus 10', screenOrientation: 'portrait'},\n        {deviceName: 'iPad Pro', screenOrientation: 'landscape'},\n    ],\n    batchName: 'Modern Cross-Browser Testing Workshop'\n}\n<\/code><\/pre>\n\n\n\n
This config file contains four settings:<\/p>\n\n\n\n
  1. testConcurrency <\/code>sets the level of parallel execution in the Applitools Ultrafast Test Cloud. (Free accounts are limited to 1 concurrent test.)<\/li>
  2. apiKey <\/code>sets the environment variable name for the Applitools API key.<\/li>
  3. browser <\/code>declares a list of browser configurations to test. This config file provides ten total configs: five desktop, and five mobile. Notice that Safari and IE11 are included. Desktop browser configs include viewport sizes, while mobile browser configs include screen orientations.<\/li>
  4. batchName <\/code>sets a name that all results will share in the Applitools Dashboard.<\/li><\/ol>\n\n\n\n
    Done! Let\u2019s run the updated test.<\/p>\n\n\n\n
    Running our Cypress Cross Browser Test<\/h2>\n\n\n\n
    Run the test locally to make sure it works (npx cypress open<\/code>). Then, open the Applitools dashboard to view visual test results:<\/p>\n\n\n\n
    \"Applitools<\/figure>\n\n\n\n
    Notice how this one login test has one result for each target configuration. All results have “New” status because they are establishing baselines. Also, notice how little time it took to run this batch of tests:<\/p>\n\n\n
    \n
    \"Results<\/figure><\/div>\n\n\n
    Running our test across 10 different browser configurations with 2 visual checkpoints each at a concurrency level of 5 took only 36 seconds to complete. That\u2019s ultra fast! Running that many test iterations locally or in a traditional Cypress parallel environment<\/a> could take several minutes.<\/p>\n\n\n\n
    Run the test again. The second run should succeed just like the first. However, the new dashboard results now say “Passed” because Applitools compared the latest snapshots to the baselines and verified that they had not changed:<\/p>\n\n\n\n
    \"Applitools<\/figure>\n\n\n\n
    This time, all variations took 32 seconds to complete \u2013 about half a minute.<\/p>\n\n\n\n
    Passing tests are great, but what happens if a page changes? Consider an alternate version of the login page:<\/p>\n\n\n\n
    \"Demo<\/figure>\n\n\n\n
    This version has a broken icon and a different login button. Modify the loadLoginPage <\/code>function to test this version of the site like this:<\/p>\n\n\n\n
    function loadLoginPage() {\n    cy.visit('https:\/\/demo.applitools.com\/index_v2.html')\n}\n<\/code><\/pre>\n\n\n\n
    Now, when you rerun the test, results appear as “Unresolved” in the Applitools dashboard:<\/p>\n\n\n\n
    \"Applitools<\/figure>\n\n\n\n
    When you open each result, the dashboard will display visual comparisons for each snapshot. If you click the snapshot, it opens the comparison window:<\/p>\n\n\n\n
    \"Applitools<\/figure>\n\n\n\n
    The baseline snapshot appears on the left, while the latest checkpoint snapshot appears on the right. Differences will be highlighted in magenta. As the tester, you can choose to either accept the change as a new baseline or reject it as a failure.<\/p>\n\n\n\n
    Taking the Next Steps<\/h2>\n\n\n\n
    Even though Cypress can\u2019t natively run tests against Safari, IE, or mobile browsers, it can with visual testing with Applitools Ultrafast Test Cloud<\/a>. You can use Cypress tests to capture snapshots and then render them under any number of different browser configurations to achieve true cross-browser testing with visual and functional test coverage.<\/p>\n\n\n\n
    Want to see the full code? Check out this GitHub repository: applitools\/workshop-cbt-cypress<\/a>.<\/p>\n\n\n\n
    Want to try visual testing for yourself? Register for a free Applitools account<\/a>.<\/p>\n\n\n\n
    Want to see more examples? Check out other articles here<\/a>, here<\/a>, and here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.<\/p>\n","protected":false},"author":89,"featured_media":34144,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[10027,10050,10357,12690,10821,12686],"acf":[],"yoast_head":"\nHow to Run Cross Browser Tests with Cypress on All Browsers - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Run Cross Browser Tests with Cypress on All Browsers\" \/>\n<meta property=\"og:description\" content=\"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-04T17:37:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-21T14:24:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_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=\"Andrew Knight\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Knight\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\"},\"author\":{\"name\":\"Andrew Knight\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\"},\"headline\":\"How to Run Cross Browser Tests with Cypress on All Browsers\",\"datePublished\":\"2022-02-04T17:37:50+00:00\",\"dateModified\":\"2022-07-21T14:24:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\"},\"wordCount\":1674,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg\",\"keywords\":[\"Automated Visual Testing\",\"Cross-browser Testing\",\"Cypress\",\"Test Engineers\",\"Tutorial\",\"Visual Testing Strategies\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\",\"name\":\"How to Run Cross Browser Tests with Cypress on All Browsers - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg\",\"datePublished\":\"2022-02-04T17:37:50+00:00\",\"dateModified\":\"2022-07-21T14:24:34+00:00\",\"description\":\"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#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\":\"How to Run Cross Browser Tests with Cypress on All Browsers\"}]},{\"@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\/a8038d2c9ccd3531090422b6172b125b\",\"name\":\"Andrew Knight\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"caption\":\"Andrew Knight\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Run Cross Browser Tests with Cypress on All Browsers - AI-Powered End-to-End Testing | Applitools","description":"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/","og_locale":"en_US","og_type":"article","og_title":"How to Run Cross Browser Tests with Cypress on All Browsers","og_description":"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2022-02-04T17:37:50+00:00","article_modified_time":"2022-07-21T14:24:34+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg","type":"image\/jpeg"}],"author":"Andrew Knight","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andrew Knight","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/"},"author":{"name":"Andrew Knight","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b"},"headline":"How to Run Cross Browser Tests with Cypress on All Browsers","datePublished":"2022-02-04T17:37:50+00:00","dateModified":"2022-07-21T14:24:34+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/"},"wordCount":1674,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg","keywords":["Automated Visual Testing","Cross-browser Testing","Cypress","Test Engineers","Tutorial","Visual Testing Strategies"],"articleSection":["Advanced Topics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/","name":"How to Run Cross Browser Tests with Cypress on All Browsers - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg","datePublished":"2022-02-04T17:37:50+00:00","dateModified":"2022-07-21T14:24:34+00:00","description":"Learn how you can run cross-browser Cypress tests against any browser, including Safari, IE and mobile browsers.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/02\/cypress-cross-browser_831x542.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/cross-browser-tests-cypress-all-browsers\/#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":"How to Run Cross Browser Tests with Cypress on All Browsers"}]},{"@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\/a8038d2c9ccd3531090422b6172b125b","name":"Andrew Knight","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","caption":"Andrew Knight"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/34121"}],"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\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=34121"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/34121\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/34144"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=34121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=34121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=34121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}