android-midscene-automation 0.1.13 → 0.1.14

package/server/appium-recorder/repository.ts

@@ -32,6 +32,7 @@ export type AppiumRecordedStepRecord = {
     | 'pinch'
     | 'runScript';
   label: string;
+  note?: string;
   selector?: {
     strategy: 'accessibilityId' | 'id' | 'androidUiAutomator' | 'xpath' | 'bounds';
     value?: string;
@@ -80,6 +81,7 @@ export type AppiumRecordedStepRecord = {
     parentBranch?: 'yes' | 'no';
     successTargetId?: string;
     failureTargetId?: string;
+    textMatch?: 'contains' | 'exact';
     collapsed?: boolean;
   };
   pageBefore?: {
@@ -137,6 +139,17 @@ type AppiumRecordedScriptRow = {
   updated_at: string;
 };
 
+export type AppiumReplayReportRecord = {
+  id: string;
+  scriptId: string;
+  scriptName: string;
+  success: boolean;
+  filePath: string;
+  startedAt: string;
+  completedAt: string;
+  createdAt: string;
+};
+
 let initialized = false;
 
 function createAppiumRecordedScriptsTable() {
@@ -156,10 +169,28 @@ function createAppiumRecordedScriptsTable() {
   `);
 }
 
+function createAppiumReplayReportsTable() {
+  runSql(`
+    CREATE TABLE IF NOT EXISTS appium_replay_reports (
+      id TEXT PRIMARY KEY,
+      script_id TEXT NOT NULL,
+      script_name TEXT NOT NULL,
+      success INTEGER NOT NULL,
+      file_path TEXT NOT NULL,
+      started_at TEXT NOT NULL,
+      completed_at TEXT NOT NULL,
+      created_at TEXT NOT NULL
+    );
+    CREATE INDEX IF NOT EXISTS idx_appium_replay_reports_script_id
+      ON appium_replay_reports(script_id, created_at DESC);
+  `);
+}
+
 function initDb() {
   if (initialized) return;
   initialized = true;
   createAppiumRecordedScriptsTable();
+  createAppiumReplayReportsTable();
   const columns = querySql<{ name: string }>('PRAGMA table_info(appium_recorded_scripts);').map((column) => column.name);
   if (columns.includes('steps_json') || !columns.includes('flow_json')) {
     runSql('DROP TABLE appium_recorded_scripts;');
@@ -320,3 +351,50 @@ export function deleteAppiumRecordedScript(id: string) {
     WHERE id = ${sqlString(id)};
   `);
 }
+
+export function importAppiumRecordedScript(input: {
+  name: string;
+  appPackage: string;
+  appActivity?: string;
+  deviceId?: string;
+  steps: AppiumRecordedStepRecord[];
+}) {
+  initDb();
+  const baseName = input.name.trim() || '导入脚本';
+  const existingNames = new Set(listAppiumRecordedScripts().map((script) => script.name));
+  let name = baseName;
+  let suffix = 2;
+  while (existingNames.has(name)) {
+    name = `${baseName} (${suffix})`;
+    suffix += 1;
+  }
+  return saveAppiumRecordedScript({ ...input, name });
+}
+
+export function saveAppiumReplayReport(input: Omit<AppiumReplayReportRecord, 'id' | 'createdAt'>) {
+  initDb();
+  const id = createId('appium_report');
+  const createdAt = new Date().toISOString();
+  runSql(`
+    INSERT INTO appium_replay_reports (
+      id,
+      script_id,
+      script_name,
+      success,
+      file_path,
+      started_at,
+      completed_at,
+      created_at
+    ) VALUES (
+      ${sqlString(id)},
+      ${sqlString(input.scriptId)},
+      ${sqlString(input.scriptName)},
+      ${input.success ? 1 : 0},
+      ${sqlString(input.filePath)},
+      ${sqlString(input.startedAt)},
+      ${sqlString(input.completedAt)},
+      ${sqlString(createdAt)}
+    );
+  `);
+  return { id, ...input, createdAt };
+}

package/server/appium-recorder/routes.ts

@@ -6,12 +6,17 @@ import type { IncomingMessage, ServerResponse } from 'node:http';
 import {
   deleteAppiumRecordedScript,
   getAppiumRecordedScript,
+  importAppiumRecordedScript,
   listAppiumRecordedScripts,
   saveAppiumRecordedScript,
   type AppiumRecordedStepRecord,
 } from './repository';
-import { replayAppiumScript } from './appium-runner';
+import { launchAppOnDevice, replayAppiumScript } from './appium-runner';
 import { isRemoteDeviceId, sendRemoteCommand } from '../remote-agents/registry';
+import { getAdbCommand } from '../android-sdk';
+
+const treeDumpTasks = new Map<string, Promise<string>>();
+const replayingDevices = new Set<string>();
 
 function sendJson(res: ServerResponse, payload: unknown, statusCode = 200) {
   res.statusCode = statusCode;
@@ -19,6 +24,17 @@ function sendJson(res: ServerResponse, payload: unknown, statusCode = 200) {
   res.end(JSON.stringify(payload));
 }
 
+function sendJsonDownload(res: ServerResponse, payload: unknown, fileName: string) {
+  res.statusCode = 200;
+  res.setHeader('Content-Type', 'application/json; charset=utf-8');
+  res.setHeader('Content-Disposition', `attachment; filename="appium-script.json"; filename*=UTF-8''${encodeURIComponent(fileName)}`);
+  res.end(JSON.stringify(payload, null, 2));
+}
+
+function sendStreamEvent(res: ServerResponse, payload: unknown) {
+  res.write(`${JSON.stringify(payload)}\n`);
+}
+
 async function readBody<T>(req: IncomingMessage) {
   let body = '';
   req.on('data', (chunk) => {
@@ -44,19 +60,30 @@ function execFileText(command: string, args: string[] = []) {
 }
 
 async function dumpWindowHierarchy(deviceId: string) {
-  const localPath = path.join(os.tmpdir(), `midscene-appium-${deviceId.replace(/[^\w.-]/g, '_')}-${Date.now()}.xml`);
-  const remotePath = '/data/local/tmp/midscene_appium_uidump.xml';
-  await execFileText('adb', ['-s', deviceId, 'shell', 'uiautomator', 'dump', remotePath]);
-  await execFileText('adb', ['-s', deviceId, 'pull', remotePath, localPath]);
+  const activeTask = treeDumpTasks.get(deviceId);
+  if (activeTask) return activeTask;
+
+  const task = (async () => {
+    const localPath = path.join(os.tmpdir(), `midscene-appium-${deviceId.replace(/[^\w.-]/g, '_')}-${Date.now()}.xml`);
+    const remotePath = '/data/local/tmp/midscene_appium_uidump.xml';
+    await execFileText(getAdbCommand(), ['-s', deviceId, 'shell', 'uiautomator', 'dump', remotePath]);
+    await execFileText(getAdbCommand(), ['-s', deviceId, 'pull', remotePath, localPath]);
+    try {
+      return await fs.readFile(localPath, 'utf8');
+    } finally {
+      await fs.unlink(localPath).catch(() => undefined);
+    }
+  })();
+  treeDumpTasks.set(deviceId, task);
   try {
-    return await fs.readFile(localPath, 'utf8');
+    return await task;
   } finally {
-    await fs.unlink(localPath).catch(() => undefined);
+    if (treeDumpTasks.get(deviceId) === task) treeDumpTasks.delete(deviceId);
   }
 }
 
 async function getCurrentActivity(deviceId: string) {
-  const output = await execFileText('adb', ['-s', deviceId, 'shell', 'dumpsys', 'activity', 'activities']);
+  const output = await execFileText(getAdbCommand(), ['-s', deviceId, 'shell', 'dumpsys', 'activity', 'activities']);
   const resumedLine = output
     .split(/\r?\n/)
     .find((line) => /(?:topResumedActivity|ResumedActivity|mResumedActivity)/.test(line));
@@ -64,7 +91,7 @@ async function getCurrentActivity(deviceId: string) {
 }
 
 async function tapDevice(deviceId: string, x: number, y: number) {
-  await execFileText('adb', [
+  await execFileText(getAdbCommand(), [
     '-s',
     deviceId,
     'shell',
@@ -76,7 +103,7 @@ async function tapDevice(deviceId: string, x: number, y: number) {
 }
 
 async function pressDeviceKey(deviceId: string, keyCode: number) {
-  await execFileText('adb', [
+  await execFileText(getAdbCommand(), [
     '-s',
     deviceId,
     'shell',
@@ -109,6 +136,10 @@ export async function handleAppiumRecorderRequest(
       const deviceId = requestUrl.searchParams.get('deviceId')?.trim() || selectedDeviceId;
       if (!deviceId) throw new Error('未检测到可用设备');
       assertDeviceAllowed(deviceId);
+      if (replayingDevices.has(deviceId)) {
+        sendJson(res, { message: '回放期间已暂停组件树刷新' }, 409);
+        return true;
+      }
       if (isRemoteDeviceId(deviceId)) {
         const data = await sendRemoteCommand(deviceId, 'tree') as { xml?: string; activity?: string; dumpedAt?: string };
         sendJson(res, {
@@ -160,6 +191,19 @@ export async function handleAppiumRecorderRequest(
       return true;
     }
 
+    if (pathname === '/api/appium-recorder/launch-app' && req.method === 'POST') {
+      const parsed = await readBody<{ deviceId?: string; packageName?: string }>(req);
+      const deviceId = parsed.deviceId?.trim() || selectedDeviceId;
+      const packageName = parsed.packageName?.trim() || '';
+      if (!deviceId) throw new Error('未检测到可用设备');
+      if (!packageName) throw new Error('请选择预设 App');
+      assertDeviceAllowed(deviceId);
+      if (isRemoteDeviceId(deviceId)) throw new Error('远程设备暂不支持直接启动 App');
+      await launchAppOnDevice(deviceId, packageName);
+      sendJson(res, { success: true });
+      return true;
+    }
+
     if (pathname === '/api/appium-recorder/scripts' && req.method === 'GET') {
       sendJson(res, { scripts: listAppiumRecordedScripts() });
       return true;
@@ -186,6 +230,53 @@ export async function handleAppiumRecorderRequest(
       return true;
     }
 
+    if (pathname === '/api/appium-recorder/scripts/import' && req.method === 'POST') {
+      const parsed = await readBody<{
+        schemaVersion?: number;
+        script?: {
+          name?: string;
+          appPackage?: string;
+          appActivity?: string;
+          deviceId?: string;
+          steps?: AppiumRecordedStepRecord[];
+        };
+      }>(req);
+      const imported = parsed.script;
+      if (!imported || typeof imported !== 'object') throw new Error('导入文件缺少 script 数据');
+      if (!Array.isArray(imported.steps)) throw new Error('导入文件的 steps 格式无效');
+      const invalidStep = imported.steps.some((step) => (
+        !step || typeof step !== 'object' || typeof step.id !== 'string' || typeof step.type !== 'string'
+      ));
+      if (invalidStep) throw new Error('导入文件包含无效节点');
+      const script = importAppiumRecordedScript({
+        name: imported.name || '',
+        appPackage: imported.appPackage || '',
+        appActivity: imported.appActivity || '',
+        deviceId: imported.deviceId || '',
+        steps: imported.steps,
+      });
+      sendJson(res, { script });
+      return true;
+    }
+
+    const exportMatch = pathname.match(/^\/api\/appium-recorder\/scripts\/([^/]+)\/export$/);
+    if (exportMatch && req.method === 'GET') {
+      const script = getAppiumRecordedScript(decodeURIComponent(exportMatch[1]));
+      if (!script) throw new Error('Appium 录制脚本不存在');
+      sendJsonDownload(res, {
+        schemaVersion: 1,
+        exportedAt: new Date().toISOString(),
+        script: {
+          name: script.name,
+          appPackage: script.appPackage,
+          appActivity: script.appActivity,
+          deviceId: script.deviceId,
+          steps: script.steps,
+        },
+      }, `${script.name}.json`);
+      return true;
+    }
+
     const deleteMatch = pathname.match(/^\/api\/appium-recorder\/scripts\/([^/]+)$/);
     if (deleteMatch && req.method === 'DELETE') {
       deleteAppiumRecordedScript(decodeURIComponent(deleteMatch[1]));
@@ -200,20 +291,56 @@ export async function handleAppiumRecorderRequest(
       if (!script) throw new Error('Appium 录制脚本不存在');
       const deviceId = parsed.deviceId || selectedDeviceId;
       assertDeviceAllowed(deviceId);
+      const streamOutput = req.headers.accept?.includes('application/x-ndjson') === true;
+      if (streamOutput) {
+        res.statusCode = 200;
+        res.setHeader('Content-Type', 'application/x-ndjson; charset=utf-8');
+        res.setHeader('Cache-Control', 'no-cache, no-transform');
+        res.setHeader('X-Accel-Buffering', 'no');
+        res.flushHeaders();
+      }
       if (isRemoteDeviceId(deviceId)) {
         const result = await sendRemoteCommand(deviceId, 'replay', { script }) as { success?: boolean; output?: string };
-        sendJson(res, result, result.success ? 200 : 500);
+        if (streamOutput) {
+          result.output?.split(/\r?\n/).forEach((line) => sendStreamEvent(res, { type: 'log', line }));
+          sendStreamEvent(res, { type: 'result', ...result });
+          res.end();
+        } else {
+          sendJson(res, result, result.success ? 200 : 500);
+        }
         return true;
       }
-      const result = await replayAppiumScript(script, deviceId);
-      sendJson(res, result, result.success ? 200 : 500);
+      replayingDevices.add(deviceId);
+      try {
+        await treeDumpTasks.get(deviceId)?.catch(() => undefined);
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        const result = await replayAppiumScript(
+          script,
+          deviceId,
+          streamOutput ? (line) => sendStreamEvent(res, { type: 'log', line }) : undefined,
+        );
+        if (streamOutput) {
+          sendStreamEvent(res, { type: 'result', ...result });
+          res.end();
+        } else {
+          sendJson(res, result, result.success ? 200 : 500);
+        }
+      } finally {
+        replayingDevices.delete(deviceId);
+      }
       return true;
     }
 
     sendJson(res, { message: 'Appium Recorder 接口不存在' }, 404);
     return true;
   } catch (error) {
-    sendJson(res, { message: error instanceof Error ? error.message : 'Appium Recorder 请求失败' }, 500);
+    const message = error instanceof Error ? error.message : 'Appium Recorder 请求失败';
+    if (res.headersSent) {
+      sendStreamEvent(res, { type: 'error', message });
+      res.end();
+    } else {
+      sendJson(res, { message }, 500);
+    }
     return true;
   }
 }

package/server/config.ts

@@ -5,6 +5,10 @@ import { appDataPath } from './paths';
 import { loadModelConfigFromDb, saveModelConfigToDb } from './config-store';
 
 export type AppConfig = {
+  runtime: {
+    androidSdkPath: string;
+    reportOutputPath: string;
+  };
   midscene: {
     model: {
       provider: 'custom' | 'codex';
@@ -30,6 +34,10 @@ const legacyConfigPath = appDataPath('config.yaml');
 
 function defaultConfig(): AppConfig {
   return {
+    runtime: {
+      androidSdkPath: '',
+      reportOutputPath: '',
+    },
     midscene: {
       model: {
         provider: 'custom',
@@ -61,6 +69,10 @@ function normalizeEnv(env: unknown): Record<string, string> {
 function normalizeConfig(config: Partial<AppConfig> | null | undefined): AppConfig {
   const fallback = defaultConfig();
   return {
+    runtime: {
+      androidSdkPath: config?.runtime?.androidSdkPath?.trim() || fallback.runtime.androidSdkPath,
+      reportOutputPath: config?.runtime?.reportOutputPath?.trim() || fallback.runtime.reportOutputPath,
+    },
     midscene: {
       model: {
         provider: config?.midscene?.model?.provider || (

package/server/http-api.ts

@@ -39,6 +39,7 @@ import { importTestCaseFile, MAX_TEST_CASE_FILE_SIZE } from './test-case-import/
 import { handleAppiumRecorderRequest } from './appium-recorder/routes';
 import { handleRemoteAgentRequest } from './remote-agents/routes';
 import { isRemoteDeviceId, listRemoteAndroidDevices, sendRemoteCommand } from './remote-agents/registry';
+import { getAdbCommand } from './android-sdk';
 
 async function readBody<T>(req: IncomingMessage) {
   let body = '';
@@ -110,7 +111,7 @@ type AndroidDisplayInfo = {
 };
 
 async function listAdbDevices() {
-  const output = await execFileText('adb', ['devices', '-l']);
+  const output = await execFileText(getAdbCommand(), ['devices', '-l']);
   const devices = output
     .split('\n')
     .map((line) => line.trim())
@@ -133,7 +134,7 @@ async function listAdbDevices() {
 }
 
 async function getAdbDisplayInfo(deviceId: string) {
-  const output = await execFileText('adb', ['-s', deviceId, 'shell', 'wm', 'size']);
+  const output = await execFileText(getAdbCommand(), ['-s', deviceId, 'shell', 'wm', 'size']);
   const match = output.match(/Override size:\s*(\d+)x(\d+)/i) || output.match(/Physical size:\s*(\d+)x(\d+)/i);
 
   if (!match) {
@@ -270,6 +271,8 @@ const PLAYGROUND_PROXY_PREFIXES = [
   '/runtime-info',
   '/interface-info',
   '/screenshot',
+  '/action-space',
+  '/execute',
   '/interact',
   '/config',
   '/connectivity-test',
@@ -714,7 +717,7 @@ export function createApiMiddleware() {
           return;
         }
 
-        execFile('adb', ['-s', deviceId, 'exec-out', 'screencap', '-p'], { encoding: 'buffer', maxBuffer: 20 * 1024 * 1024 }, (error, stdout, stderr) => {
+        execFile(getAdbCommand(), ['-s', deviceId, 'exec-out', 'screencap', '-p'], { encoding: 'buffer', maxBuffer: 20 * 1024 * 1024 }, (error, stdout, stderr) => {
           if (error) {
             res.statusCode = 500;
             res.setHeader('Content-Type', 'application/json; charset=utf-8');
@@ -752,7 +755,7 @@ export function createApiMiddleware() {
           res.end(JSON.stringify({ success: true, result }));
           return;
         }
-        const result = await execFileJson('adb', ['-s', deviceId, 'shell', 'input', 'tap', String(x), String(y)]);
+        const result = await execFileJson(getAdbCommand(), ['-s', deviceId, 'shell', 'input', 'tap', String(x), String(y)]);
         res.setHeader('Content-Type', 'application/json; charset=utf-8');
         res.end(JSON.stringify({ success: true, ...result }));
       } catch (error) {
@@ -781,7 +784,7 @@ export function createApiMiddleware() {
           res.end(JSON.stringify({ success: true, result }));
           return;
         }
-        const result = await execFileJson('adb', ['-s', deviceId, 'shell', 'input', 'keyevent', String(keyCode)]);
+        const result = await execFileJson(getAdbCommand(), ['-s', deviceId, 'shell', 'input', 'keyevent', String(keyCode)]);
         res.setHeader('Content-Type', 'application/json; charset=utf-8');
         res.end(JSON.stringify({ success: true, ...result }));
       } catch (error) {
@@ -846,7 +849,7 @@ export function createApiMiddleware() {
           return;
         }
         const result = await execFileJson(
-          'adb',
+          getAdbCommand(),
           ['-s', deviceId, 'shell', 'input', 'swipe', String(startX), String(startY), String(endX), String(endY), String(duration)],
         );
         res.setHeader('Content-Type', 'application/json; charset=utf-8');

package/src/App.vue

@@ -47,7 +47,10 @@ import type {
   SavedScript,
 } from './types';
 
-const activeMenu = ref<MenuKey>('generator');
+const ACTIVE_MENU_STORAGE_KEY = 'android-midscene-automation:active-menu';
+const menuKeys: MenuKey[] = ['generator', 'automation', 'config', 'appium'];
+const storedMenu = window.localStorage.getItem(ACTIVE_MENU_STORAGE_KEY) as MenuKey | null;
+const activeMenu = ref<MenuKey>(storedMenu && menuKeys.includes(storedMenu) ? storedMenu : 'generator');
 const activeGeneratorMode = ref<GeneratorMode>('ai');
 const sourcePrompt = ref('');
 const steps = ref<ScriptStep[]>([]);
@@ -141,6 +144,10 @@ const appPresetForm = reactive({
 });
 
 const configForm = reactive<ConfigForm>({
+  runtime: {
+    androidSdkPath: '',
+    reportOutputPath: '',
+  },
   midscene: {
     model: {
       provider: 'custom',
@@ -587,6 +594,7 @@ const generateWithModel = async () => {
 
 const loadConfig = async () => {
   const payload = await api.getConfig();
+  Object.assign(configForm.runtime, payload.runtime || {});
   Object.assign(configForm.midscene.model, payload.midscene.model);
   Object.keys(configForm.midscene.env).forEach((key) => {
     delete configForm.midscene.env[key];
@@ -647,13 +655,13 @@ const getMidsceneModelConfigError = () => {
 const saveModelConfig = async () => {
   isSavingModelConfig.value = true;
   errorMessage.value = '';
-  openActionDialog('保存模型配置');
+  openActionDialog('保存参数配置');
   try {
     await api.saveConfig(configForm);
     closeActionDialog();
-    ElMessage.success('模型配置已保存');
+    ElMessage.success('参数配置已保存');
   } catch (error) {
-    const message = error instanceof Error ? error.message : '模型配置保存失败';
+    const message = error instanceof Error ? error.message : '参数配置保存失败';
     errorMessage.value = message;
     failActionDialog(message);
   } finally {
@@ -797,10 +805,6 @@ const refreshAdbPreviewAfterInput = () => {
 };
 
 const refreshDevicePreview = () => {
-  if (activeMenu.value === 'appium') {
-    loadAdbPreview();
-    return;
-  }
   if (devicePreviewMode.value === 'stream' && playgroundFrameUrl.value) {
     playgroundFrameUrl.value = `${api.APP_BASE}/__android_playground__/?ts=${Date.now()}`;
     return;
@@ -838,6 +842,7 @@ const markBackendOffline = () => {
 const loadPlaygroundStatus = async () => {
   if (backendOffline.value) return;
   if (!playgroundDeviceId.value) {
+    stopAppiumPreviewTimer();
     playgroundAvailable.value = false;
     playgroundPreviewError.value = '';
     playgroundFrameUrl.value = '';
@@ -853,7 +858,7 @@ const loadPlaygroundStatus = async () => {
 
     const matchedDevice = !payload.deviceId || payload.deviceId === playgroundDeviceId.value;
     const hasRealtimeStream = payload.previewKind === 'scrcpy' && payload.sessionConnected === true;
-    const hasPlayground = Boolean(payload.available) && matchedDevice && (hasRealtimeStream || !payload.previewError);
+    const hasPlayground = Boolean(payload.available) && matchedDevice && hasRealtimeStream;
     playgroundAvailable.value = androidDevices.value.some((item) => item.status === 'device');
     playgroundPreviewError.value =
       matchedDevice && !hasRealtimeStream
@@ -862,18 +867,13 @@ const loadPlaygroundStatus = async () => {
 
     const nextSignature = `${payload.url || ''}::${playgroundDeviceId.value}`;
     if (hasPlayground) {
-      if (nextSignature !== playgroundFrameSignature.value) {
+      stopAppiumPreviewTimer();
+      if (nextSignature !== playgroundFrameSignature.value || !playgroundFrameUrl.value) {
         playgroundFrameSignature.value = nextSignature;
         playgroundFrameUrl.value = `${api.APP_BASE}/__android_playground__/?ts=${Date.now()}`;
       }
-      if (activeMenu.value === 'appium') {
-        if (devicePreviewMode.value !== 'screenshot' || !devicePreviewUrl.value) {
-          loadAdbPreview();
-        }
-      } else {
-        devicePreviewUrl.value = '';
-        devicePreviewMode.value = 'stream';
-      }
+      devicePreviewUrl.value = '';
+      devicePreviewMode.value = 'stream';
       playgroundPreviewError.value = '';
     }
 
@@ -881,6 +881,7 @@ const loadPlaygroundStatus = async () => {
       playgroundFrameUrl.value = '';
       playgroundFrameSignature.value = '';
       loadAdbPreview();
+      if (activeMenu.value === 'appium') startAppiumPreviewTimer();
     }
   } catch (error) {
     if (isBackendFetchError(error)) {
@@ -1230,15 +1231,14 @@ watch(
 );
 
 watch(activeMenu, (menu) => {
-  if (menu === 'appium') {
-    startAppiumPreviewTimer();
-  } else if (menu === 'automation') {
+  window.localStorage.setItem(ACTIVE_MENU_STORAGE_KEY, menu);
+  if (menu === 'appium' || menu === 'automation') {
     stopAppiumPreviewTimer();
     void loadPlaygroundStatus();
   } else {
     stopAppiumPreviewTimer();
   }
-});
+}, { immediate: true });
 
 onMounted(async () => {
   try {
@@ -1478,7 +1478,7 @@ onUnmounted(() => {
           :device-actions="deviceActions"
           :playground-available="playgroundAvailable"
           :playground-device-id="playgroundDeviceId"
-          :playground-frame-url="''"
+          :playground-frame-url="activeMenu === 'appium' ? playgroundFrameUrl : ''"
           :playground-preview-error="playgroundPreviewError"
           :device-preview-url="activeMenu === 'appium' ? devicePreviewUrl : ''"
           :android-devices="androidDevices"