Test your local build or protected web page using ngrok

You can use BugBug to test your local build or private site with restricted access. For this action, you have to use a third-party tool like ngrok.

ngrok is not part of BugBug. It's a 3rd party tool that exposes your website to a public URL address. Before you decide to use this tool, you may want to contact your network administrator.

ngrok opens a dedicated, secure tunnel that publicizes your local port for Internet access. When your local build or protected page is accessible through the public URL address created by ngrok, BugBug can open that site through a dedicated URL and start running tests or help you record steps.

Set up ngrok

First, visit a ngrok website and download the application to set up a tool, then unzip it to a designated location.

When you launch ngrok, you will need to provide an auth token. You need to register and open your account on the ngrok website.

Then open a ngrok command-line shell and copy-paste the command

$ ./ngrok config add-authtoken {{yourAuthToken}}

Fire up the ngrok

Once you have opened and configured the auth token for ngrok, you can publish your local build or private page to the public.

Set up your local build and verify the localhost port.

Then enter in your terminal ngrok command with the port related to your application, e.g., for 3000:

$ ./ngrok http 3000

Then ngrok opens a secure tunnel where your local build gets a public URL that can be used in BugBug tests (screenshot below).

You can check out it in the browser.

If your page is on a private server

If the website is running on a private server then you are likely using a URL like http://private.mycompany.com to access it. In this case, you’ll create a tunnel to that URL using this command (with the private server URL swapped in):

$ ./ngrok http -host-header=rewrite private.mycompany.com:80

ngrok will print the same connection status to the console as above, with the public URL that is accessible to BugBug.

Record a test

Once you successfully create a public URL with your local build or protected page, you can start recording tests with BugBug. Just use a URL provided by ngrok at the beginning of the process.

On the free plan, ngrok changes the URL each time it is restarted. So you need to update the test URL when ngrok provides a new one.

If you want to avoid this problem, you can use paid plans and set up a dedicated domain for your account. See the ngrok doc for more information.

To easily update the URL address follow these steps.

1. Open a test and go to the first step.

2. Then change the URL address

To make it easier to maintain a large number of tests, use a local variable that helps you to change the URL only in one place for all tests that use it.

Create a variable

Use it in test

For more info about variables, please visit Variables in our documentation.

Alternatives

Like many solutions, ngrok has alternatives, and you can choose something else.

• Serveo

• Localhost

• Cloudfared

• LocalTunnel