Fix flaky ui test (#4906)

* Debug

* Upload screenshots

* Fix path

* turn on verbose mode

* turn on verbose mode

* turn on verbose mode

* await click

* cleanup

* trigger ci

---------

Co-authored-by: pngwn <hello@pngwn.io>

.config/playwright.config.js

@@ -5,5 +5,5 @@ export default {
 	},
 	testMatch: /.*.spec.ts/,
 	testDir: "..",
-	globalSetup: "./playwright-setup.js"
+	globalSetup: "./playwright-setup.js",
 };

.github/workflows/ui.yml

@@ -53,6 +53,13 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm test:browser
+      - name: upload screenshots
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-screenshots
+          path: |
+            ./test-results
       - name: run browser component tests
         run: |
           . venv/bin/activate

js/app/test/blocks_chained_events.spec.ts

@@ -91,7 +91,7 @@ test("gr.Info makes the toast show up", async ({ page }) => {
 });
 
 test("gr.Warning makes the toast show up", async ({ page }) => {
-	page.click("text=Trigger Warning");
+	await page.click("text=Trigger Warning");
 
 	const toast = page.getByTestId("toast-body");
 	expect(toast).toContainText("This is a warning!");

package.json

@@ -21,7 +21,7 @@
 		"test:node": "TEST_MODE=node pnpm  vitest run --config .config/vitest.config.ts",
 		"test:browser": "pnpm --filter @gradio/app test:browser",
 		"test:browser:full": "run-s build test:browser",
-		"test:browser:verbose": "GRADIO_TEST_VERBOSE=true pnpm test:browser",
+		"test:browser:verbose": "pnpm test:browser",
 		"test:browser:dev": "pnpm --filter @gradio/app test:browser:dev",
 		"ci:publish": "pnpm publish --no-git-checks --access public -r",
 		"ci:version": "changeset version && pnpm i --lockfile-only",