By Sergey, a quality assurance manager on Murano Software’s team

If you have ever tried to upload a file under Selenium RC, you must know that it is impossible to type in the file upload text field. This caused by a JavaScript security restriction. JavaScript is not allowed to modify the value of <input type="file"> form fields. http://wiki.openqa.org suggests to work around this by running the tests in the experimental “chrome” mode for Firefox. But it is mentioned that there is no way to do this on any other browser.

I have tried to use the “chrome” mode for Firefox and the “iehta” mode for IE, but my tests turned out very unstable. Fortunately, there is another workaround.

For Firefox and IE, you can set the focus inside the file upload field by using JavaScript.

selenium.getEval("this.browserbot.getCurrentWindow().document.getElementById('FileUploadFieldId').focus();")

Then use the selenium.keyPressNative () method to type the file path, i.e. C:\Some Folder\TestFile.txt. The method simulates a user pressing and releasing a key by sending a native operating system keystroke. I created a helper method to type the file path. It handles upper case and lower case letters, back slashes, spaces and periods.

import java.awt.event.KeyEvent

protected void typeNative(String filePath) throws InterruptedException 
{
  for (char c : filePath.toCharArray()) {
    if (c == ':') {
      selenium.keyDownNative(Integer.toString(KeyEvent.VK_SHIFT));
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_SEMICOLON));
      selenium.keyUpNative(Integer.toString(KeyEvent.VK_SHIFT));
    }
    else if (c == '\\') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_BACK_SLASH));
    }
    else if (c == '.') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_PERIOD));
    }
    else if (c == ' ') {
      selenium.keyPressNative(Integer.toString(KeyEvent.VK_SPACE));
    }
    else {
      KeyStroke key = KeyStroke.getKeyStroke("pressed " + Character.toUpperCase(c));
      if (null != key) {
        // should only have to worry about case with standard characters
        if (Character.isUpperCase(c)) {
          selenium.keyDownNative(Integer.toString(KeyEvent.VK_SHIFT));
        }
        selenium.keyPressNative(Integer.toString(key.getKeyCode()));
 
        if (Character.isUpperCase(c)) {
          selenium.keyUpNative(Integer.toString(KeyEvent.VK_SHIFT));
        }
      }
    }
  }
}

If you're using Selenium RC and Java, you can exploit java.awt.Robot, instead of using the selenium.keyPressNative() method. See the code sample below.

For Safari, there is no rendered field in the HTML page into which you can simply type keys. Safari requires that the user interact with a “File Upload” dialog box. To get the dialog, you can put selenium.click() on the file upload field. But here you will meet another unpleasant surprise. The “File Upload” dialog box will be loaded in a modal window, so the executing of your code will be held up until the modal window is closed.

To handle that, you need to invoke the type native method in the other thread one step before clicking on the file upload field and set a delay to wait until the modal window with the “File Upload” dialog box appears. See the code sample that uses java.awt.Robot.

protected void chooseFile(String element, String filePath) throws InterruptedException
{
  new FileChooserThread(filePath).start();
  selenium.click(element);
}

To invoke the type native method, just add new class containing the code below to your project.

import javax.swing.*;
import java.awt.*;
import java.awt.event.KeyEvent;
 
public class FileChooserThread extends Thread 
{
  public FileChooserThread(String file) {
    super(new FileRunner(file));
  }
}
 
class FileRunner implements Runnable 
{
  private String fullName;
 
  public FileRunner(String fileName) {
    this.fullName = fileName;
  }
 
  public void run() {
    try {
      Thread.sleep(2000);
      Robot robot = new Robot(); // input simulation class
      for (char c : fullName.toCharArray()){
        if (c == ':') {
          robot.keyPress(KeyEvent.VK_SHIFT);
          robot.keyPress(KeyEvent.VK_SEMICOLON);
          robot.keyRelease(KeyEvent.VK_SHIFT);
        }
        else if (c == '\\') {
          robot.keyPress(KeyEvent.VK_BACK_SLASH);
        }
        else if (c == '.') {
          robot.keyPress(KeyEvent.VK_PERIOD);
        }
        else if (c == ' ') {
          robot.keyPress(KeyEvent.VK_SPACE);
        }
        else {
          KeyStroke key = KeyStroke.getKeyStroke("pressed " + Character.toUpperCase(c));
          if (null != key) {
            // should only have to worry about case with standard characters
            if (Character.isUpperCase(c)) {
              robot.keyPress(KeyEvent.VK_SHIFT);
            }
 
            robot.keyPress(key.getKeyCode());
            robot.keyRelease(key.getKeyCode());
 
            if (Character.isUpperCase(c)) {
              robot.keyRelease(KeyEvent.VK_SHIFT);
            }
          }
        }
      }
      robot.keyPress(KeyEvent.VK_ENTER);
    }
    catch (Exception e) {
      throw new RuntimeException(e);
    }
  }
}

The final remark is addressed to the focus. This workaround will work only if the system focus is into the file upload field. I had to start the selenium server with the -multiWindow parameter to set the system focus into the browser window.

By Sergey and Maxim, a Quality Assurance Manager and a .NET Developer on Murano Software’s team.

If you have ever worked with Selenium, you may find XPath a convenient alternative to walking through document trees. In case you are using Firefox, XPath remains an opportune and fast way to find specific elements without walking the DOM manually. Unfortunately, it works tremendously slowly in IE 6 and IE 7. Recently, we faced this problem, and now we’re happy to share our elegant solution with you.

To solve the speed problem in IE, we tried to replace XPath selectors with CSS ones. It gave us a 10x speed up in IE. Impressive, but by using CSS, we lost a very useful feature that XPath offers. In Xpath, we can use the ‘..’ expression to select the parent of the current node. This feature is necessary when you need to click a button next to the element having a particular name in the list of elements. See the sample below.

< table class ="style" >
    <trclass="somestyle">
        <td>SomeName1</td>
        <td>
            <inputtype="submit"value="Edit"class="btn"/>
        </td>
    </tr>
    <trclass="gvAlternatingRowH35">
        <td>SomeName2</td>
        <td>
            <inputtype="submit"value="Edit" class="btn"/>
        </td>
    </tr>
</table>



All the buttons have the same attributes.  If you want to click the “Edit” button next to SomeName2, you can easily complete this task in selenium by using XPath and its parent feature:

selenium.click("//td[text()='SomeName2']/../td/input[@value='Edit']")



As we mentioned above, this won’t be that easy to do with CSS because it doesn’t have the appropriate feature. So, we used the JQuery parent() function to have the ability to select the parent of the current node. It works really fast in all browsers, since JQuery uses CSS. 

We added  Jquery’s library to the Selenium server (see steps 1 and 2 below) and executed JQuery script directly from Selenium. To execute JQuery script, you can use selenium.getEval(someJS) if you need the return value, or selenium.runScript(someJS) if you don’t.

But that was not enough for us. We wanted to select the parent element by using the easy syntaxes of CSS locators. To use them, we had to add a new custom locator to Selenium. Below, find the three easy steps that we took to add a custom locator.

1. Add Jquery’s library to Selenium server.

Add JQuery’s library (‘jquery.min.js’) to your selenium-server.jar (‘selenium-server.jar\core\scripts\’ folder). To do that, open ‘selenium-server.jar’ by using one of the archives — for example, 7-Zip — and drag-and-drop ‘jquery.min.js’ in the mentioned folder.

2. Add script reference to JQuery library.

Add script reference to ‘jquery.min.js’ to the ‘<head>’ section of the RemoteRunner.html (‘selenium-server.jar\core\’).

< head >
...
<scriptlanguage="JavaScript"type="text/javascript" src="scripts/jquery.min.js"/>
...
<\head>



3. Add new JQuery locator to Selenium core.

You can add a new JQuery locator to the Selenium core in the runSeleniumTest() function of the selenium-remoterunner.js file. All you need to do is to add a call of selenium.doAddLocationStrategy() method before Selenium property initialization of the window object. See the sample below for more details.

function runSeleniumTest() {
    ...
    selenium.doAddLocationStrategy("jquery", "
var loc = locator;
var attr = null;
var isattr = false;
var inx = locator.lastIndexOf('@');

if (inx != -1) {
    loc = locator.substring(0, inx);
    attr = locator.substring(inx + 1);
    isattr = true
}

var selectors = loc.split('<');
var found = $(inDocument);

for (var i = 0; i < selectors.length; i++) {
    if (i > 0) {found = $(found.parents()[0]);
}

if (jQuery.trim(selectors[i]) != '')
    found = found.find(selectors[i]);
}

if (found.length > 0) {
    if (isattr) {
        returnfound[0].getAttributeNode(attr);
    }
    else {
        returnfound[0];
    }
}
else {
    returnnull;
}
    ");
    ...
}



The first parameter of the selenium.doAddLocationStrategy method (“JQuery”) is the new Selenium locator’s name. The second one (“var loc = locator…”) is the new custom Selenium locator. If you want to, you can write your own implementation for the locator. To call the JQuery parent() function, we used the '<' custom symbol . 

Finally, let’s take a look at how you can use the new JQuery locators, instead of the XPath ones.

XPath locators:
•    xpath=//a[contains(@href,'#id1')]
•    xpath=(//table[@class='stylee'])//th[text()='theHeaderText']/../td
•    xpath=//input[@name='name2' and @value='yes']

JQuery locators:
•    jquery= a[href*='#id1']
•    jquery= table[class='stylee'] th:contains('theHeaderText')<td
•    jquery= input[name='name2'][value='yes']

We hope you’ll find our experience useful to you. Also, we’d be happy to answer your questions if you have any!