Back to Repositories

Testing Chatbot Metadata Display Implementation in Gradio

This test suite validates the chatbot’s ability to handle agentic demos and display messages with metadata in the Gradio application. It focuses on testing the interaction with weather-related functionality and verifies proper display of error states and tool usage indicators.

Test Coverage Overview

The test coverage focuses on validating the chatbot’s core functionality for handling agentic demos.

Key areas tested include:

Weather information retrieval button interaction
Error message display verification
Tool usage indicator visibility
Weather response message rendering

Integration points cover the interaction between UI elements and the chatbot’s message display system.

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction verification.

Key patterns include:

Async/await pattern for handling UI interactions
Element filtering using text content and roles
Visibility assertions for UI components
Chainable locator methods for precise element selection

Technical Details

Testing tools and configuration:

Custom test utilities imported from @self/tootils
Playwright test runner and assertion library
Page object abstraction for UI interaction
Role-based and text-based element selection
Async test execution environment

Best Practices Demonstrated

The test implementation showcases several quality testing practices.

Notable examples include:

Atomic test case design focusing on specific functionality
Clear test naming describing the feature under test
Effective use of async/await for handling asynchronous operations
Robust element selection strategies
Explicit visibility checks for UI elements

gradio-app/gradio

js/spa/test/chatbot_with_tools.spec.ts

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

test("Chatbot can support agentic demos by displaying messages with metadata", async ({
	page
}) => {
	await page.getByRole("button", { name: "Get San Francisco Weather" }).click();
	await expect(
		await page.locator("div").filter({ hasText: "💥 Error" }).nth(1)
	).toBeVisible();
	await expect(
		page.locator("span").filter({ hasText: "🛠️ Used tool" })
	).toBeVisible();
	await expect(
		page.locator("button").filter({ hasText: "It's a sunny day in San" })
	).toBeVisible();
});