Back to Repositories

Testing Blocks Input Handling and Form Submission in Gradio

This test suite focuses on validating input handling and form submission functionality in the Gradio application’s blocks interface. It ensures proper interaction between multiple textbox inputs and verifies the correct concatenation of input values in the output field.

Test Coverage Overview

The test coverage encompasses key input handling scenarios in the Gradio blocks interface. It specifically tests:

Multiple textbox input field rendering
Input value population
Form submission handling
Output field value validation

Implementation Analysis

The testing approach utilizes Playwright’s page object model for DOM interaction and assertions. It implements a straightforward flow of locating elements by label, manipulating input values, and verifying the combined output state after form submission.

The test demonstrates the use of async/await patterns and Playwright’s built-in selectors and expectations.

Technical Details

Testing tools and configuration include:

Playwright test runner
Custom tootils testing utility (@self/tootils)
Page object interactions (getByLabel, fill, click)
Async assertion patterns
Element selection by label and text content

Best Practices Demonstrated

The test exhibits several testing best practices:

Clear test case naming and intention
Efficient element selection using accessibility labels
Proper async/await handling
Explicit user interaction simulation
Specific output validation
Isolated test scope

gradio-app/gradio

js/spa/test/blocks_inputs.spec.ts

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

test("renders the correct elements", async ({ page }) => {
	const textboxes = await page.getByLabel("Input");

	const textboxOne = await textboxes.first();
	const textboxTwo = await textboxes.last();

	await textboxOne.fill("hi");
	await textboxTwo.fill("dawood");
	await page.click('text="Submit"');

	await expect(await page.getByLabel("Output")).toHaveValue("hi dawood");
});