Back to Repositories

Testing Remote Image Loading and Display Components in Gradio-App

This test suite validates the proper loading and display of remote images in the Gradio application. It ensures that images are rendered completely and correctly across different components including examples, input, loopback, and remote output sections.

Test Coverage Overview

The test provides comprehensive coverage of image loading functionality across multiple interface components.

Verifies image completion status for example, input, loopback and remote output images
Checks natural width properties to confirm proper image rendering
Tests submit button interaction and subsequent image updates
Validates image loading states across component transitions

Implementation Analysis

The testing approach utilizes page locators to target specific image elements within labeled blocks. It employs async/await patterns with Playwright’s expect assertions to verify image properties and loading states.

Uses CSS selectors with has-text predicates for precise element targeting
Implements JSProperty checks for image completion and dimensions
Handles asynchronous image loading verification

Technical Details

Testing Framework: Playwright
Assertion Library: Playwright expect
Element Selection: CSS and text-based locators
Test Properties: complete, naturalWidth
Component Types: Examples, InputImage, Loopback, RemoteImage

Best Practices Demonstrated

The test exemplifies robust image validation practices with clear component isolation and thorough property verification.

Structured component targeting using semantic locators
Multiple property validations per component
Explicit waiting for image loading completion
Clear test case organization and readability

gradio-app/gradio

js/spa/test/image_remote_url.spec.ts

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

test("Image displays remote image correctly", async ({ page }) => {
	const example_image = page.locator(
		'div.block:has(div.label:has-text("Examples")) img'
	);
	const input_image = page.locator(
		'div.block:has(label:has-text("InputImage")) img'
	);
	const loopback_image = page.locator(
		'div.block:has(label:has-text("Loopback")) img'
	);
	const remote_output_image = page.locator(
		'div.block:has(label:has-text("RemoteImage")) img'
	);
	const submit_button = page.locator('button:has-text("Submit")');

	await expect(example_image).toHaveJSProperty("complete", true);
	await expect(example_image).not.toHaveJSProperty("naturalWidth", 0);

	await expect(input_image).toHaveJSProperty("complete", true);
	await expect(input_image).not.toHaveJSProperty("naturalWidth", 0);

	await submit_button.click();

	await expect(loopback_image).toHaveJSProperty("complete", true);
	await expect(loopback_image).not.toHaveJSProperty("naturalWidth", 0);
	await expect(remote_output_image).toHaveJSProperty("complete", true);
	await expect(remote_output_image).not.toHaveJSProperty("naturalWidth", 0);
});