Problem: you have a local HTTPS site (for example using Create-React-App) and want to access it locally using
https://<domain name>:3000. How do you do it? Here is my solution that probably the simplest way of accessing domains using self-signed certificates. You can find the source code in the repo bahmutov/cypress-local-https.
Local self-signed certificate
Let's say I want to test my own (non-existent) domain "my-secure-site". I will create a self-signed certificate on Mac (other operating systems have their own quirks)
$ brew install mkcert
Now I have two text files in the folder
$ cat .cert/key.pem
Let's start the local app
$ npm start
If we try to access the local site at
https://localhost:3000 we get a problem: our self-signed certificate is for domain "my-secure-site", not for "localhost".
If we try to access
https://my-secure-site:3000 the browser does not know what to do. The browser asks the network stack to look up the IP address for domain name "my-secure-site", which hits the DNS server, which returns "UNKNOWN" error. We are stuck.
Typically at this point, you would modify your local hosts file and add the following line to it to map the name "my-secure-site" to the local IP address 127.0.0.1:
# my local testing for cypress-hosts-option
You might need to clear the local network DNS cache, restart the browser. Who knows.
There is an easier way if all you plan to do is to run end-to-end tests against the local application. You can specify the local domain mapping using the (absolutely undocumented)
hosts Cypress configuration option:
Note: the "hosts" resolution only maps the domain name to an IP address, it does nothing to the port number.
Start Cypress and enjoy the
cy.visit('/') correctly loading your local HTTPS site.
Other uses for locally mapped
hosts in Cypress: tricking single sing-on flows (see the cypress-example-recipes repo) and blocking resources from some domains.