Safari (WebKit) Support

[amirrustam]

Current Status - last updated August 4, 2022

✅ Prioritized and on the roadmap
✅ Doing exploratory work to assess requirements and timelines
✅ Under active development
ℹ️ Cypress currently supports Firefox and Chrome-family browsers (including Edge and Electron).

Objective

Add support for running Cypress tests within WebKit, which is the engine used by the Safari web browser.

Task List

• Initial PR to add development-only support: chore: WebKit support (development-only) #15533
• Fix required driver/other functionality
  • Network functionality chore(webkit): fix WebKit network-related driver tests #23232
  • Keyboard tests (type*.cy.js) chore(webkit): driver updates for clicking/typing actions and related tests #23522
  • Input tests (click.cy.js, focus tests...) chore(webkit): driver updates for clicking/typing actions and related tests #23522
  • Stack traces chore(webkit): update error stack parsing and related system tests #23730
  • Check component testing
  • Video recording chore(webkit): add video recording #23579
  • Handle downloads chore(webkit): add before:browser:launch and download support #23662
  • Fix global mode detection of npm module feat: gate WebKit behind experimentalWebKitSupport in prod #23711
  • Fix open mode close chore(webkit): add before:browser:launch and download support #23662
  • Disable forceNetworkError feat: gate WebKit behind experimentalWebKitSupport in prod #23711
  • Fix cross-origin unhandledRejection events: chore(webkit): working around WebKit bug by patching Error #23588
• Possibly fix less critical functionality
  • "Network" GraphQL error fix experimentalWebKitSupport: Fix "[Network] undefined" error in dev #23809
  • Multi-domain implementation feat(webkit): fix multidomain driver tests in WebKit #23442
  • Fix websocket polling/proxying/allowedSockets experimentalWebKitSupport: Fix proxying of Cypress internal websocket #23807
  • Fix devicePixelRatio experimentalWebKitSupport: Set devicePixelRatio #23808
  • Fix/skip focus from app
• Documentation - limitations, Linux dependencies docs: document experimentalWebKitSupport cypress-documentation#4710
• Add experimental flag, make available in production, update public types feat: gate WebKit behind experimentalWebKitSupport in prod #23711

[foolip]

I've done a fair bit of work on getting Safari working well with web-platform-tests (a conformance test suite for browsers with a dashboard) and know a little bit about what kinds of problems you might run into.

I know that Cypress doesn't use WebDriver but rather CDP (at least for Chrome) but can someone sketch roughly what the requirements of the protocol are? I've had a look at CONTRIBUTING.md and browser support docs but couldn't find any high-level information about Cypress internals.

I ask because I'd like to understand if it would be at all feasible to communicate with Safari using safaridriver, or what the basic "API" or protocol between Cypress and a browser needs to be.

[kuceb]

hi @foolip
we would need the following from either extension/devtools APIs:

• get/set/clear cookies by domain
• screenshot page
• record video of page (this can be done via getUserMedia api if it supports capturing the browser tab, which we do in firefox)

in addition, we would also need:

• a way to set a proxy server for all network traffic
• a way to bypass the invalid ssl cert screen/prompt

everything else is done via JavaScript

[foolip]

Thanks @bkucera, that's a great list!

get/set/clear cookies by domain

It sounds like you need to get/set/clear cookies for domains other than the one currently loaded, is that right? It looks like the only way of doing that using WebDriver/safaridriver would be to load a page from that domain and then use the endpoints with an implicit domain, but that's not great.

record video of page

I don't think this is possible, but I did have fun recording the whole macOS VM in Azure Pipelines using screencapture once. One can also record a specific window, but I presume you want the content area without decorations.

a way to set a proxy server for all network traffic

I'm pretty sure this is not possible yet.

a way to bypass the invalid ssl cert screen/prompt

I wouldn't be surprised if this is already possible with some setting or command line argument, but I don't know what it is. Our setup for web-platform-tests is a bit special, we update /etc/hosts and add a certificate to the system certificate store. It's a bit much, and also requires that you know what the domains under test are before you start the tests, which is probably not the case for Cypress.

[kawpiya]

@amirrustam We got Firefox and Edge support recently, love to see, Safari support soon since Safari have

• 17.21% of global browser market share (2nd most used browser, second only to Chrome) : source
• 36.28% USA browser market share (2nd most used browser in USA, second only to Chrome) : source
• 33.48% UK browser market share (2nd most used browser in UK, second only to Chrome) : source

So please support Safari too.

[kelly-tock]

Yes for a lot of responsive sites mobile safari is a must have and can be the majority of the users.

[clockelliptic]

i want so badly to use Cypress, but I simply must use WebDriver because Safari support is a requirement over here

[lughino]

I’d love to see a quick decision around this topic, especially now that playwright is gaining a lot of popularity.

Cypress team, please prioritise this compatibility.

[it-sha]

I would suggest to my company and all clients to use Cypress if Safari support is implemented