Просмотр исходного кода

✅ test(agora-stt): 增强语音转文字功能的E2E测试稳定性

- 为AgoraSTTComponent按钮添加data-testid属性,提高测试选择器稳定性
- 重构agora-stt.page.ts中的按钮选择器,使用data-testid替代文本匹配
- 增加连接和录制操作的超时时间,适应网络延迟场景
- 添加按钮状态转换的显式等待,确保UI状态正确更新后再执行下一步操作
yourname 4 месяцев назад
Родитель
Сommit
541fe57692

+ 5 - 0
src/client/admin/components/agora-stt/AgoraSTTComponent.tsx

@@ -149,6 +149,7 @@ export const AgoraSTTComponent: React.FC<AgoraSTTComponentProps> = ({
               disabled={!!state.error || state.isConnecting}
               className="flex items-center gap-2"
               aria-label={state.isConnecting ? '正在连接到语音频道' : '加入语音频道'}
+              data-testid="join-channel-button"
             >
               <Wifi className="h-4 w-4" aria-hidden="true" />
               {state.isConnecting ? '连接中...' : '加入频道'}
@@ -160,6 +161,7 @@ export const AgoraSTTComponent: React.FC<AgoraSTTComponentProps> = ({
                   onClick={handleStartRecording}
                   className="flex items-center gap-2"
                   aria-label="开始录音"
+                  data-testid="start-recording-button"
                 >
                   <Play className="h-4 w-4" aria-hidden="true" />
                   开始录音
@@ -170,6 +172,7 @@ export const AgoraSTTComponent: React.FC<AgoraSTTComponentProps> = ({
                   variant="destructive"
                   className="flex items-center gap-2"
                   aria-label="停止录音"
+                  data-testid="stop-recording-button"
                 >
                   <Square className="h-4 w-4" aria-hidden="true" />
                   停止录音
@@ -181,6 +184,7 @@ export const AgoraSTTComponent: React.FC<AgoraSTTComponentProps> = ({
                 variant="outline"
                 className="flex items-center gap-2"
                 aria-label="离开语音频道"
+                data-testid="leave-channel-button"
               >
                 <WifiOff className="h-4 w-4" aria-hidden="true" />
                 离开频道
@@ -191,6 +195,7 @@ export const AgoraSTTComponent: React.FC<AgoraSTTComponentProps> = ({
                 variant="outline"
                 className="flex items-center gap-2"
                 aria-label="清空所有转录结果"
+                data-testid="clear-transcriptions-button"
               >
                 <Trash2 className="h-4 w-4" aria-hidden="true" />
                 清空转录

+ 16 - 7
tests/e2e/pages/admin/agora-stt.page.ts

@@ -20,11 +20,11 @@ export class AgoraSTTPage {
   constructor(page: Page) {
     this.page = page;
     this.pageTitle = page.getByRole('heading', { name: '语音转文字' });
-    this.joinChannelButton = page.getByRole('button', { name: /加入语音频道|连接中\.\.\./ });
-    this.leaveChannelButton = page.getByRole('button', { name: '离开频道' });
-    this.startRecordingButton = page.getByRole('button', { name: '开始录音' });
-    this.stopRecordingButton = page.getByRole('button', { name: '停止录音' });
-    this.clearTranscriptionsButton = page.getByRole('button', { name: '清空转录' });
+    this.joinChannelButton = page.getByTestId('join-channel-button');
+    this.leaveChannelButton = page.getByTestId('leave-channel-button');
+    this.startRecordingButton = page.getByTestId('start-recording-button');
+    this.stopRecordingButton = page.getByTestId('stop-recording-button');
+    this.clearTranscriptionsButton = page.getByTestId('clear-transcriptions-button');
 
     // 状态徽章
     this.connectionStatusBadge = page.getByText(/已连接|未连接/).first();
@@ -73,7 +73,15 @@ export class AgoraSTTPage {
 
   async joinChannel() {
     await this.joinChannelButton.click();
-    await expect(this.connectionStatusBadge).toHaveText('已连接');
+
+    // 等待连接状态更新
+    await expect(this.connectionStatusBadge).toHaveText('已连接', { timeout: 15000 });
+
+    // 等待按钮状态更新 - 先等待加入按钮消失
+    await expect(this.joinChannelButton).not.toBeVisible({ timeout: 5000 });
+
+    // 然后等待离开频道按钮可见
+    await expect(this.leaveChannelButton).toBeVisible({ timeout: 10000 });
   }
 
   async leaveChannel() {
@@ -83,7 +91,8 @@ export class AgoraSTTPage {
 
   async startRecording() {
     await this.startRecordingButton.click();
-    await expect(this.recordingStatusBadge).toHaveText('录制中');
+    // 等待录制状态更新,增加超时时间
+    await expect(this.recordingStatusBadge).toHaveText('录制中', { timeout: 15000 });
   }
 
   async stopRecording() {