{"id":16794,"date":"2019-12-11T23:24:00","date_gmt":"2019-12-11T23:24:00","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/blog\/?p=6794"},"modified":"2020-08-26T18:31:35","modified_gmt":"2020-08-26T18:31:35","slug":"cypress-cross-browser-testing","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/cypress-cross-browser-testing\/","title":{"rendered":"Cross-browser Testing With Cypress.io"},"content":{"rendered":"

Cypress.io<\/a> lets you test user interface design directly in the browser. But, Cypress only runs with Chrome<\/a>. How do you do Cypress cross-browser testing?<\/p>\n

Visual testing and cross-browser testing go hand-in-hand. With this tag team, your power to create superior, consistent, and pleasing Graphical User Interfaces (GUI) for your applications across a wide array of devices, and browsers, will seem like child’s play!<\/p>\n

The huge wave of devices, operating systems, browsers, and screen resolutions flooding the market make Visual and cross-browser testing an essential constituent of any software development life-cycle. This ensures the stability of your UX designs across all of these devices.<\/p>\n

Two leading tools in the field of software testing are Cypress.io and Applitools. Cypress.io is an open-source framework best known for its tools that help developers write integration and End-to-End (E2E) testing. Applitools, on the other hand, integrates with Cypress.io, giving testers, and developers, a chance to upgrade their test scripts into Visual ones.<\/p>\n

While Cypress.io lacks support for cross-browser testing, Applitools supports it via their Applitools Ultrafast Grid.<\/a><\/p>\n

You can combine the best of both worlds by using Cypress.io to write your integration and E2E tests and letting Applitools Ultrafast Grid handle cross-browser testing for you.<\/p>\n

My goal, in this article, is to take you through a step-by-step guide that will include:<\/p>\n

    \n
  1. Writing a Cypress.io E2E test.<\/li>\n
  2. Running the E2E test locally using Google Chrome.<\/li>\n
  3. Converting the E2E test into a Visual test using Applitools Eyes Cypress SDK<\/a>.<\/li>\n
  4. Running the Visual test across multiple browsers via the Applitools Ultrafast Grid.<\/li>\n<\/ol>\n

    Let\u2019s start!<\/p>\n

    Welcome to Cypress.io<\/h2>\n

    Cypress.io gives you a complete end-to-end testing experience by providing you with the right tools to set up your testing environment locally, write E2E tests, run the tests, and record them. It has been written from the ground-up without any dependency on other tools like Selenium.<\/p>\n

    To learn and use Cypress.io, I suggest watching the course Introduction to Cypress<\/a> by Gil Tayar as he covers all the necessary information you need to get started using Cypress.io.<\/p>\n

    Show me an E2E test<\/h3>\n

    I won\u2019t keep you waiting any longer. Here\u2019s a sample E2E test I wrote in Cypress.io:<\/p>\n