test: update playwright package, add e2e tests (english rec) for gradio app

static/package.json

@@ -10,6 +10,6 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@playwright/test": "^1.48.2"
+    "@playwright/test": "^1.49.0"
   }
 }

static/playwright.config.ts

@@ -25,13 +25,22 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://127.0.0.1:3000',
+    // baseURL: 'http://127.0.0.1:3000',
+    browserName: "chromium",
     viewport: { width: 1280, height: 900 },
     ignoreHTTPSErrors: true,
     permissions: ['microphone'],
     screenshot: 'only-on-failure',
     trace: 'on-first-retry',
     video: 'retain-on-failure',
+    launchOptions: {
+      headless: false,
+      ignoreDefaultArgs: ['--mute-audio'],
+      args: [
+        "--use-fake-device-for-media-stream",
+        "--use-fake-ui-for-media-stream",
+      ],
+    }
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
   },
 

static/pnpm-lock.yaml

@@ -9,13 +9,13 @@ importers:
   .:
     dependencies:
       '@playwright/test':
-        specifier: ^1.48.2
-        version: 1.48.2
+        specifier: ^1.49.0
+        version: 1.49.0
 
 packages:
 
-  '@playwright/test@1.48.2':
-    resolution: {integrity: sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==}
+  '@playwright/test@1.49.0':
+    resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -24,29 +24,29 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  playwright-core@1.48.2:
-    resolution: {integrity: sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==}
+  playwright-core@1.49.0:
+    resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.48.2:
-    resolution: {integrity: sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==}
+  playwright@1.49.0:
+    resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
     engines: {node: '>=18'}
     hasBin: true
 
 snapshots:
 
-  '@playwright/test@1.48.2':
+  '@playwright/test@1.49.0':
     dependencies:
-      playwright: 1.48.2
+      playwright: 1.49.0
 
   fsevents@2.3.2:
     optional: true
 
-  playwright-core@1.48.2: {}
+  playwright-core@1.49.0: {}
 
-  playwright@1.48.2:
+  playwright@1.49.0:
     dependencies:
-      playwright-core: 1.48.2
+      playwright-core: 1.49.0
     optionalDependencies:
       fsevents: 2.3.2

static/tests/test-app-7860-rec-en.spec.ts

@@ -0,0 +1,57 @@
+import { test, expect, chromium } from "@playwright/test";
+
+const basedirAudioFiles = `${__dirname}/../../tests/events`
+
+test("test: get a phonetic accuracy evaluation from a recorded audio.", async () => {
+  const testAudioEnvPath = `${basedirAudioFiles}/test_en.wav`
+  console.log("start");
+  console.log("testAudioEnvPath", testAudioEnvPath, "#");
+  const browser = await chromium.launch({
+    args: [
+        "--use-fake-device-for-media-stream",
+        "--use-fake-ui-for-media-stream",
+        "--use-file-for-fake-audio-capture=/home/wlsuser/workspace/ai-pronunciation-trainer-hf/tests/events/test_en.wav",
+      ],
+      ignoreDefaultArgs: ['--mute-audio']
+    })
+
+  const context = await browser.newContext();
+  context.grantPermissions(["microphone"]);
+  const page = await browser.newPage({});
+
+  await page.goto('http://localhost:7860/');
+  const buttonTTS = page.getByRole('button', { name: 'Run TTS' })
+  await buttonTTS.click();
+  // todo: improve this hardcoded timeout
+  await page.waitForTimeout(3000);
+  
+  const buttonPlay = page.getByLabel('Play', { exact: true })
+  await buttonPlay.click();
+  const waveFormTTS = page.locator('.scroll > .wrapper').first();
+  await waveFormTTS.waitFor({ state: 'attached' });
+  await waveFormTTS.waitFor({ state: 'visible' });
+  await expect(waveFormTTS).toBeVisible();
+  console.log("waveFormTTS??");
+
+  const buttonRecordTTS = page.getByRole('button', { name: 'Record', exact: true })
+  await buttonRecordTTS.click();
+  console.log("buttonRecordTTS??");
+  const buttonStopTTS = page.getByRole('button', { name: 'Stop', exact: true })
+  await buttonStopTTS.click();
+  console.log("buttonStopTTS??");
+
+  const buttonRecognizeSpeechAccuracy = page.getByRole('button', { name: 'Recognize speech accuracy' })
+  console.log("buttonRecognizeSpeechAccuracy??");
+  console.log("buttonRecognizeSpeechAccuracy??");
+  await buttonRecognizeSpeechAccuracy.click();
+  console.log("buttonRecognizeSpeechAccuracy=>click!");
+  console.log("buttonRecognizeSpeechAccuracy=>click!");
+  await page.waitForTimeout(300);
+  
+  const errorsElements = page.getByText(/Error/);
+  const ErrorText = errorsElements.all()
+  console.log("ErrorText:", (await ErrorText).length, "#");
+  await expect(errorsElements).toHaveCount(0);
+  console.log("end");
+  await page.close();
+});

static/tests/test-app-7860-upload-en.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect, chromium, Locator } from "@playwright/test";
+
+const basedirAudioFiles = `${__dirname}/../../tests/events`
+
+test("test: get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
+  const testAudioEnvPath = `${basedirAudioFiles}/test_en.wav`
+  console.log("start");
+  console.log("testAudioEnvPath", testAudioEnvPath, "#");
+  
+  const browser = await chromium.launch({
+    args: [
+        "--use-fake-device-for-media-stream",
+      ],
+      ignoreDefaultArgs: ['--mute-audio']
+    })
+
+  const context = await browser.newContext();
+  context.grantPermissions(["microphone"]);
+  const page = await browser.newPage({});
+
+  await page.goto('http://localhost:7860/');
+  await page.getByRole('button', { name: 'Run TTS' }).click();
+  const buttonPlay = page.getByLabel('Play', { exact: true })
+  await buttonPlay.click();
+  const waveFormTTS = page.locator('.scroll > .wrapper').first();
+  await waveFormTTS.waitFor({ state: 'attached' });
+  await waveFormTTS.waitFor({ state: 'visible' });
+  await expect(waveFormTTS).toBeVisible();
+  console.log("waveFormTTS??");
+
+  const fileChooserPromise = page.waitForEvent('filechooser');
+  await page.getByLabel('Upload file').click();
+  await page.getByRole('button', { name: 'Drop Audio Here - or - Click' }).click();
+  const fileChooser = await fileChooserPromise;
+  await fileChooser.setFiles(testAudioEnvPath);
+  
+  await page.getByRole('button', { name: 'Recognize speech accuracy' }).click();
+
+  await page.waitForTimeout(300);
+  const errorsElements = page.getByText(/Error/);
+  const ErrorText = errorsElements.all()
+  console.log("ErrorText:", (await ErrorText).length, "#");
+  await expect(errorsElements).toHaveCount(0);
+  console.log("end");
+  await page.close();
+});

static/tests/{test-1.spec.ts → test-webApp-3000.spec.ts}

@@ -10,7 +10,7 @@ test("test: get a custom sample writing within the input field.", async () => {
   const context = await browser.newContext();
   context.grantPermissions(["microphone"]);
   const page = await browser.newPage({});
-  await page.goto("/");
+  await page.goto("http://localhost:3000");
 
   const inputField = page.getByPlaceholder(
     "Write and press enter to filter"