Data Mocking: Backend? Who Needs One? Master Data Mocking in JOSF:

Since the release of JOSF 3.2.0, JOSF now comes with built-in data mocking capabilities for web-browser tests. This powerful feature allows you to simulate backend responses without needing a live server, making your test cases faster, more stable, and independent of backend availability.

What is Data Mocking?

Mocking is a technique where you replace real system interactions with simulated ones. Instead of relying on an actual backend— which might be slow, unreliable, or still in development—you can create controlled responses that your frontend will interact with during testing.

How to start Data Mocking?

1. Setting Up Your Test Case

First, we need a test case to verify product details on a rental website.

Steps to create a test case:

1. Open JOSF and create a new test case.
2. Add a Web Navigation Action:
   • Drag in a Navigate action.
   • Set the URL to:
      https://practicesoftwaretesting.com/rental
3. Verify Product Name:
   • Drag in a Verify (Text & Value) action.
   • Add the following XPath strategy:
     //div[contains(@data-test, 'product-')]//h5[@class='card-title']
   • Validate the text: “Combination Pliers”

At this point, the test ensures the first product displayed is Combination Pliers. However, if the backend changes the order or removes this product, our test will fail.

---

2. Introducing Data Mocking

Instead of depending on backend responses, we’ll use JOSF’s Mocking feature to override the API response.

Steps to add a mock:

1. Save your test case.
2. Navigate to the Mocking tab.
3. Click “Add Mock”.
4. Restart the Web Browser (close it if it’s already running).
5. Press “Start Recording”.
6. Open the test browser and navigate to:
    https://practicesoftwaretesting.com/rental

As the page loads, a list of API requests will appear.

---

3. Capturing the API Response

Now, we’ll identify the product request and replace its data.

Finding the correct request:

1. In the list of requests, search for: is_rental.
2. You should see two requests:
   • OPTIONS request
   • GET request
3. Open the GET request and check if it contains a JSON response with product details.

---

4. Creating a Mock Response

1. Click “Create Mock” (upper-right corner).
2. Name your mock: “Rental Website”.
3. Click “Save”.

This will generate a new tab with the newly created mock.

Modifying the Response Data

1. In the Body section of the response, locate the products JSON.
2. Modify the "name" property to override the displayed product.
3. Change it to:{ "name": "Big Excavator" }
4.  For more advanced mock settings, check our Advanced Mock Rules Guide.

4. Save your mock and close the tab.

---

5. Applying the Mock in Your Test Case

Now, we’ll apply the mock inside our test case.

1. Return to your test case and click on the Mocking icon.
2. Click “Add Browser Network Mock”.
3. Select your newly created mock (Rental Website).
4. Click “Select Products”.
5. Save your test case.

---

6. Running the Mocked Test Case

Now that the mock is applied, let’s run the test:

1. Start your test case.
2. Expected Result: Your test will fail with the following error:
   Expectation: [Combination Pliers] Actual: [Big Excavator]

Success! We have successfully replaced the backend API response and injected our own product data into the test.

---

Conclusion

With JOSF’s built-in data mocking, you no longer need a backend to test frontend behavior. You can:

✔️ Simulate API responses without waiting for backend updates.
✔️ Control test scenarios (e.g., missing data, API errors, or specific responses).
✔️ Ensure test reliability even when backend data changes.

Mocking is a powerful tool for creating stable, predictable, and lightning-fast test cases—without relying on a backend! 🚀