WIP: Control flow fork

packages/selenium-ide/src/content/commands-api.js

@@ -41,6 +41,8 @@ function doCommands(request, sender, sendResponse) {
     } else if (request.commands == "domWait") {
       selenium["doDomWait"]("", selenium.preprocessParameter(""));
       sendResponse({ dom_time: window.sideex_new_page });
+    } else if (isConditinal(request.commands)) {
+      executeConditional(request, sendResponse);
     } else {
       const upperCase = request.commands.charAt(0).toUpperCase() + request.commands.slice(1);
       if (selenium["do" + upperCase] != null) {
@@ -112,6 +114,36 @@ function doCommands(request, sender, sendResponse) {
   }
 }
 
+function isConditinal(commandName) {
+  return ["if", "while"].includes(commandName);
+}
+
+function executeConditional(request, sendResponse) {
+
+  const upperCase = request.commands.charAt(0).toUpperCase() + request.commands.slice(1);
+  if (selenium["do" + upperCase] != null) {
+    try {
+      document.body.setAttribute("SideeXPlayingFlag", true);
+      let returnValue = selenium["do"+upperCase](request.target,selenium.preprocessParameter(request.value));
+      // conditional command executed!
+      if (returnValue) {
+        document.body.removeAttribute("SideeXPlayingFlag");
+        sendResponse({result: "truthy"});
+      } else {
+        document.body.removeAttribute("SideeXPlayingFlag");
+        sendResponse({result: "falsy"});
+      }
+    } catch(e) {
+      // Synchronous command failed
+      document.body.removeAttribute("SideeXPlayingFlag");
+      sendResponse({result: e.message});
+    }
+  } else {
+    sendResponse({ result: "Unknown command: " + request.commands });
+  }
+
+}
+
 if (!window._listener) {
   window._listener = doCommands;
   browser.runtime.onMessage.addListener(doCommands);

packages/selenium-ide/src/content/selenium-api.js

@@ -428,6 +428,14 @@ Selenium.prototype.doVerifyElementPresent = function(locator) {
   }
 };
 
+Selenium.prototype.doIf = function(string) {
+  return eval(string);
+};
+
+Selenium.prototype.doEnd = function() {
+  return true;
+};
+
 Selenium.prototype.doVerifyElementNotPresent = function(locator) {
   try {
     this.browserbot.findElement(locator);

packages/selenium-ide/src/neo/IO/SideeX/playback.js

@@ -20,6 +20,7 @@ import PlaybackState, { PlaybackStates } from "../../stores/view/PlaybackState";
 import UiState from "../../stores/view/UiState";
 import ExtCommand, { isExtCommand } from "./ext-command";
 import { xlateArgument } from "./formatCommand";
+import PlaybackTree from "./playbackTree";
 
 export const extCommand = new ExtCommand();
 // In order to not break the separation of the execution loop from the state of the playback
@@ -37,6 +38,7 @@ let ignoreBreakpoint = false;
 
 function play(currUrl) {
   baseUrl = currUrl;
+  PlaybackTree.processCommands(PlaybackState.runningQueue);
   prepareToPlay()
     .then(executionLoop)
     .then(finishPlaying)
@@ -51,7 +53,9 @@ function playAfterConnectionFailed() {
 }
 
 function executionLoop() {
-  (PlaybackState.currentPlayingIndex < 0) ? PlaybackState.setPlayingIndex(0) : PlaybackState.setPlayingIndex(PlaybackState.currentPlayingIndex + 1);
+  if (PlaybackState.currentPlayingIndex < 0) {
+    PlaybackState.setPlayingIndex(0);
+  }
   // reached the end
   if (PlaybackState.currentPlayingIndex >= PlaybackState.runningQueue.length && PlaybackState.isPlaying) return false;
   const { id, command, target, value, isBreakpoint } = PlaybackState.runningQueue[PlaybackState.currentPlayingIndex];
@@ -68,11 +72,14 @@ function executionLoop() {
       (extCommand["do" + upperCase](parsedTarget, value))
         .then(() => {
           PlaybackState.setCommandState(id, PlaybackStates.Passed);
-        }).then(executionLoop)
+          return doControlFlow(true);
+        }).then(doDelay).then(executionLoop)
     ));
   } else if (isImplicitWait(command)) {
     notifyWaitDeprecation(command);
-    return executionLoop();
+    return doControlFlow(true)
+      .then(doDelay)
+      .then(executionLoop);
   } else {
     return doPreparation()
       .then(doPrePageWait)
@@ -81,10 +88,32 @@ function executionLoop() {
       .then(doDomWait)
       .then(doDelay)
       .then(doCommand)
+      .then(doControlFlow)
       .then(executionLoop);
   }
 }
 
+function doControlFlow(result) {
+  let nextPlayingIndex;
+  if (result) {
+    // right
+    if (PlaybackState.runningQueue[PlaybackState.currentPlayingIndex].right) {
+      nextPlayingIndex = PlaybackState.runningQueue.indexOf(PlaybackState.runningQueue[PlaybackState.currentPlayingIndex].right);
+    } else {
+      nextPlayingIndex = PlaybackState.runningQueue.length + 1;
+    }
+  } else {
+    // left
+    if (PlaybackState.runningQueue[PlaybackState.currentPlayingIndex].left) {
+      nextPlayingIndex = PlaybackState.runningQueue.indexOf(PlaybackState.runningQueue[PlaybackState.currentPlayingIndex].left);
+    } else {
+      nextPlayingIndex = PlaybackState.runningQueue.length + 1;
+    }
+  }
+  PlaybackState.setPlayingIndex(nextPlayingIndex);
+  return Promise.resolve();
+}
+
 function prepareToPlay() {
   PlaybackState.setPlayingIndex(PlaybackState.currentPlayingIndex - 1);
   return extCommand.init();
@@ -101,7 +130,6 @@ function finishPlaying() {
 function catchPlayingError(message) {
   if (isReceivingEndError(message)) {
     setTimeout(function() {
-      PlaybackState.setPlayingIndex(PlaybackState.currentPlayingIndex - 1);
       playAfterConnectionFailed();
     }, 100);
   } else {
@@ -142,7 +170,7 @@ reaction(
 function doPreparation() {
   return extCommand.sendMessage("waitPreparation", "", "")
     .then(function() {
-      return true;
+      return Promise.resolve();
     });
 }
 
@@ -238,7 +266,11 @@ function doCommand(res, implicitTime = Date.now(), implicitCount = 0) {
       : extCommand.doType(xlateArgument(target), xlateArgument(value))
   ))
     .then(function(result) {
-      if (result.result !== "success") {
+      if (result.result === "truthy") {
+        return true;
+      } else if (result.result === "falsy") {
+        return false;
+      } else if (result.result !== "success") {
         // implicit
         if (result.result.match(/Element[\s\S]*?not found/)) {
           if (implicitTime && (Date.now() - implicitTime > 30000)) {
@@ -258,6 +290,7 @@ function doCommand(res, implicitTime = Date.now(), implicitCount = 0) {
         PlaybackState.setCommandState(id, PlaybackStates.Failed, result.result);
       } else {
         PlaybackState.setCommandState(id, PlaybackStates.Passed);
+        return true;
       }
     });
 }

packages/selenium-ide/src/neo/IO/SideeX/playbackTree.js

@@ -0,0 +1,147 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+
+// For now it iterates through commands array twice. Not sure how to avoid that for now
+
+export default class PlaybackTree{
+  constructor(commandsArray) {
+    this.commands = commandsArray;
+    this.process();
+  }
+
+  process() {
+    // TODO: Make sure to clone commands in order to skip re-renders on UI
+    let endBlockIndexes = [];
+    let blocks = [];
+    for(let i = this.commands.length-1; i>=0; i--) {
+      if (!this.isControlFlowFunction(this.commands[i].command)) {
+        this.commands[i].setRight(this.commands[i+1]);
+        this.commands[i].setLeft(undefined);
+        // TODO: do not rely on left and right to be undefined on closing execution
+      } else {
+        this.inverseControlFlowSwitcher(i, endBlockIndexes);
+      }
+    }
+
+    for(let i = 0; i < this.commands.length; i++) {
+      if (this.isControlFlowFunction(this.commands[i].command)) {
+        this.controlFlowSwitcher(i, blocks);
+      }
+    }
+
+    this.executionNodes = this.commands;
+  }
+
+  inverseControlFlowSwitcher(index, endBlockIndexes) {
+    switch(this.commands[index].command) {
+      case "if":
+      case "while":
+        this.commands[index].setRight(this.commands[index+1]);
+        this.commands[index].setLeft(this.commands[endBlockIndexes.pop() + 1]);
+        break;
+      case "else":
+        this.commands[index].setRight(this.commands[endBlockIndexes.pop() + 1]);
+        this.commands[index].setLeft(undefined);
+        endBlockIndexes.push(index);
+        break;
+      case "end":
+        this.commands[index].setLeft(undefined);
+        endBlockIndexes.push(index);
+        break;
+      default:
+        window.addLog(`Unknown control flow operator "${this.commands[index].command}"`);
+    }
+  }
+
+  controlFlowSwitcher(index, blocks) {
+    if (["if", "else", "while"].includes(this.commands[index].command)) {
+      blocks.push(this.commands[index]);
+    } else if (this.commands[index].command === "end") {
+      let lastBlock = blocks.pop();
+      if(["if", "else"].includes(lastBlock.command)) {
+        this.commands[index].setRight(this.commands[index+1]);
+      } else if (lastBlock.command === "while") {
+        this.commands[index].setRight(lastBlock);
+      }
+    } else {
+      window.addLog(`Unknown control flow operator "${this.commands[index].command}"`);
+    }
+  }
+
+  // TODO: avoid duplicates with TestTable
+  isControlFlowFunction(command) {
+    return this.isBlock(command) || this.isBlockEnd(command);
+  }
+
+  // TODO: do, times
+  isBlock(command) {
+    switch(command) {
+      case "if":
+      case "while":
+      case "else":
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  // TODO: endDo
+  isBlockEnd(command) {
+    switch(command) {
+      case "end":
+      case "else":
+        return true;
+      default:
+        return false;
+    }
+  }
+
+  static processCommands(commandsArray) {
+    new PlaybackTree(commandsArray);
+  }
+
+  // TODO: maintenance function: remove when possible
+  maintenance() {
+
+    // runCommand(this.executionNodes[0]);
+    window.addLog("maintenance");
+    this.executionNodes.forEach((node) => {
+      window.addLog(`[[ Command: ]] ${node.command}`);
+      if (node.left) {
+        window.addLog(`[[ Command left direction: ]] ${node.left.command}`);
+      } else {
+        window.addLog(`[[ Command left direction: ]] not defined`);
+      }
+      if (node.right) {
+        window.addLog(`[[ Command right direction: ]] ${node.right.command}`);
+      } else {
+        window.addLog(`[[ Command right direction: ]] not defined`);
+      }
+      window.addLog(`----------------------`);
+    });
+
+    // function runCommand(command) {
+    //   window.addLog()
+    //   console.log(command.command);
+    //   if (command.right) {
+    //     runCommand(command.right);
+    //   }
+    // }
+  }
+
+}

packages/selenium-ide/src/neo/components/TestRow/index.jsx

@@ -106,6 +106,7 @@ class TestRow extends React.Component {
     command: PropTypes.string.isRequired,
     target: PropTypes.string,
     value: PropTypes.string,
+    level: PropTypes.number,
     isBreakpoint: PropTypes.bool,
     toggleBreakpoint: PropTypes.func,
     onClick: PropTypes.func,
@@ -200,6 +201,7 @@ class TestRow extends React.Component {
     //setting component of context menu.
     this.props.setContextMenu(listMenu);
 
+    const index = this.props.index >= 0 ? <span className="index" style={{paddingRight: `${(this.props.level || 0) * 5}px`}}>{this.props.index + 1}.</span> : null;
     const rendered = <tr
       ref={node => {return(this.node = node || this.node);}}
       className={classNames(this.props.className, {"selected": this.props.selected}, {"break-point": this.props.isBreakpoint}, {"dragging": this.props.dragInProgress})}
@@ -214,12 +216,12 @@ class TestRow extends React.Component {
       }}>
       {this.props.comment ?
         <td className="comment" colSpan="3"><span></span>
-          {this.props.index >= 0 ? <span className="index">{this.props.index + 1}.</span> : null}
+          {index}
           <span>{this.props.comment}</span>
         </td> :
         <React.Fragment>
           <td><span></span>
-            {this.props.index >= 0 ? <span className="index">{this.props.index + 1}.</span> : null}
+            {index}
             <span className="command"><CommandName>{this.props.command}</CommandName></span>
           </td>
           <td><MultilineEllipsis lines={3}>{this.props.target}</MultilineEllipsis></td>