How to Run Safari Test on Cypress?

Cypress has emerge as a cutting-edge front-end examination framework, contrive specifically to speak the challenges testers face with modern web applications—such as synchronization issues and flaky test results due to missing DOM elements.

Built on Node.js, Cypress ships as an npm software and runs tests direct in JavaScript. Thanks to its rich library of built-in commands, writing tests becomes simpler, fast, and easier to see yet for teams new to automation.

One of the most discussed aspects of Cypress testing is itscross-browser capabilities, especially when it comes to Safari. Since Safari accounts for nigh 20 % of planetary browser usage, check application act seamlessly on it is essential.

This guide research how to set up Cypress cross-browser examination, the challenges with Safari automation, and how BrowserStack make Cypress Safari testing reliable and scalable.

Cypress Cross-Browser Testing

is possible habituate several browsers. Firefox, WebKit (the browser engine used by Safari), and the Chrome home of browsers (including Electron and Chromium-based Microsoft Edge) are all endorse by Cypress at the moment.

• All browsers, with the exception of Electron, must be installed on your local machine or CI environs in order to in them.
• Within Cypress & # 8217; browser selection menu, a complete list of Cypress supported browsers is shown.
• When commence Cypress using the run command, you can additionally set the preferred browser by using the & # 8211; browser flag.

For instance, here & # 8217; s how to run Cypress tests in Firefox:

cypress run -- browser firefox

Using npm scriptsas a cutoff enables Cypress to be launched with a particular browser even more speedily and easily:

`` book '': {'' test: cypress: chrome '': `` cypress run -- browser chrome '', '' exam: cypress: firefox '': `` cypress run -- browser firefox ''}

Activating Browsers

When you do examination in Cypress, Cypress automatically launch a browser. Consequently, we can:

• Establish a spotless, staring testing environs.
• For mechanization, use the privileged browser APIs.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

When Cypress first launches, you can select to test your application using a variety of browsers, such as:

• Chrome
• Chrome Beta
• Chrome Canary
• Chromium
• Edge
• Edge Beta
• Edge Canary
• Edge Dev
• Electron
• Firefox
• Firefox Developer Edition
• Firefox Nightly
• WebKit (Experimental)

Cypress would automatically place the useable browser on your OS. There may be multiplication when the leaning of browsers found prior to testing has to be modified. Your web covering could, for instance, only be intended to function in the Chrome browser and not the Electron browser.

The list of browsers supply inside the config object may be filtered, and the setupNodeEvents part allows you to return the list of browser you wish to be available for pick when Cypress opens.

const {defineConfig} = require ('cypress ') module.exports = defineConfig ({e2e: {configureNodeEvents (on, cfg) {return {browser: cfg.browsers.filter ((browser) = & gt; browser.family === 'chromium ' & amp; & amp; browser.name! == 'electron'),}},},})

The list of accessible browsers will no longer include Electron when you open Cypress in a project that makes use of the aforementioned changes to the setupNodeEvents method.

Testing against Safari is Challenging

The second most widely used web browser globally, Safari get pre-installed on all Apple devices. Even though Safari is extensively used, for it or the WebKit engine that motor it is still hard, especially in comparison to the relative ease of early wide used browsers like Chrome, Firefox, and Edge.

• The fact that Safari & # 8217; s engine and browser are exclusively available on Apple devices is one of the biggest obstacles for developers seeking to.
• Although there are workarounds for utilizing non-Apple hardware, including project for running macOS software inside Docker container, all of these workarounds are against Apple & # 8217; s End User License Agreement (EULA) and Terms of Service (TOS).
• On any device that is not & # 8220; Apple branded, & # 8221; Apple forbids the usage of any MacOS software.
• As a intellect, any tool that runs Safari (for testing or otherwise) on ironware that isn & # 8217; t Apple & # 8217; s is in misdemeanour of this permit.
• There is likewise no official Safari browser for Linux because Safari is simply plan to operate on macOS hardware.
• This means that any container for Safari that you would discover in the Docker registry will be a WebKit-based browser for Linux rather than the official Safari for macOS.

Although these WebKit browser could have some traits in common with Safari, it & # 8217; s crucial to accurately compare them to the macOS version of the official Safari app.

Having said that, there are ways to perform automated tests on Safari, such as virtualization alternatives that stick to Apple & # 8217; s license standards.

Does Cypress work on Safari?

Nearly 20 % of all internet exploiter are using Apple & # 8217; s Safari browser. Cypress users get access to the WebKit browser engine for Cypress Safari testing.

• Running your current Cypress Safari tests in WebKit will insure that your web application is error-free and functions as expected.
• Cypress offers experimental support for WebKit. You should test your app using WebKit to see how it behaves in Safari.

Follow these measure to enroll for experimental WebKitSupport:

• Activate the experiment by adding experimentalWebKitSupport: true to your configuration.

cypress.config.ts import {defineConfig} from 'cypress' export default defineConfig ({experimentalWebKitSupport: true // the rest of the config settings})

• To get WebKit itself, install the playwright-webkit NPM package in your repository

npm install -- save-dev playwright-webkit.

(As a first step toward evolve a better UX using browser offered by Cypress in the hereafter, Cypress constructed this experimentation on top of the Playwright WebKit browser.)

• Install extra habituation with the below command if you & # 8217; re using a Linux system.:

npx playwright install-deps webkit

• In Cypress, you can register your undertaking & # 8217; s examination. Moving forward, you should be able to use WebKit exactly like you would any other browser.
• For instance, to record apply WebKit in CI:

cypress run -- browser webkit -- record # …

Cypress uses yourprojectId and Record Keytogether to uniquely identify each project.

• Using Test Runner, launch the Webkit (Safari Engine) browser: You will mark an additional WebKit option in the runner after installing the WebKit package. As with other browser, you may run your examination.

WebKit support is in observational fashion, so issues might occur. If you encounter an number that isn & # 8217; t listed under & # 8220; Known Issues, & # 8221; kindly posit an issue on theGitHub repository.

Cypress Safari Testing on BrowserStack

Cypress testing is supported on using WebKit, the browser locomotive utilise by Safari. Now, QA teams can savvy how their web applications will work on Safari using Cypress.

Limitations

• Cypress edition & # 8211; 10.8 or afterwards

Supported OSs and Safari browser versions

• OS X Ventura & # 8211; 16.0, 15.4, 15.0 (latest, latest-1, latest-2)
• OS X Monterey & # 8211; 16.0, 15.4, 15.0 (up-to-the-minute, latest-1, latest-2)
• OS X Big Sur & # 8211; 16.0, 15.4, 15.0 (late, latest-1, latest-2)
• Windows 11 & # 8211; 16.0 (modish)
• Windows 10 & # 8211; 16.0, 15.4 (latest, latest-1)

Closing Notes

You can be sure that your web application is error-free and functions as intended for Safari users by running your current Cypress tests in WebKit. Due to its prominent development experience, Cypress has recently seen a spike in popularity. It runs directly in the browser alongside web applications, making front-end developers confident with it.

Related Guides