Back to Repositories

Testing Gradio Sub-Block Form Submission and Example Handling in gradio-app

This test suite validates core form submission and example handling functionality in a Gradio application interface. The tests focus on textbox input submission and pre-defined example interaction, ensuring proper state management and value propagation.

Test Coverage Overview

The test suite provides coverage for two primary interaction paths in the Gradio interface:

Form submission validation through textbox input and Enter key press
Example selection functionality testing user-facing predefined examples
Value propagation verification for prompt field updates

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction simulation. The implementation follows a behavior-driven pattern, focusing on user actions and expected outcomes. The tests leverage TestID selectors and label-based element location strategies for robust element identification.

Key patterns include async/await handling for UI interactions and expectation assertions using Playwright’s built-in matchers.

Technical Details

Testing Tools and Setup:

Playwright test runner for browser automation
Custom @self/tootils testing utilities
Page object interactions (getByTestId, getByLabel, getByText)
Async test execution with proper wait handling

Best Practices Demonstrated

The test suite exemplifies several testing best practices including isolated test cases, clear test naming, and specific assertions. Each test focuses on a single piece of functionality with explicit setup and verification steps. The use of data-testid attributes and semantic selectors improves test reliability and maintenance.

The code organization follows a clear pattern of arrange-act-assert, making the test intentions and flow easy to understand.

gradio-app/gradio

js/spa/test/sub_block_render.spec.ts

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

test("submit works", async ({ page }) => {
	await page.getByTestId("textbox").first().focus();
	await page.getByTestId("textbox").first().fill("test");
	await page.keyboard.press("Enter");

	await expect(page.getByLabel("Prompt", { exact: true })).toHaveValue("image");
});

test("examples work", async ({ page }) => {
	await page.getByText("A serious capybara at work, wearing a suit").click();

	await expect(page.getByLabel("Prompt", { exact: true })).toHaveValue("image");
});