feat: add checkbox to allow updating of caps with vendor prefixes

app/renderer/actions/Session.js

@@ -53,12 +53,17 @@ export const IS_ADDING_CLOUD_PROVIDER = 'IS_ADDING_CLOUD_PROVIDER';
 
 export const SET_PROVIDERS = 'SET_PROVIDERS';
 
+export const SET_ADD_VENDOR_PREFIXES = 'SET_ADD_VENDOR_PREFIXES';
+
 
 const CAPS_NEW_COMMAND = 'appium:newCommandTimeout';
 const CAPS_CONNECT_HARDWARE_KEYBOARD = 'appium:connectHardwareKeyboard';
 const CAPS_NATIVE_WEB_SCREENSHOT = 'appium:nativeWebScreenshot';
 const CAPS_ENSURE_WEBVIEW_HAVE_PAGES = 'appium:ensureWebviewsHavePages';
 
+const VALID_W3C_CAPS = ['platformName', 'browserName', 'browserVersion', 'acceptInsecureCerts',
+  'pageLoadStrategy', 'proxy', 'setWindowRect', 'timeouts', 'unhandledPromptBehavior'];
+
 // Multiple requests sometimes send a new session request
 // after establishing a session.
 // This situation could happen easier on cloud vendors,
@@ -174,16 +179,33 @@ export function removeCapability (index) {
   };
 }
 
+function addVendorPrefixes (caps, dispatch, getState) {
+  const prefixedCaps = caps.map((cap) => {
+    // if we don't have a valid unprefixed cap or a cap with an existing prefix, update it
+    if (!VALID_W3C_CAPS.includes(cap.name) && !includes(caps.name, ':')) {
+      cap.name = `appium:${cap.name}`;
+    }
+    return cap;
+  });
+  setCaps(prefixedCaps, getState().session.capsUUID)(dispatch);
+  return prefixedCaps;
+}
+
 /**
  * Start a new appium session with the given caps
  */
 export function newSession (caps, attachSessId = null) {
   return async (dispatch, getState) => {
+    let session = getState().session;
+
+    // first add vendor prefixes to caps if requested
+    if (session.addVendorPrefixes) {
+      caps = addVendorPrefixes(caps, dispatch, getState);
+    }
 
     dispatch({type: NEW_SESSION_REQUESTED, caps});
 
     let desiredCapabilities = caps ? getCapsObject(caps) : {};
-    let session = getState().session;
     let host, port, username, accessKey, https, path, token;
     desiredCapabilities = addCustomCaps(desiredCapabilities);
 
@@ -811,3 +833,9 @@ export function bindWindowClose () {
     });
   };
 }
+
+export function setAddVendorPrefixes (addVendorPrefixes) {
+  return (dispatch) => {
+    dispatch({type: SET_ADD_VENDOR_PREFIXES, addVendorPrefixes});
+  };
+}

app/renderer/components/Session/NewSessionForm.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Button, Input, Modal, Form, Row, Col, Select } from 'antd';
+import { Button, Checkbox, Input, Modal, Form, Row, Col, Select } from 'antd';
 import FormattedCaps from './FormattedCaps';
 import CapabilityControl from './CapabilityControl';
 import SessionStyles from './Session.css';
@@ -54,7 +54,8 @@ export default class NewSessionForm extends Component {
 
   render () {
     const {setCapabilityParam, caps, addCapability, removeCapability, saveSession, hideSaveAsModal,
-           saveAsText, showSaveAsModal, setSaveAsText, isEditingDesiredCaps, t} = this.props;
+           saveAsText, showSaveAsModal, setSaveAsText, isEditingDesiredCaps, t,
+           setAddVendorPrefixes, addVendorPrefixes} = this.props;
 
     return <>
       <Row type={ROW.FLEX} align="top" justify="start" className={SessionStyles.capsFormRow}>
@@ -98,7 +99,17 @@ export default class NewSessionForm extends Component {
               </Col>
             </Row>)}
             <Row>
-              <Col span={24}>
+              <Col span={22}>
+                <FormItem>
+                  <Checkbox
+                    onChange={(e) => setAddVendorPrefixes(e.target.checked)}
+                    checked={addVendorPrefixes}
+                  >
+                    {t('autoAddPrefixes')}
+                  </Checkbox>
+                </FormItem>
+              </Col>
+              <Col span={2}>
                 <FormItem>
                   <Button
                     disabled={isEditingDesiredCaps} id='btnAddDesiredCapability'

app/renderer/reducers/Session.js

@@ -10,7 +10,7 @@ import { NEW_SESSION_REQUESTED, NEW_SESSION_BEGAN, NEW_SESSION_DONE,
          CHANGE_SERVER_TYPE, SET_SERVER_PARAM, SET_SERVER, SET_ATTACH_SESS_ID,
          GET_SESSIONS_REQUESTED, GET_SESSIONS_DONE,
          ENABLE_DESIRED_CAPS_EDITOR, ABORT_DESIRED_CAPS_EDITOR, SAVE_RAW_DESIRED_CAPS, SET_RAW_DESIRED_CAPS, SHOW_DESIRED_CAPS_JSON_ERROR,
-         IS_ADDING_CLOUD_PROVIDER, SET_PROVIDERS,
+         IS_ADDING_CLOUD_PROVIDER, SET_PROVIDERS, SET_ADD_VENDOR_PREFIXES,
          ServerTypes } from '../actions/Session';
 
 const visibleProviders = []; // Pull this from "electron-settings"
@@ -64,6 +64,7 @@ const INITIAL_STATE = {
   isValidCapsJson: true,
   isValidatingCapsJson: false,
   isAddingCloudProvider: false,
+  addVendorPrefixes: true,
 };
 
 let nextState;
@@ -321,6 +322,12 @@ export default function session (state = INITIAL_STATE, action) {
         visibleProviders: action.providers || []
       };
 
+    case SET_ADD_VENDOR_PREFIXES:
+      return {
+        ...state,
+        addVendorPrefixes: action.addVendorPrefixes,
+      };
+
     default:
       return {...state};
   }

assets/locales/en/translation.json

@@ -337,5 +337,6 @@
   "Select Cloud Providers": "Select Cloud Providers",
   "Advanced Settings": "Advanced Settings",
   "Native App Mode": "Native App Mode",
-  "Web/Hybrid App Mode": "Web/Hybrid App Mode"
+  "Web/Hybrid App Mode": "Web/Hybrid App Mode",
+  "autoAddPrefixes": "Automatically add necessary Appium vendor prefixes on start"
 }

copy-en-i18n.js

@@ -17,7 +17,7 @@ async function main () {
   serverPath = path.resolve(__dirname, serverPath);
 
   const enPath = path.resolve(serverPath, ...EN_RESOURCE_PATH);
-  log.info(`Attempting to copy en resourcces from ${enPath}`);
+  log.info(`Attempting to copy en resources from ${enPath}`);
   if (!await fs.exists(enPath)) {
     throw new Error(`Could not find en resources at ${enPath}`);
   }