Selenium 2.0 includes a pure JavaScript API (called JSAPI) for interacting with the Selenium Firefox driver directly from inside the browser.
A bunch of JSAPI tests are located in common/test/js. Read these to get familiar with the API. The "client" side of the JSAPI interface is located in common/src/js, with the "server" side of it in common/src/js/extension.
Getting Started
Step 1: Building the extension
Navigate to your checked-out copy of Selenium 2.0 and run
rake firefox
Rename build/webdriver-extension.zip to build/webdriver-extension.xpi and open it with Firefox to install it. Once you've restarted Firefox, you're ready to access the JSAPI.
Step 2: Setting up environment
To write your own tests, copy $SELENIUM/third_party/closure/goog to a new folder, and copy everything in common/js/test to a folder called "jsapi" inside of your new folder.
mkdir my_tests cd my_tests cp -R $SELENIUM/third_party/closure/goog . mkdir jsapi cp $SELENIUM/common/src/js/*.js jsapi
Step 3: Writing a test
Create a web page to hold your tests and include both goog/base.js and deps.js. You'll generate deps.js momentarily. Write your tests that use the JSAPI either in the page you just created or in a separate JS file that you source in. For example,
<html> <head> <title>WebDriver JSAPI demo</title> <script type="text/javascript"> CLOSURE_NO_DEPS=true; /* Use the deps.js we generate */ CLOSURE_BASE_PATH="./"; /* Calculate file paths from deps.js relative to current dir */ </script> <script src="goog/base.js"></script> <script src="deps.js"></script> <script type="text/javascript"> function clickme() { alert("Hello, world!"); } function setup() { document.forms[0].elements[0].onclick = runWebdriver; document.forms[0].elements[1].onclick = clickme; } goog.require('webdriver.WebDriver'); goog.require('webdriver.By'); goog.require('webdriver.factory'); function runWebdriver() { driver = webdriver.factory.createLocalWebDriver(); driver.newSession(true); driver.callFunction(function(){ button = driver.findElement(By.name('clicky')); button.click(); }); } </script> </head> <body onload="setup()"> <form> <input id="clickme" type="button" value="Click ↓ with WebDriver"></input> <br> <input id="clickme" type="button" value="Click me!" name="clicky"></input> </form> </body> </body> </html>
The newSession() call is critical to initializing the interface, and you generally need to wrap sequential calls through the JSAPI in callFunction() as shown above because it is an asynchronous API. The JSAPI tests do quite a bit more, but this is the minimum viable setup.
Step 4: Calculate dependencies
To generate deps.js, run
python $SELENIUM/third_party/closure/bin/calcdeps.py -i mypage.html -o deps > deps.js
Step 5: Run!
Open your HTML page in Firefox now. Make sure you see "WebDriver" in the lower right corner of the window. If it's not there, you need to go back and install the WebDriver extension. You should now be able to click the top button or the bottom button and get a JavaScript alert saying "Hello, world!" Congratulations, you're up and running with the WebDriver JavaScript API.
Questions? Contact Eric Allen.