Print

Test web browser network traffic

Since JOSF 3.1 it is possible to test your web browser network traffic. With this feature you can test your frontend application requests without the dependency on a backend application.

How does it work?

First of all, you are going to automate your user interface test. In this example we automated a simple calculator:

After automating this test, we want to know which request is send to the backend after clicking on the calculate button. To check this, we are going to execute this test till the step “Click on the calculate button”. Next step is to open the Developer tools (F12) in the browser where the test is running, navigate to the “Network” tab and execute the “Click on the calculate button” step in JOSF.

Here you can see the request we want to valiate: ActionStandardCalculation. We need some information of the request to set the filters in the “Collect network” action. You can use the request name, path, URL, method and status code as a filter.

Collect the network requests by adding the network traffic actions

Now we want to validate if the application sends the right request to the backend. In this example we are using the JOSF network traffic actions which can be found under the “Web browsers actions -> Web browser”:

  1. “Start network traffic” before we click on the calculate button
  2. “Stop network traffic” after the wait
  3. “Collect network” so you can use a filter to get the correct request
  4. Verify the request. Action: Verify Node Value (API call actions)

Run the test and validate the request!

Last but not least we are going to run the test and see if JOSF found the request.

As you can see below, JOSF executed the step “Collect network”. In the “View responses” tab we see the request that has been send.

The last step is to validate the request:

  1. Change the Verify node action to “on request”
  2. Use JsonPath to find the correct object in the request. The JsonPath can be tested in the “Responses view”. Do you want to know more about API testing in JOSF? Please watch our API modelling tutorial.
  3. Enter the data you want to validate

Run the complete test to see if everything works correct, add it to your playbook and you are done!

In this document