How do I fix SSL errors when using Playwright and Google Chrome to access a site on localhost:3000?

Answer

Set Custom Root Certificates

To fix SSL errors, set custom root certificates using the NODE_EXTRA_CA_CERTS environment variable before installing browsers. This is necessary if a custom untrusted certificate authority (CA) intercepts proxy requests, causing an "Error: self signed certificate in certificate chain" error. Set the variable like this:

export NODE_EXTRA_CA_CERTS="/path/to/cert.pem"

Increase Connection Timeout

If your network is slow, increase the connection timeout using the PLAYWRIGHT_DOWNLOAD_CONNECTION_TIMEOUT environment variable. Set it to a value greater than 0, for example:

PLAYWRIGHT_DOWNLOAD_CONNECTION_TIMEOUT=120000

Check for Firewalls or Proxies

Ensure there are no firewalls or proxies blocking direct access to public resources. By default, Playwright downloads browsers from Microsoft's CDN, but sometimes companies maintain an internal proxy that blocks direct access. Configure Playwright to download browsers via a proxy server by setting HTTPS_PROXY:

HTTPS_PROXY=https://192.0.2.1

Test Against Recent WebKit Builds

Avoid testing against branded versions of Safari, as Playwright relies on patches instead of matching recent WebKit trunk builds. Test against recent WebKit builds to give more lead time for potential browser update issues.

In summary, to fix SSL errors when using Playwright and Google Chrome to access a site on localhost:3000, set custom root certificates, increase connection timeout, check for firewalls or proxies, and test against recent WebKit builds.