Current api executing selenium commands and telling joyride what element to target

The translator function gets a full command structure (command + arguments), takes the Selenium locators from the command and creates a jQuery locator from it, so that we can use it in the module.

function translator(command) {
  var locators = {
    'identifier':function (arg) {
      var jq = locators.id(arg);
      if (jq.length == 0) {
        jq = locators.name(arg);
      }
      return jq;
    },

    'id':function (arg) {
      return $('#' + arg);
    },

    'name':function (arg) {
      return $('[name=' + arg + ']');
    },
    'dom':function (arg) {
    },
    'xpath':function (arg) {
      var result = document.evaluate(arg, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
      return $(result);
    },
    'link':function (arg) {
      return $('a:contains("' + arg + '")');
    },
    'ui':function (arg) {
    }
  };
  for (var prefix in locators) {
    if (command.indexOf(prefix + "=") === 0) {
      return locators[prefix](command.substr(prefix.length + 1));
    }
  }
  return $(command);
}

After this runs, the command execution has two phases

• init: runs to display the Joyride bubble, it goes to the element and positions the bubble
• execute: runs to execute the command and if you click Next in the Joyride bubble

Not all commands need an init phase. E.g. the open command is immediately executed (navigates you to the given webpage).

Example: Click event

In case of init, the translator function runs, takes the Selenium locator and translates it to jQuery locator. Then it binds the Joyride bubble to it. In case of execute, it does the same as init, but doesn’t bind a Joyride bubble to it. It takes the first argument from the translated command and executes it.

"click":{
  'init':function (command) {
    translator(command['arg1'])
      .unbind('click.walkthough')
      .bind('click.walkthrough', stepCompleted);
  },
  'execute':function (command) {
    var element = translator(command['arg1']);
    var raw = element.get(0);
    raw.click();
  }
},