Back to Repositories

Testing Audio Stream Playback Implementation in gradio-app/gradio

This test suite validates audio streaming functionality in a web application, focusing on WAV file playback through both file and byte stream methods. It ensures proper audio element initialization and playback progression.

Test Coverage Overview

The test suite covers two critical audio streaming paths:

WAV file streaming via direct file output
WAV file streaming through byte stream conversion

Key functionality includes audio element initialization, playback verification, and time progression validation. Edge cases handle CI environment detection and skip conditions.

Implementation Analysis

The testing approach utilizes Playwright’s page object model for DOM interaction and element evaluation. The implementation employs polling mechanisms to verify audio playback progress, with TypeScript annotations managing type constraints. The tests leverage async/await patterns for handling audio element operations.

Technical Details

Testing tools and configuration:

Playwright test runner for browser automation
Custom tootils framework integration
TypeScript for type safety
Environment-aware test skipping for CI compatibility
Audio element evaluation through JavaScript bridge

Best Practices Demonstrated

The test suite exemplifies robust testing practices including explicit wait conditions, proper element selection, and environment-aware test execution. Notable practices include:

Selective test skipping based on environment
Explicit role-based element selection
Polling-based assertion for async operations
Separation of file and byte stream test cases

gradio-app/gradio

js/spa/test/stream_audio_out.spec.ts

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

test.skip("audio streams from wav file correctly", async ({ page }) => {
	test.skip(!!process.env.CI, "Not supported in CI");
	await page.getByRole("gridcell", { name: "wav" }).first().click();
	await page.getByRole("button", { name: "Stream as File" }).click();
	// @ts-ignore
	await page
		.locator("#stream_as_file_output audio")
		.evaluate(async (el) => await el.play());
	await expect
		.poll(
			async () =>
				await page
					.locator("#stream_as_file_output audio")
					// @ts-ignore
					.evaluate((el) => el.currentTime)
		)
		.toBeGreaterThan(0);
});

test.skip("audio streams from wav file correctly as bytes", async ({
	page
}) => {
	test.skip(!!process.env.CI, "Not supported in CI");
	await page.getByRole("gridcell", { name: "wav" }).first().click();
	await page.getByRole("button", { name: "Stream as Bytes" }).click();
	// @ts-ignore
	await page
		.locator("#stream_as_bytes_output audio")
		.evaluate(async (el) => await el.play());
	await expect
		.poll(
			async () =>
				await page
					.locator("#stream_as_bytes_output audio")
					// @ts-ignore
					.evaluate((el) => el.currentTime)
		)
		.toBeGreaterThan(0);
});