Back to Repositories

Testing Chatbot Media Components Integration in Gradio-App

This test suite validates core media component functionality in the Gradio chatbot interface, covering Gallery, Audio, Video, and Image components across different message formats. The tests ensure proper display and interaction of multimedia elements in both tuple and message formats.

Test Coverage Overview

The test suite provides comprehensive coverage of essential media components in the Gradio chatbot interface. It validates:

Gallery component with multiple thumbnail displays
Audio component attachment and rendering
Video component loading and source attribution
Image component proper attachment and display

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction and validation. Tests are structured using parameterized execution across message formats (‘tuples’ and ‘messages’), implementing DRY principles. Each test follows a consistent pattern of component selection, input submission, and element verification.

Technical Details

Testing tools and configuration:

Playwright test runner for browser automation
Custom test utilities (@self/tootils)
TestID-based element selection
Async/await pattern for handling UI interactions
Element visibility and attachment assertions

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Consistent test structure and naming conventions
Parameterized tests to reduce code duplication
Robust element selection using test IDs
Appropriate assertion methods for different component types
Clear separation of setup and verification steps

gradio-app/gradio

js/spa/test/chatbot_core_components_simple.spec.ts

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

for (const msg_format of ["tuples", "messages"]) {
	test(`message format ${msg_format} - Gallery component properly displayed`, async ({
		page
	}) => {
		if (msg_format === "messages") {
			await go_to_testcase(page, "messages");
		}
		await page.getByTestId("gallery-radio-label").click();
		await page.getByTestId("textbox").click();
		await page.getByTestId("textbox").fill("gallery");
		await page.keyboard.press("Enter");
		await expect(
			page.getByLabel("Thumbnail 1 of 2").locator("img")
		).toBeVisible();
		await expect(
			page.getByLabel("Thumbnail 2 of 2").locator("img")
		).toBeVisible();
	});

	test(`message format ${msg_format} - Audio component properly displayed`, async ({
		page
	}) => {
		if (msg_format === "messages") {
			await go_to_testcase(page, "messages");
		}
		await page.getByTestId("audio-radio-label").click();
		await page.getByTestId("textbox").click();
		await page.getByTestId("textbox").fill("audio");
		await page.keyboard.press("Enter");
		await expect(
			page.getByTestId("unlabelled-audio").locator("audio")
		).toBeAttached();
	});

	test(`message format ${msg_format} - Video component properly displayed`, async ({
		page
	}) => {
		if (msg_format === "messages") {
			await go_to_testcase(page, "messages");
		}
		await page.getByTestId("video-radio-label").click();
		await page.getByTestId("textbox").click();
		await page.getByTestId("textbox").fill("video");
		await page.keyboard.press("Enter");
		await expect(page.getByTestId("test-player")).toBeAttached();
		await expect(
			page.getByTestId("test-player").getAttribute("src")
		).toBeTruthy();
	});

	test(`message format ${msg_format} - Image component properly displayed`, async ({
		page
	}) => {
		if (msg_format === "messages") {
			await go_to_testcase(page, "messages");
		}
		await page.getByTestId("image-radio-label").click();
		await page.getByTestId("textbox").click();
		await page.getByTestId("textbox").fill("image");
		await page.keyboard.press("Enter");
		await expect(page.getByTestId("bot").locator("img")).toBeAttached();
	});
}