Test Local Web Applications

Test Local Web Applications

While you are developing a web application, the application is usually served from your computer. As a result, cross-browser and cross-device issues are usually tested only with those browsers installed on your machine and mobile emulators.

With webmate-connect, you can also test web sites and applications running from a local web server.

Installing webmate-connect

You run webmate Connect locally on your computer or on your local CI infrastructure. The binary can be downloaded here: (The latest version of the binary is 1.0.8. You can find the version by running webmate-connect --version.)

If you are on Linux or macOS, you need to make the downloaded file executable by running chmod +x webmate-connect-<your OS> in your terminal.
On macOS you additionally need to go to the file’s parent folder using Finder, right-click on the file and select open from the context menu, then open again from the pop-up.
A terminal window should now open, which you can close again.
This is necessary to prevent the Gatekeeper feature in macOS from blocking the execution of webmate-mobilebridge from your terminal later on.

Example: Testing a Local Angular Application

Let’s say you develop a web application using the Angular framework and want to test your local development snapshot. You have started your Angular application with ng serve and it’s running on port 4200. In order to make the application available to webmate, you start webmate-connect as follows (this is for Mac, on Windows you would use webmate-connect-win.exe instead).

webmate-connect supports both types of webmate API keys. The traditional API key follows the UUID format, e.g. c1e3effb-xxx-xxx-xxx-xxx, and requires the inclusion of the --user (email) in the configuration. On the other hand, the new longer API key, e.g. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx=, does not require the --user information.

1
2
3
4
5
6
7
8

./webmate-connect-mac localproxy --user=xxx@xxx.com --apikey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx= localhost:4200
 
2021/07/12 12:42:05 Using tunnel server https://app.webmate.io/api/v1/connect/proxy
2021/07/12 12:42:05 No tunnel id set. Generating random id.
2021/07/12 12:42:05 Using tunnel id tun30
2021/07/12 12:42:05 In webmate, you will be able to access your server 0.0.0.0:4200 at http://tun30.connect or https://tun30.connect
2021/07/12 12:42:05 client: Connecting to wss://app.webmate.io:443/api/v1/connect/proxy
2021/07/12 12:42:06 client: Connected (Latency 158.835698ms)

webmate-connect has now created a tunnel with the tunnel id tun30. You can access your application from webmate or from your automated test cases by using the URLs http://tun30.connect and https://tun30.connect. If you need a stable tunnel id, e.g., to use it within a test automation script, you can alternatively specify the tunnel id as a command parameter.

Example: Testing a Web Service in Your Local Network

Scenario: You want to test a web application that can be accessed in your local network. The application is protected with TLS/SSL.

1
2
3
4
5
6
7

./webmate-connect-mac localproxy --user=xxx@xxx.com --apikey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx= --ssl --hostheader=testfabrik.com testfabrik.com:443 mystabletunnelid
 
2021/07/12 11:13:15 Using tunnel server https://app.webmate.io/api/v1/connect
2021/07/12 11:13:15 Using tunnel id mystabletunnelid
2021/07/12 11:13:15 In webmate, you will be able to access your server testfabrik.com:443 at http://mystabletunnelid.connect or https://mystabletunnelid.connect
2021/07/12 11:13:15 client: Connecting to wss://app.webmate.io/api/v1/connect/proxy
2021/07/12 11:13:18 client: Connected (Latency 124.111288ms)

This example uses the stable tunnel id named “mystabletunnelid”. After the connection has successfully started, your application is available at http(s)://mystabletunnelid.connect from within webmate. You can optionally set a host header, if this is required in your setup. If your application requires TLS/SSL, you must set the option --ssl.

Overview: Passing additional Arguments to webmate-connect

Here you will find an overview table of all arguments that can be passed to webmate-connect: