Is your website protected with HTTPS? If not, get it protected today. With HTTPS (Hypertext Transfer Protocol Secure) and SSL (Secure Socket Layer) certification, your website is secure from threats and has better credibility. However, securing your website through HTTPS will mean that you cannot send requests to the server from any source which is not protected through HTTPS.
This becomes an issue for the developers who wish to test the website using the local environment. So, the developers having a local development environment get a problem as everything works on the http://localhost.
Now, the server will reject any development request sent through your local development environment. You might receive an error code of
NET::ERR_CERT_COMMON_NAME_INVALID
sent by Chrome.
To solve this problem and test HTTPS website from local host, we have provided some solutions in this guide.
Table of ContentsUsing Local testing with BrowserStack enables your devs to run automated tests on your internal dev environments, on localhost, staging setups, or from behind a corporate firewall.
It establishes a secure connection between your machine and the BrowserStack cloud. After you set up Local testing, all your private URLs are automatically resolved, including HTTPS URLs and other URLs hosted behind a proxy or firewall.
Now that you know which cloud infrastructure you should opt for to test HTTPS websites, start by signing in and then move on with the tutorial.
Create Free BrowserStack Account
We will be using OpenSSL to create certificates for your HTTPS websites, and then we will be testing your website from a local host. Follow the below steps to generate all the SSL certificates
Step 1: Rooting SSL Certificate
openssl genrsa -des3 -out rootCA.key 2048
openssl req -x509 -new -nodes -key rootCA.key -sha256 -days 1024 -out rootCA.pem
Step 2: Trusting the Rooted SSL Certificate
Before you use the newly created root SSL certificate, use your system to trust the given certificate.
Step 3: Domain SSL Certificate
[req] default_bits = 2048 prompt = no default_md = sha256 distinguished_name = dn [dn] C=US ST=RandomState L=RandomCity O=RandomOrganization OU=RandomOrganizationUnit emailAddress=hello@example.com CN = localhost
authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment subjectAltName = @alt_names [alt_names] DNS.1 = localhost
openssl req -new -sha256 -nodes -out server.csr -newkey rsa:2048 -keyout server.key -config <( cat server.csr.cnf )
Now, a request for signing certificates will be issued via the Root SSL you created for generating the certificate for the local host. The output file will be a certificate called server.crt.
openssl x509 -req -in server.csr -CA rootCA.pem -CAkey rootCA.key -CAcreateserial -out server.crt -days 500 -sha256 -extfile v3.ext
Step 4: Using Your SSL Certificate
Place your server.crt and server.key files to a location that is accessible in your server and use them when starting your server. Use this only for your local environment and not for production.
Login to localhost
Once you have your certificates with you, you can just start the Puma with the next command.
bin/rails s -b "ssl://127.0.0.1:3000?key=$HOME/certs/localhost.key&cert=$HOME/certs/localhost.crt
Now visit your desired browser with the address,
NOTE: Your browser might complain as this certificate is self-signed. But do not panic as we are using it for the development stage. Add an exception and then accept the provided certificate. You are all set to test HTTPS websites.
You can always test your HTTPS websites with a local connection option behind the firewall. You may also choose it to access web pages that are saved on your local machine. In a few moments, you can test your internal sites.
Website Functionality Testing
Functional testing checks whether the website is functioning as per the specification of the requirement.
Given below is a checklist for your website functionality testing –
While link testing, you should check for:
Forms help to communicate with customers and capture important data for lead generation. They should be checked for:
Cookies are small temporary files stored on the user’s computer after visiting a web page. They help in faster loading of web pages.
It tests the code of the site for:
Conclusion
Now that you have a clear idea of how to test HTTPS website and also generating SSL certificates for your website for localhost, you can build a robust website with all the tests performed from the internal environment and deliver a better user experience.
Don’t forget to use BrowserStack Automate to test websites hosted on localhost or in staging environments while running tests on an automated Selenium cloud.
With BrowserStack Local Testing, you can:
ncG1vNJzZmivp6x7o77OsKqeqqOprqS3jZympmeXqralsY6hprBlpKR6tbHSrWShrKSlwG7DxJuqoqyVqHqnvs6mZKWnk5a5qbvSrQ%3D%3D