LogoLogo
BugBug HomepageContact SupportLoginSign up free
  • Documentation
  • Tutorial for beginners
  • Best practices
  • BugBug App FAQ
  • Quick Start
    • What is test automation?
    • Start for free
    • Create your first project
    • Install Chrome extension
    • Create and run the tests
  • Creating Tests
    • Your first test
    • Independent tests
    • Duplicating tests
    • New test from here
  • Recording tests steps
    • BugBug overlay
    • Recording clicks
    • Recording hover
    • Recording keyboard typing
    • Recording assertions
    • Recording drag & drop
    • Record from here
    • Re-recording steps
    • Recording pop-up window actions
    • Using keyboard shortcuts
  • Editing tests
    • Grouping steps
    • Components
    • Manually editing steps
    • Actions
    • Assertions
    • Tabs & iframes
    • Variables
    • Local variables
    • Profiles
    • Custom JavaScript actions
  • Running tests
    • Running the tests
    • Statuses
    • Run (locally)
    • Run and pause here
    • Run in cloud
    • Schedules
    • Parallel runs
    • Running via API
    • Test your local build or protected web page using ngrok
  • Preventing failed tests
    • Waiting conditions
    • Smart click
    • Smart scroll
    • Selectors
    • Timeout
    • Delay / Sleep
    • Project settings
  • Debugging Tests
    • Runs history
    • Screenshots
    • Debug in Chrome
    • Breakpoint (run step-by-step)
  • Organizing tests
    • Naming your tests
    • Searching tests
    • Suites
    • Components
    • Projects
  • Workflow Tips
    • Edit & Rewind
    • Changing the test screen size
    • Multiple environments
    • Testing registration & login
    • Integrating with build systems
    • Mobile version testing
  • Collaboration
    • Organizations
    • Inviting team members
    • Alerts
      • Sending email notification
      • Sending webhook
      • Sending Slack message
      • Sending Teams message
  • Integrations
    • CLI
    • Zapier
    • Slack
    • GitHub
    • Bitbucket
    • Gitlab
    • Trello
    • Jira
  • Your account
    • Account settings
    • Edit your name and email
    • Forgot password
    • Manage Subscriptions
    • Account FAQ
  • Troubleshooting
    • Prohibited behaviors
    • Updating Chrome extension
    • Clear cookies and site data for BugBug
    • Testing basic auth password protected websites
    • Common selectors issues
    • CAPTCHA in automation testing
    • Cloud tests sometimes failing
    • IPs list of cloud runners
    • VPN or a Firewall
    • A/B tests
    • Report a bug
  • IN-DEPTH GUIDES
    • Beginners tutorial to automation testing
    • XPath Selectors without coding
    • Tech Leader's Guide to Automation Testing
    • Test automation guides
  • FREE TOOLS
    • BugBug Testing Inbox
    • Example SaaS App
    • No-code XPath Selector Builder
  • Other links
    • BugBug Homepage
    • Pricing
    • Terms & conditions
    • Privacy Policy
Powered by GitBook
On this page
  • Set up ngrok
  • Fire up the ngrok
  • Record a test
  • Alternatives

Was this helpful?

  1. Running tests

Test your local build or protected web page using ngrok

PreviousRunning via APINextWaiting conditions

Last updated 1 year ago

Was this helpful?

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).

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.

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.

Alternatives

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

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

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

ngrok doc
Variables
Serveo
Localhost
Cloudfared
LocalTunnel
You can check out it in the browser.
Create a variable
Use it in test