Validating Frontend UI Data Against Backend API Responses

🔄Scenario Overview

Validating Frontend UI Data Against Backend API Responses

Key Takeaways & Cheat Sheet

✓Extract UI table rows and store values in structured maps
✓Send matching backend API requests using Rest-Assured helpers
✓Extract JSON values from responses using JsonPath queries
✓Assert frontend cell content matches the backend payload

Short Direct Answer

To validate data accuracy, extract UI table values and assert them against the source-of-truth backend API. Use REST-Assured to fetch the API data, parse the JSON payload, and compare the API values directly against the text extracted from the UI elements.

⚠️ Senior Warning (Red Flag)

Avoid hardcoding expected test dataset assertions. Always match the frontend display against the source-of-truth API response for dynamic data.

💡 STAR Deep Dive Explanation & Pro Tip

Cross-layer validation ensures data matches exactly between the backend database and frontend UI, catching rendering or data-truncation bugs.

SeleniumAutomation.java

Selenium 4 + Java

import io.restassured.RestAssured;
import io.restassured.path.json.JsonPath;

public void verifyUiDataMatchesApi() {
    // 1. Fetch source of truth data directly from Backend API
    String apiResponse = RestAssured.get("https://api.careerraah.com/users/profile").asString();
    JsonPath json = new JsonPath(apiResponse);
    String expectedEmail = json.getString("email");
    String expectedStatus = json.getString("profile.status");

    // 2. Fetch rendered UI text using Selenium
    driver.get("https://careerraah.com/profile");
    String uiEmail = driver.findElement(By.id("profile-email")).getText().trim();
    String uiStatus = driver.findElement(By.id("profile-status")).getText().trim();

    // 3. Perform cross-layer validation
    assert uiEmail.equals(expectedEmail) : "Email mismatch! UI: " + uiEmail + " | API: " + expectedEmail;
    assert uiStatus.equalsIgnoreCase(expectedStatus) : "Status mismatch!";
}