Add gr.Image interaction test + gr.ImageEditor interaction test i…

…mprovement (#7309)

* add source selection interaction story

* add changeset

* add source selection e2e test

* add changeset

* add diff threshold to imageeditor story

* remove redundant <button>

* add changeset

* typo

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/pretty-ants-joke.md

@@ -0,0 +1,6 @@
+---
+"@gradio/image": patch
+"gradio": patch
+---
+
+feat:Add `gr.Image` interaction test + `gr.ImageEditor` interaction test improvement

js/app/test/kitchen_sink.spec.ts

@@ -1,7 +1,13 @@
 import { test, expect } from "@gradio/tootils";
-import { BASE64_IMAGE } from "./media_data";
+import { chromium } from "playwright";
 
 test("test inputs", async ({ page }) => {
+	const browser = await chromium.launch();
+	const context = await browser.newContext({
+		permissions: ["camera"]
+	});
+	context.grantPermissions(["camera"]);
+
 	const textbox = await page.getByLabel("Textbox").nth(0);
 	await expect(textbox).toHaveValue("Lorem ipsum");
 
@@ -32,6 +38,11 @@ test("test inputs", async ({ page }) => {
 	const uploaded_image_cropper = await page.locator("img").nth(0);
 	const image_data_cropper = await uploaded_image_cropper.getAttribute("src");
 	await expect(image_data_cropper).toContain("cheetah1.jpg");
+
+	// Image Input w/ Webcam
+	await page.getByRole("button", { name: "Click to Access Webcam" }).click();
+	await page.getByRole("button", { name: "select input source" }).click();
+	expect(await page.getByText("fake_device_0")).toBeTruthy();
 });
 
 test("test outputs", async ({ page }) => {

js/image/shared/Webcam.svelte

@@ -250,12 +250,11 @@
 			</button>
 			{#if !recording}
 				<button
+					class="icon"
 					on:click={select_source}
-					aria-label={mode === "image" ? "capture photo" : "start recording"}
+					aria-label="select input source"
 				>
-					<div class="icon" title="select video source">
-						<DropdownArrow />
-					</div>
+					<DropdownArrow />
 				</button>
 			{/if}
 		</div>

js/imageeditor/ImageEditor.stories.svelte

@@ -51,6 +51,9 @@
 
 <Story
 	name="Image Editor Interactions"
+	parameters={{
+		diffThreshold: 0.1
+	}}
 	args={{
 		value: {
 			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",