Back to Repositories

Testing X-ray Disease Detection Interface in Gradio

This test suite validates the functionality of an X-ray disease detection interface in Gradio, focusing on UI element rendering and API request handling. The tests ensure proper display of disease options and accurate processing of scan analysis results.

Test Coverage Overview

The test suite provides comprehensive coverage of core X-ray interface components and API functionality.

Validates rendering of disease description and checkbox options
Tests tab navigation between X-ray and CT scan modes
Verifies API request processing and JSON response handling
Covers multiple disease selection scenarios

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction and assertion verification. The implementation follows modern async/await patterns with specific selectors for reliable element targeting.

Uses TestID and role-based selectors for robust element selection
Implements checkbox interaction testing
Validates JSON response formatting

Technical Details

Testing Framework: Custom @self/tootils implementation
Browser Automation: Playwright
Selector Strategies: TestID, Role, and Text-based
Assertion Library: Playwright’s expect

Best Practices Demonstrated

The test suite exemplifies several testing best practices for UI automation and API integration testing.

Isolated test cases for UI rendering and API functionality
Clear test descriptions and expectations
Consistent selector strategy usage
Robust element waiting and assertion patterns

gradio-app/gradio

js/spa/test/blocks_xray.spec.ts

            
import { test, expect } from "@self/tootils";

test("renders the correct elements", async ({ page }) => {
	const description = await page.getByTestId("markdown");
	await expect(description).toContainText("Detect Disease From Scan");

	const checkboxes = await page.getByTestId("checkbox-group");
	await expect(checkboxes).toContainText("Covid Malaria Lung Cancer");

	// const tabs = await page.locator("button", { hasText: /X-ray|CT Scan/ });
	const tabs = await page.getByRole("tab", { name: /X-ray|CT Scan/ });
	await expect(tabs).toHaveCount(2);
});

test("can run an api request and display the data", async ({ page }) => {
	await page.getByTitle("Covid").check();
	await page.getByTitle("Lung Cancer").check();

	const run_button = await page.locator("button", { hasText: /Run/ }).first();
	await run_button.click();

	const json = await page.getByTestId("json").first();
	await expect(json).toHaveText(
		`      [     \"0\": {     \"Covid\": 0.25 ,   \"Lung Cancer\": 0.5    }   ] `
	);
});