test: add section about play single words in e2e test cases

app.py

@@ -284,7 +284,6 @@ with gr.Blocks(css=css, head=js.head_driver_tour) as gradio_app:
     )
     audio_splitted_student_recording_stt.play(
         fn=None,
-        # text, language, sleepTime = null, prefix = null
         inputs=[text_selected_recognized_word_hidden, radio_language, num_audio_duration_hidden],
         outputs=audio_splitted_student_recording_stt,
         js=js.js_play_audio

static/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "pnpm playwright test --workers 1"
   },
   "type": "module",
   "keywords": [],

static/playwright.config.ts

@@ -66,7 +66,6 @@ export default defineConfig({
       use: { ...devices['Desktop Safari'] },
     },
 
-    /*
     // Test against mobile viewports. 
     {
       name: 'MobileChrome',
@@ -79,6 +78,7 @@ export default defineConfig({
       use: { ...devices['iPhone 12'] },
     },
 
+    /*
     // Test against branded browsers.
     {
       name: 'Microsoft Edge',
@@ -87,7 +87,7 @@ export default defineConfig({
     {
       name: 'Google Chrome',
       use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    },*/
+    }*/
   ],
 
   /* Run your local dev server before starting the tests */

static/tests/test-app-7860-example-medium0-upload-de.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, chromium } from "@playwright/test";
 
-test("test: get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
+test("test: German, get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
   const testAudioEnvPath = `${import.meta.dirname}/../../tests/events/test_de_medium.wav`
   console.log(`testAudioEnvPath: ${testAudioEnvPath}...`);
   

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

@@ -1,6 +1,6 @@
 import { test, expect, chromium } from "@playwright/test";
 
-test("test: get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
+test("test: English, get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
   const testAudioEnvPath = `${import.meta.dirname}/../../tests/events/test_en_medium.wav`
   console.log(`testAudioEnvPath: ${testAudioEnvPath}...`);
   

static/tests/{test-app-7860-upload-de.spec.ts → test-app-7860-upload-de-play-single-word.spec.ts}

@@ -44,6 +44,19 @@ test("test: get a phonetic accuracy evaluation from an uploaded audio file.", as
   const ErrorText = errorsElements.all()
   console.log("ErrorText:", (await ErrorText).length, "#");
   await expect(errorsElements).toHaveCount(0);
+
+  const currentWordIndex = page.getByLabel(/Current word index/);
+  currentWordIndex.fill('1');
+  const audioSlittedStudentSpeechOutput = page.getByTestId('waveform-Splitted student speech output');
+  await expect(audioSlittedStudentSpeechOutput).toBeVisible();
+  const buttonPlayStudentSpeechOutput = audioSlittedStudentSpeechOutput.getByLabel('Play', { exact: true })
+  // before playing the audio, the color of the button should be gray
+  await expect(buttonPlayStudentSpeechOutput).toHaveCSS('color', 'rgb(187, 187, 194)');
+  await buttonPlayStudentSpeechOutput.click();
+  await page.waitForTimeout(10);
+  // after playing the audio, the color of the button should be orange, but only for few milliseconds: don't wait too long!
+  await expect(buttonPlayStudentSpeechOutput).toHaveCSS('color', 'rgb(249, 115, 22)');
+  
   console.log("end");
   await page.close();
 });

static/tests/{test-app-7860-upload-en.spec.ts → test-app-7860-upload-en-play-single-word.spec.ts}

@@ -1,6 +1,6 @@
 import { test, expect, chromium } from "@playwright/test";
 
-test("test: get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
+test("test: English, get a phonetic accuracy evaluation from an uploaded audio file.", async () => {
   const testAudioEnvPath = `${import.meta.dirname}/../../tests/events/test_en_easy.wav`
   console.log(`testAudioEnvPath: ${testAudioEnvPath}...`);
   
@@ -15,7 +15,7 @@ test("test: get a phonetic accuracy evaluation from an uploaded audio file.", as
   context.grantPermissions(["microphone"]);
   const page = await browser.newPage({});
 
-  await page.goto('http://localhost:7860/');
+  await page.goto('http://localhost:7860/', { waitUntil: 'commit' });
   await page.getByRole('button', { name: 'TTS backend', exact: true }).click();
   const buttonPlay = page.getByLabel('Play', { exact: true })
   await buttonPlay.click();
@@ -37,6 +37,19 @@ test("test: get a phonetic accuracy evaluation from an uploaded audio file.", as
   const ErrorText = errorsElements.all()
   console.log("ErrorText:", (await ErrorText).length, "#");
   await expect(errorsElements).toHaveCount(0);
+
+  const currentWordIndex = page.getByLabel(/Current word index/);
+  currentWordIndex.fill('2');
+  await page.waitForTimeout(200);
+  const audioSlittedStudentSpeechOutput = page.getByTestId('waveform-Splitted student speech output');
+  await expect(audioSlittedStudentSpeechOutput).toBeVisible();
+  const buttonPlayStudentSpeechOutput = audioSlittedStudentSpeechOutput.getByLabel('Play', { exact: true })
+  // before playing the audio, the color of the button should be gray
+  await expect(buttonPlayStudentSpeechOutput).toHaveCSS('color', 'rgb(187, 187, 194)');
+  await buttonPlayStudentSpeechOutput.click();
+  await page.waitForTimeout(10);
+  // after playing the audio, the color of the button should be orange, but only for few milliseconds: don't wait too long!
+  await expect(buttonPlayStudentSpeechOutput).toHaveCSS('color', 'rgb(249, 115, 22)');
   console.log("end");
   await page.close();
 });