cypress: Cypress spec window not showing in experiment webkit, resulting in blank page

For me, the issue was in playwright-webkit v1.29.0. Downgrading it to v1.28.0 fixed the issue @manoj-fd

edit: make sure you removed the node_modules and package-lock.json

I’ve been looking into this and it seems that webkit has issues with the hostname being localhost that may be causing requests not to go through Cypress’s proxy. I don’t think there’s anything we can do within Cypress today to work around it, so I’ve filed an issue with playwright in case something can be done there.

In the meantime, you might be able to work around the issue by using an alternative string for https://localhost, such as the IP address of your computer or by using https://get.localhost.direct/.

Using the IP directly also did not work for me, serving WebKit without the spec page, I believe this is more about http vs https

I’ve been looking into this and it seems that webkit has issues with the hostname being localhost that may be causing requests not to go through Cypress’s proxy. I don’t think there’s anything we can do within Cypress today to work around it, so I’ve filed an issue with playwright in case something can be done there.

In the meantime, you might be able to work around the issue by using an alternative string for https://localhost, such as the IP address of your computer or by using https://get.localhost.direct/.

Hi @manoj-fd, I started investigating this a bit and had a quick question off the jump. Looking at your example index.js:

module.exports = (on, config) => {
    
    Object.assign(config, {
        baseUrl: 'https://localhost:3001',
    })

    return config
}

Are you actually serving that route over https? I ask because I was able reproduce the blank webkit based on the prior posts, but I saw an error in the WebKit console that pointed out that my local server wasn’t actually serving over https:

Changing the baseUrl to use http corrected this, as that is how my local server was actually serving it.

I also ask because you mention that your config works in Chrome and Electron. Those browsers (as well as Firefox) are more graceful when it comes to the protocol mismatch and will show that the connection is not secured in the url bar rather than fail, which could explain the differences in behavior you’re seeing:

So I’m just curious if this lines up with what you’re seeing locally, and if using http rather than https corrects your immediate issues launching WebKit. If so, there’s definitely work to be done with Cypress to actually surface these errors in the UI. If not, we’ll have to do a bit more digging.

Hi @mjhenkes ,Please refer the cypress.config.js and index.js config mentioned below , if you can use that with your example project, the issue can be replicated.

As a summary, whenever we try to change the Baseurl to a different local host , webkit is not launching the spec grid and its blank, but the same works fine with chrome and electron.

Cypress.config.js

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      return require('./index.js')(on, config)
   },
    experimentalWebKitSupport: true,
  },
}

Index.js

module.exports = (on, config) => {
    
    Object.assign(config, {
        baseUrl: 'https://localhost:3001',
    })

    return config
}