feat: retrieve commands and execute methods from active extensions

app/common/public/locales/en/translation.json

@@ -320,5 +320,9 @@
   "toggleTableFormatting": "Toggle Table Formatting",
   "copyResultToClipboard": "Copy Result to Clipboard",
   "Property": "Property",
-  "noCapsFound": "No session capabilities found. Please use the Capability Builder to edit, add, and save your capability set. Refer to the tutorial at {{url}}"
+  "noCapsFound": "No session capabilities found. Please use the Capability Builder to edit, add, and save your capability set. Refer to the tutorial at {{url}}",
+  "executeMethods": "Execute Methods",
+  "dynamicCommandsDescription": "Run commands supported by the currently active driver and plugin(s). Note that some commands may only work in specific contexts. Any commands not supported by WebdriverIO are not included in this list.",
+  "dynamicExecuteMethodsDescription": "Run any execute method supported by the currently active driver and plugin(s).",
+  "methodDeprecated": "This method is deprecated"
 }

app/common/renderer/actions/SessionInspector.js

@@ -81,10 +81,6 @@ export const HIDE_PROMPT_KEEP_ALIVE = 'HIDE_PROMPT_KEEP_ALIVE';
 
 export const SELECT_INSPECTOR_TAB = 'SELECT_INSPECTOR_TAB';
 
-export const ENTERING_COMMAND_ARGS = 'ENTERING_COMMAND_ARGS';
-export const CANCEL_PENDING_COMMAND = 'CANCEL_PENDING_COMMAND';
-export const SET_COMMAND_ARG = 'SET_COMMAND_ARG';
-
 export const SET_CONTEXT = 'SET_CONTEXT';
 
 export const SET_APP_ID = 'SET_APP_ID';
@@ -95,8 +91,6 @@ export const SET_KEEP_ALIVE_INTERVAL = 'SET_KEEP_ALIVE_INTERVAL';
 export const SET_USER_WAIT_TIMEOUT = 'SET_USER_WAIT_TIMEOUT';
 export const SET_LAST_ACTIVE_MOMENT = 'SET_LAST_ACTIVE_MOMENT';
 
-export const SET_VISIBLE_COMMAND_RESULT = 'SET_VISIBLE_COMMAND_RESULT';
-
 export const SET_AWAITING_MJPEG_STREAM = 'SET_AWAITING_MJPEG_STREAM';
 
 export const SHOW_GESTURE_EDITOR = 'SHOW_GESTURE_EDITOR';
@@ -343,7 +337,7 @@ export function restartSession(error, params) {
     });
     const quitSes = quitSession('Window closed');
     const newSes = newSession(getState().builder.caps);
-    const getPageSrc = applyClientMethod({methodName: 'getPageSource', ignoreResult: true});
+    const getPageSrc = applyClientMethod({methodName: 'getPageSource'});
     const storeSessionSet = storeSessionSettings();
     const getSavedClientFrame = getSavedClientFramework();
     const runKeepAliveLp = runKeepAliveLoop();
@@ -458,7 +452,6 @@ export function storeSessionSettings(updatedSessionSettings = null) {
       const action = applyClientMethod({
         methodName: 'getSettings',
         skipRefresh: true,
-        ignoreResult: true,
       });
       sessionSettings = await action(dispatch, getState);
     }
@@ -587,7 +580,6 @@ export function setLocatorTestElement(elementId) {
           methodName: 'getElementRect',
           skipRefresh: true,
           skipRecord: true,
-          ignoreResult: true,
         });
         const {commandRes} = await action(dispatch, getState);
         dispatch({
@@ -824,21 +816,23 @@ export function selectInspectorTab(interaction) {
   };
 }
 
-export function startEnteringCommandArgs(commandName, command) {
-  return (dispatch) => {
-    dispatch({type: ENTERING_COMMAND_ARGS, commandName, command});
-  };
-}
-
-export function cancelPendingCommand() {
-  return (dispatch) => {
-    dispatch({type: CANCEL_PENDING_COMMAND});
-  };
-}
+export function getSupportedSessionMethods() {
+  return async (_dispatch, getState) => {
+    async function safelyCallCommand(methodName) {
+      try {
+        const action = executeDriverCommand({methodName});
+        const {commandRes} = await action(getState);
+        return commandRes;
+      } catch {
+        return [];
+      }
+    }
 
-export function setCommandArg(index, value) {
-  return (dispatch) => {
-    dispatch({type: SET_COMMAND_ARG, index, value});
+    const [commands, executeMethods] = await Promise.all([
+      safelyCallCommand('getAppiumCommands'),
+      safelyCallCommand('getAppiumExtensions'),
+    ]);
+    return {commands, executeMethods};
   };
 }
 
@@ -907,7 +901,6 @@ export function callClientMethod(params) {
   return async (dispatch, getState) => {
     const {driver, appMode, isUsingMjpegMode, isSourceRefreshOn, autoSessionRestart} =
       getState().inspector;
-    const {methodName, ignoreResult = true} = params;
     params.appMode = appMode;
     params.autoSessionRestart = autoSessionRestart;
 
@@ -927,22 +920,6 @@ export function callClientMethod(params) {
       action(dispatch, getState);
       const inspectorDriver = InspectorDriver.instance(driver);
       const res = await inspectorDriver.run(params);
-      let {commandRes} = res;
-
-      // Ignore empty objects
-      if (_.isObject(res) && _.isEmpty(res)) {
-        commandRes = null;
-      }
-
-      if (!ignoreResult) {
-        // if the user is running actions manually, we want to show the full response with the
-        // ability to scroll etc...
-        const result = JSON.stringify(commandRes, null, '  ');
-        const truncatedResult = _.truncate(result, {length: 2000});
-        log.info(`Result of client command was:`);
-        log.info(truncatedResult);
-        setVisibleCommandResult(result, methodName)(dispatch);
-      }
       res.elementId = res.id;
       return res;
     } catch (error) {
@@ -957,9 +934,14 @@ export function callClientMethod(params) {
   };
 }
 
-export function setVisibleCommandResult(result, methodName) {
-  return (dispatch) => {
-    dispatch({type: SET_VISIBLE_COMMAND_RESULT, result, methodName});
+// Simple alternative to callClientMethod, for when we only want to
+// run the command without any side-effects
+export function executeDriverCommand(params) {
+  return async (getState) => {
+    const {driver} = getState().inspector;
+    params.skipRefresh = true;
+    const inspectorDriver = InspectorDriver.instance(driver);
+    return await inspectorDriver.run(params);
   };
 }
 

app/common/renderer/components/SessionInspector/CommandsTab/CommandResultModal.jsx

@@ -173,7 +173,7 @@ const CommandResultRawTable = ({result}) => {
 };
 
 const CommandResultModalFooter = ({
-  visibleCommandResult,
+  commandResult,
   closeCommandModal,
   setFormatResult,
   formatResult,
@@ -195,7 +195,7 @@ const CommandResultModalFooter = ({
           <Button
             icon={<CopyOutlined />}
             disabled={formatResult}
-            onClick={() => copyToClipboard(visibleCommandResult)}
+            onClick={() => copyToClipboard(commandResult)}
           />
         </Tooltip>
       </Space>
@@ -208,31 +208,26 @@ const CommandResultModalFooter = ({
   </Row>
 );
 
-const CommandResultModal = ({
-  visibleCommandMethod,
-  visibleCommandResult,
-  setVisibleCommandResult,
-  t,
-}) => {
+const CommandResultModal = ({commandName, commandResult, clearCurrentCommand, t}) => {
   const [formatResult, setFormatResult] = useState(false);
 
-  const {parsedResult, isPrimitive} = parseCommandResult(visibleCommandResult);
+  const {parsedResult, isPrimitive} = parseCommandResult(commandResult);
 
   const closeCommandModal = () => {
-    setVisibleCommandResult(null);
+    clearCurrentCommand();
     setFormatResult(false);
   };
 
   return (
     <Modal
-      title={t('methodCallResult', {methodName: visibleCommandMethod})}
-      open={!!visibleCommandResult}
+      title={t('methodCallResult', {methodName: commandName})}
+      open={!!commandResult}
       onCancel={() => closeCommandModal()}
       width={{md: '80%', lg: '70%', xl: '60%', xxl: '50%'}}
       className={styles.commandResultModal}
       footer={
         <CommandResultModalFooter
-          visibleCommandResult={visibleCommandResult}
+          commandResult={commandResult}
           closeCommandModal={closeCommandModal}
           setFormatResult={setFormatResult}
           formatResult={formatResult}
@@ -244,7 +239,7 @@ const CommandResultModal = ({
       {formatResult ? (
         <CommandResultFormattedTable result={parsedResult} isPrimitive={isPrimitive} t={t} />
       ) : (
-        <CommandResultRawTable result={visibleCommandResult} />
+        <CommandResultRawTable result={commandResult} />
       )}
     </Modal>
   );