How to Run Safari Test on Cypress?

A cutting-edge front-end testing tool for the modern web is Cypress. The key challenges that testers face when conducting their testing were the inspiration for the development of Cypress. For instance, synchronization issues and inconsistent test outcomes brought on by elements not found in the DOM.

The Node.js-based Cypress is pre-packaged as an npm module. Because Cypress is based on node.js, all of the tests we write using it are written in JavaScript. The majority of the coding may, however, be done using Cypress’ built-in commands because they are much easier to understand.

Cypress Cross-Browser Testing

Cypress cross browser testing is possible using several browsers. Firefox, WebKit (the browser engine used by Safari), and the Chrome family of browsers (including Electron and Chromium-based Microsoft Edge) are all supported by Cypress at the moment.

• All browsers, with the exception of Electron, must be installed on your local machine or CI environment in order to run Cypress tests in them. 
• Within Cypress’ browser selection menu, a complete list of Cypress supported browsers is shown. 
• When starting Cypress using the run command, you can additionally specify the preferred browser by using the–browser flag. 

For instance, here’s how to run Cypress tests in Firefox:

cypress run --browser firefox

Using npm scripts as a shortcut enables Cypress to be launched with a particular browser even more quickly and easily:

"scripts": {
"test:cypress:chrome": "cypress run --browser chrome",
"test:cypress:firefox": "cypress run --browser firefox"
}

Activating Browsers

When you do tests in Cypress, Cypress automatically launches a browser. Consequently, we can:

• Establish a spotless, perfect testing environment.
• For automation, use the privileged browser APIs.

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 identify the available browsers on your OS. There may be times when the list of browsers found prior to testing has to be modified. Your web application could, for instance, only be intended to function in the Chrome browser and not the Electron browser.

The list of browsers provided inside the config object may be filtered, and the setupNodeEvents function allows you to return the list of browsers you wish to be available for selection when Cypress opens.

const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
configureNodeEvents(on, cfg) {
return {
browsers: cfg.browsers.filter(
(browser) => browser.family === 'chromium' && 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 comes pre-installed on all Apple devices. Even though Safari is extensively used, overcoming test automation challenges for it or the WebKit engine that drives it is still difficult, especially in comparison to the relative ease of other widely used browsers like Chrome, Firefox, and Edge. 

• The fact that Safari’s engine and browser are exclusively available on Apple devices is one of the biggest obstacles for developers seeking to test on Safari. 
• Although there are workarounds for utilizing non-Apple hardware, including projects for running macOS software inside Docker containers, all of these workarounds are against Apple’s End User License Agreement (EULA) and Terms of Service (TOS). 
• On any device that is not “Apple branded,” Apple forbids the usage of any MacOS software. 
• As a reason, any tool that runs Safari (for testing or otherwise) on hardware that isn’t Apple’s is in violation of this license.
• There is also no official Safari browser for Linux because Safari is only designed to function 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 browsers could have some traits in common with Safari, it’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 adhere to Apple’s license standards.

Does Cypress work on Safari?

Nearly 20% of all internet users are using Apple’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 ensure 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 steps 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 developing a better UX using browsers offered by Cypress in the future, Cypress constructed this experiment on top of the Playwright WebKit browser.)

• Install extra dependencies with the below command if you’re using a Linux system.:

npx playwright install-deps webkit

• In Cypress, you can record your project’s tests. Moving forward, you should be able to use WebKit just like you would any other browser. 
• For instance, to record using WebKit in CI:

 cypress run --browser webkit --record # …

Cypress uses your projectId and Record Key together to uniquely identify each project.

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

WebKit support is in experimental mode, so issues might occur. If you encounter an issue that isn’t listed under “Known Issues,” kindly submit an issue on the GitHub repository.

Cypress Safari Testing on BrowserStack 

Cypress testing is supported on BrowserStack Automate using WebKit, the browser engine used by Safari. Now, QA teams can grasp how their web applications will work on Safari using Cypress.

Limitations

• Cypress versions – 10.8 or later

Supported OSs and Safari browser versions

• OS X Ventura – 16.0, 15.4, 15.0 (latest, latest-1, latest-2)
• OS X Monterey – 16.0, 15.4, 15.0 (latest, latest-1, latest-2)
• OS X Big Sur – 16.0, 15.4, 15.0 (latest, latest-1, latest-2)
• Windows 11 – 16.0 (latest)
• Windows 10 – 16.0, 15.4 (latest, latest-1)

Run Safari Test on Cypress

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 outstanding 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.