Back to Repositories

Testing Image Gallery Example Updates in Gradio App

This test suite validates image modification and example updating functionality in a Gradio application interface. It focuses on verifying the correct updating of image examples and ensuring proper image source attribute changes during user interactions.

Test Coverage Overview

The test suite provides comprehensive coverage of image example updates and source attribute modifications.

Key areas tested include:

Gallery item selection and image source verification
Example update functionality
Dynamic image source changes
User interaction flows with gallery items

Implementation Analysis

The testing approach utilizes Playwright’s page object model for UI interaction testing. It implements async/await patterns for handling asynchronous operations and employs expect assertions for validation.

Technical implementation includes:

DOM element selection using data-testid and role selectors
Attribute verification using toContain matchers
Async polling with toPass expectations

Technical Details

Testing tools and configuration:

Test Framework: Custom @self/tootils implementation
Browser Automation: Playwright
Assertion Library: Expect with async support
Selectors: TestID, Role, and CSS class-based

Best Practices Demonstrated

The test exhibits strong testing practices through clear arrangement of setup, action, and assertion phases.

Notable practices include:

Explicit wait handling for async operations
Robust element selection strategies
Clear test case naming
Proper isolation of test scenarios

gradio-app/gradio

js/spa/test/image_mod.spec.ts

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

test("examples_get_updated_correctly", async ({ page }) => {
	await page.locator(".gallery-item").first().click();
	let image = await page.getByTestId("image").locator("img").first();
	await expect(await image.getAttribute("src")).toContain("cheetah1.jpg");
	await page.getByRole("button", { name: "Update Examples" }).click();

	let example_image;
	await expect(async () => {
		example_image = await page.locator(".gallery-item").locator("img").first();
		await expect(await example_image.getAttribute("src")).toContain("logo.png");
	}).toPass();

	await example_image.click();
	await expect(async () => {
		image = await page.getByTestId("image").locator("img").first();
		await expect(await image.getAttribute("src")).toContain("logo.png");
	}).toPass();
});