I’ve been toying around with canvas tag and learning the ins and outs of Drag and Drop

I created a little proof of concept app that allows you to add markers to an image.  The meta about the markers (relative location, marker symbol, desc, color, etc) are stored in a DB on another server using JSONP requests.

See the demo here (FF3+ recommended)

The code repo is currently on google code

I’m starting to work with mozilla and XUL again. I’ll be posting that work soon, But in the meantime I found this presentation I did back in 2005. I remember that is when I first stumbled across this strange but useful XmlHTTPRequest object and wondered if it’s use would find its way to the mainstream. Took a traditional HTML admin interface for a PHP web application and transformed it into a Mozilla XUL interface. Goal is to demonstrate the benefits of using XUL to create Rich Client Application interfaces into your web apps when you have the ability to mandate the browser used (such as an admin interface). Links and resources:

• Working Demo (mozilla browsers only)
• Documentation and Source Code (didn’t go too crazy on the docs, but you can see all the source code by viewing the files section of the tree on the left).

Selenium is a functional/acceptance testing tool for web applications. It in in the same space as tools like

• Winrunner
• Quick Test Pro
• Mercury TestDirector

Selenium Advantages

• The core is written in javascript so it runs directly in a browser, just as real users do
• Supported on OS X, Linux, and Windows
• Very simple to learn and use
• Open Source (Apache License 2.0)
• Selenium Remote Control!!!

Key Components

• Selenium Core – The core of Selenium written in pure JavaScript/DHTML. This is all that is required in order to start using Selenium
• Selenium IDE (Firefox Addon) – Integrated development environment for recording and playing tests.
• Selenium RC (Remote Control) – Allows you to write automated web functional/acceptance tests in any programming language.

Selenium Core Installation

• Download the latest release
• Place the downloaded folder (i.e. selenium-core-0.8.2) in the webroot of the webserver with the app to be tested. This is a JavaScript security requirement, ‘same origin‘ policy. (Later in this talk we’ll explain how to get around this).

Writing your First Test Where to put the tests The tests can really reside anywhere on the web server (just need to accessable from same domain of the app you are testing). So, just place them in the area that makes most sense for you organization wise.For this example we will place them in the web app to be tested in a ‘tests’ folder. What we will be testing For this talk I have written a VERY tiny PHP application with a simple login page. We’ll use this to test some of the aspets of Selenium. How test cases are constructed OpenQA used a very KISS method for creating a test case. You simply take your favorite HTML editor and create an HTML table with 3 columns (). Then add a row () for each test step (called a command). The general pattern for these command rows are Depending on the command, target or value can be optional or required. (more about this later). Below is about the simplest test possible. It just useses the open command to load the browser with a value of the Login page and then uses the assertTitle command to verify that the title element (<title>) for the page has the value “Selenium Demo: login”. Note that any table row with 3 columns is ignored so it can be use for commenting your tests as we do in row 1 below. This test writing syntax is refered to as ‘HTML Selenese’ This file is saved in the tests folder of the app as TestLoginPageLoads.html Running Your First Test First, need a Test Suite to house the Test Case(s) Test Cases are organized into collections using Test Suites.Again, in the spirit of keeping things simple, a Test Suite is an HTMLfile with a 1 column table. In each row of that table you put ahyper-link pointing to the test you want to run. This file is also saved in the tests directory with the name TestSuite.html Now to actually run it… Open a browser and navigate to the TestRunner file in Selenium core that you installed locally. It is located at… {selenium-install-dir}/core/TestRunner.html You should see something simmilar to this In the upper left “Test Suite:” text box, type the relative path to the …/tests/TestSuite.html file created above (/selenium-talk/tests/selenium/TestSuite.html in this case) and click the Go button The Test Suite should load in the left frame and the middle frame will list the Test Cases along with their individual steps Click the button to run this test. This is a very simple test so things happen very quicly but the web app reference in the suite will load in the bottom frame and the test will interact with it there. The summary section will show the passed/failed stats for the Test Suite run and the Test Suite and Test Cases lists will colorize depending on the test outcome (green=pass / red=fail) Some examples of tests

• OpenQA AJAX tests
• Selenium Tests of the Zen Koans

A Closer Look at Test Cases Commands There are 3 types of commands 1 Actions example actions are click(locator), goBack(), setCursorPosition(locator,position), keyPress(locator,keySequence), dragdrop(locator,movementsString), … Selenium Actions mimic the actions the user would take in interacting with the web app. 2 Accessors Accessors examine the state of the applications and store the result in variables. Examples would be storeElementWidth(locator, variableName), storeBodyText(variableName), storeSelectedId(selectLocator,variableName), … 3 Assertions For any given Accessor there are typically one or more related Assertions. Assertions, like Accessors, are able to examine the state of the application but instead of storing the value they retrieve, they verify that it meets a pre-defined expected value. Assertions themselves com in 3 versions

• assert – If this fails, the test is aborted
• verify – If this fails, the test will log the failure, but continue
• waitFor – These wait for the tested condition to become true. They will fail and hault the test after the the value for current timeout setting expires (see the setTimeout(timeout) Action)

For example the Accessor – storeLocation(storageVariable) retrieves the absolute URL of the current page and stores it in the variable, storageVariable.its (automatically generated) assertions are

• assertLocation ( pattern )
• assertNotLocation ( pattern )
• verifyLocation ( pattern )
• verifyNotLocation ( pattern )
• waitForLocation ( pattern )
• waitForNotLocation ( pattern )

Note: You do not need to use an Accessor prior to using one of its related Assertions. As in our example Test Case, TestLoginPageLoads, we simply used assertTitle directly after the open command (and never used storeTitle). There are many, many Actions, Accessors, and Assertions (and you can also easily define your own) so be sure to give the Selenium reference a good read as it details them all. Element Locators and Patterns On the previous page for the Action, Accessor, and Assertion commands, you may have noticed the references to ‘locator‘ and/or ‘pattern‘ in the parameters for those Commands. (Element) Locators The Element Locator concerns the Target that a given Command uses. They tell Selenium which HTML element a Command refers to. There are quite a few techniques the Locator can use so you are sure to find one that works for you. ElementLocators are in the form: {locator-prefix}={locator-string} ex. command target value verifyText id=koan_body *mary had a little lamb* —————

• identifier=id: Select the element with the specified @id attribute. If no match is found, select the first element whose @name attribute is id. (This is normally the default; see below.)

• id=id: Select the element with the specified @id attribute.

• name=name: Select the first element with the specified @name attribute.
  • username
  • name=username

The name may optionally be followed by one or more element-filters, separated from the name by whitespace. If the filterType is not specified, value is assumed.

• • name=flavour value=chocolate (useful for check-boxes and radio-buttons)

• dom=javascriptExpression: Find an element by evaluating the specified string. This allows you to traverse the HTML Document Object Model using JavaScript. Note that you must not return a value in this string; simply make it the last expression in the block.
  • dom=document.formsMar 5, 2007 8:53:50 PM org.mortbay.http.SocketListener startINFO: Started SocketListener on 0.0.0.0:4444Mar 5, 2007 8:53:50 PM org.mortbay.util.Container start INFO: Started org.mortbay.jetty.Server@6672d6 Just leave this server running during your tests. There is no need to stop/start it between test runs. Running Your First PHP Test In a terminal window other than the on the server is running in. Navigate to the directory in the web app holding the test written in PHP. When you run the PHP file… $ php test-login.php In the Selenium Server window you should see something like… Got result: OK,Selenium Demo App: login on session 218697GET: cmd=testComplete&sessionId=218697Killing Firefox…Got result: OK on session 218697 Then you should see the output of the PHP file. Title Equal: ‘Selenium Demo App: login’ know bug on OS X : launching FireFox Using SeleniumRC with xUnit Frameworks Stitching SeleniumRC into your Testing Framework In order to make SeleniumRC more maintainable and scalable you can leverage your language’s xUnit framework (PHPUnit) in this case. Example PHPUint/SeleniumRC Test (from the OpenQA) site. Notice that we are overcoming the Javascript’s “Same Origin Policy“.selenium = new Testing_Selenium(“*firefox”, “http://www.google.com”);$this->selenium->start();public function tearDown(){ $this->selenium->stop();}public function testGoogle(){ $this->selenium->open(“/”); $this->selenium->type(“q”, “hello world”); $this->selenium->click(“btnG”); $this->selenium->waitForPageToLoad(10000); $this->assertRegExp(“/Google Search/”, $this->selenium->getTitle());}With this setup, you SeleniumRC tests can easily be incorperated into an existing Unit Testing framework. The SeleniumRC test benefit from all the ease of use and scalability of the xUnit frameworks. One more note, to get a headstart on building SeleniumRC tests you can use the export option of SeleniumIDE Selenium: Further Reading, Examples
    • The OpenQA site
    • The PHPUnit Pocket Guide
    • Selenium Presentations
    • IBM writup on Selenium
    • Selenium + Simpletest
    Continue Reading »