Enhance Lite E2E tests and fix a networking problem on Lite (#9333)

* Add Lite E2E test to check a matplotlib problem which was fixed in #9312

* Restore js/app/test/image_remote_url.spec.ts, which was deleted in #8716

* Fix tootils import

* Format

* Fix processing_utils.resolve_with_google_dns to use the HTTPX client instead of urllib so it works on Lite

* add changeset

* add changeset

* Move js/app/test/image_remote_url.spec.ts -> js/spa/test/image_remote_url.spec.ts

* Use pyodide.http in resolve_with_google_dns on Lite

---------

Co-authored-by: gradio-pr-bot <[email protected]>

.changeset/fancy-pianos-dig.md

@@ -0,0 +1,5 @@
+---
+"gradio": minor
+---
+
+feat:Enhance Lite E2E tests and fix a networking problem on Lite

.config/playwright.config.js

@@ -51,7 +51,8 @@ const lite = defineConfig(base, {
 		"**/file_component_events.spec.ts",
 		"**/kitchen_sink.spec.ts",
 		"**/gallery_component_events.spec.ts",
-		"**/image_remote_url.spec.ts" // To detect the bugs on Lite fixed in https://github.com/gradio-app/gradio/pull/8011 and https://github.com/gradio-app/gradio/pull/8026
+		"**/image_remote_url.spec.ts", // To detect the bugs on Lite fixed in https://github.com/gradio-app/gradio/pull/8011 and https://github.com/gradio-app/gradio/pull/8026
+		"**/outbreak_forecast.spec.ts" // To test matplotlib on Lite
 	],
 	workers: 1,
 	retries: 3,

gradio/processing_utils.py

@@ -10,7 +10,6 @@
 import socket
 import subprocess
 import tempfile
-import urllib.request
 import warnings
 from functools import lru_cache
 from io import BytesIO
@@ -278,8 +277,16 @@ def save_file_to_cache(file_path: str | Path, cache_dir: str) -> str:
 def resolve_with_google_dns(hostname: str) -> str | None:
     url = f"https://dns.google/resolve?name={hostname}&type=A"
 
-    with urllib.request.urlopen(url) as response:
-        data = json.loads(response.read().decode())
+    if wasm_utils.IS_WASM:
+        import pyodide.http
+
+        content = pyodide.http.open_url(url)
+        data = json.load(content)
+    else:
+        import urllib.request
+
+        with urllib.request.urlopen(url) as response:
+            data = json.loads(response.read().decode())
 
     if data.get("Status") == 0 and "Answer" in data:
         for answer in data["Answer"]:

js/spa/test/image_remote_url.spec.ts

@@ -0,0 +1,30 @@
+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);
+});