Recently by Stephen Mouring Jr.
Introduction
On my current project we have been involved in converting some of the hundreds of manual tests that are run by our Test Team every release into a suite of automated Selenium RC tests.
During the course of this adventure my crew found several instances where XPath and native JavaScript were not sufficiently expressive to find elements in some of our more complicated interfaces.
Since our web app uses the Prototype/Scriptaculous JavaScript framework we wanted to find a way to make the locating power of Prototype available within Selenium RC.
We developed approaches for both Selenium 0.9.2 and Selenium 1.0.3 (which had better programmatic support for adding JavaScript user extensions to Selenium).
Selenium 0.9.2
Selenium RC provides the capability to add "user extensions" to augment its JavaScript core.
See http://seleniumhq.org/docs/08_user_extensions.html for detailed information on how to set this up.
We wrote the following user-extension.js file:
In our code we have a base class for all our test cases. To this we added our own waitForPage() method:
Thus every time the page reloads (which clears the JavaScript context) we call waitForPage() and this command is re-executed. It creates two global variables (id and css) and binds them to Prototype's $ and $$ functions respectively.
Note: The reason we choose id and css instead of $ and $$ was that Groovy considers $ in Strings to be a special character and we would have had to escape it each time it was used.
The Prototype selectors can now be used in Selenium RC like this:
Note: You still have to specify the dom locator type so Selenium RC will know to execute your locator string as JavaScript.
Selenium 1.0.3
In more recent version of Selenium RC the project added the setExtensionJs() method. This allows you to set extension JavaScript programmatically prior to starting the selenium client:
This made it much easier to implement our Prototype bindings. The only trick was that the JavaScript seems to be executed prior to having access to a page context and is also only executed once. This required us to take a different approach.
We created id and css as global functions instead of variables. This allowed us to defer accessing the current window until the functions were actually invoked.
Note: The above code snippet is written in Groovy which allows multiline Strings.
The Prototype selectors are used in Selenium RC like before:
I would be interested in hearing feedback from anyone who has a chance to use this technique!
On my current project we have been involved in converting some of the hundreds of manual tests that are run by our Test Team every release into a suite of automated Selenium RC tests.
During the course of this adventure my crew found several instances where XPath and native JavaScript were not sufficiently expressive to find elements in some of our more complicated interfaces.
Since our web app uses the Prototype/Scriptaculous JavaScript framework we wanted to find a way to make the locating power of Prototype available within Selenium RC.
We developed approaches for both Selenium 0.9.2 and Selenium 1.0.3 (which had better programmatic support for adding JavaScript user extensions to Selenium).
Selenium 0.9.2
Selenium RC provides the capability to add "user extensions" to augment its JavaScript core.
See http://seleniumhq.org/docs/08_user_extensions.html for detailed information on how to set this up.
We wrote the following user-extension.js file:
Selenium.prototype.setupProtoypeJS = function() {
id = selenium.browserbot.getCurrentWindow().$;
css = selenium.browserbot.getCurrentWindow().$$;
}In our code we have a base class for all our test cases. To this we added our own waitForPage() method:
public void waitForPage() {
selenium.waitForPage('60000')
proc.doCommand('setupPrototypeJS', [])
}Thus every time the page reloads (which clears the JavaScript context) we call waitForPage() and this command is re-executed. It creates two global variables (id and css) and binds them to Prototype's $ and $$ functions respectively.
Note: The reason we choose id and css instead of $ and $$ was that Groovy considers $ in Strings to be a special character and we would have had to escape it each time it was used.
The Prototype selectors can now be used in Selenium RC like this:
selenium.click("dom=id('foo')")
selenium.click("dom=css('.bar')")
selenium.click("dom=css('span.foo a.baz')")Note: You still have to specify the dom locator type so Selenium RC will know to execute your locator string as JavaScript.
Selenium 1.0.3
In more recent version of Selenium RC the project added the setExtensionJs() method. This allows you to set extension JavaScript programmatically prior to starting the selenium client:
selenium = new DefaultSelenium(...)
selenium.setExtensionJs('...')
selenium.start()
This made it much easier to implement our Prototype bindings. The only trick was that the JavaScript seems to be executed prior to having access to a page context and is also only executed once. This required us to take a different approach.
We created id and css as global functions instead of variables. This allowed us to defer accessing the current window until the functions were actually invoked.
selenium.setExtensionJs('''
id = function(value) {
return selenium.browserbot.getCurrentWindow().$(value);
}
css = function(value) {
return selenium.browserbot.getCurrentWindow().$$(value);
}
'''); Note: The above code snippet is written in Groovy which allows multiline Strings.
The Prototype selectors are used in Selenium RC like before:
selenium.click("dom=id('foo')")
selenium.click("dom=css('.bar')")
selenium.click("dom=css('span.foo a.baz')")I would be interested in hearing feedback from anyone who has a chance to use this technique!
Introduction
So I stumbled across Griffon not too long ago:
http://griffon.codehaus.org/
It is a new project on Codehaus.org whose unique aim is to bring the Grails framework and way of doing things to the desktop application development world. I am not yet convinced this is a good idea, but since I still have many fond memories of Swing development I was intrigued to see what MVC for a desktop application might look like.
Like Grails, Griffon is built on Groovy, so if you are not familiar with Groovy you might want to take a look at:
http://groovy.codehaus.org/
On my current project we are starting to develop a suite of Selenium tests to help automate manual tests our test team are performing every release. Anyone who has used Selenium will probably agree with me that it can be finicky. When I write a selenium test I find myself frequently having to tweak a little XPath here, rerun the whole test, tweak a waitForCondition() there, rerun it again, etc.
Inspired by this drudgery I wrote a Griffon app that would give me a sandbox in which I could play with Selenium live instead of in the context of a test.
If you are interested in Griffon, I will walk you through some of the basics and you can see what you think. If you just want the app I wrote feel free to download it. I hope it will ease some of the pain of using Selenium!
Installing Griffon is not too hard. Download it, unzip it, create a GRIFFON_HOME system variable, and then glom $GRIFFON_HOME/bin to your PATH.
Like Grails, Griffon provides an application scaffolding script. Simply type griffon create-app and you have a skeleton for an application.
Of interest to this little tutorial are the models, views, and controllers folders, as well as lifecycle and conf.
MODEL
A Griffon model is just a POGO. It does not have to inherit from any particular class. It is associated with a controller and a view via the naming convention.
So for example, here is the model from my Selenium Console project:
Griffon will automatically associate this model object with a view named SeleniumConsoleView and a controller named SeleniumConsoleController.
Note the use of the @Bindable annotation. This is a very interesting feature that will be put to good use in the view.
VIEW
Griffon uses Groovy SwingBuilder syntax to create a view. Here is a snippet from the SeleniumConsoleView:
By making good use of Groovy's dynamic features, the SwingBuilder syntax allows you to declaratively build your layouts. Each "method call" (such as panel() or button() is actually interpreted by methodMissing and the corresponding Swing component is constructed and added in whatever scope it occurs. The named parameters correspond to properties of the component which can be set inline.
A useful reference for all the valid named parameters that can be called on each component:
http://groovy.codehaus.org/Alphabetical+Widgets+List
A closure containing any subcomponents to be added can be passed in as well, allowing you to anonymously nest components inside of each other.
Two properties are injected into the scope of the view: model and controller, allowing you to access them where appropriate.
BINDING
Groovy / Griffon allow you to "bind" one property to another. This mechanism acts like an action listener, when a property changes, any property that is bound to it also changes. This is extremely useful because you can bind GUI widgets (such as a checkbox or a testarea) to your model. As the user interacts with the GUI, the state of the GUI is automatically captured on your model object.
This can also work in reverse. You can set portions of your GUI to respond to changes in your model object.
So I stumbled across Griffon not too long ago:
http://griffon.codehaus.org/
It is a new project on Codehaus.org whose unique aim is to bring the Grails framework and way of doing things to the desktop application development world. I am not yet convinced this is a good idea, but since I still have many fond memories of Swing development I was intrigued to see what MVC for a desktop application might look like.
Like Grails, Griffon is built on Groovy, so if you are not familiar with Groovy you might want to take a look at:
http://groovy.codehaus.org/
On my current project we are starting to develop a suite of Selenium tests to help automate manual tests our test team are performing every release. Anyone who has used Selenium will probably agree with me that it can be finicky. When I write a selenium test I find myself frequently having to tweak a little XPath here, rerun the whole test, tweak a waitForCondition() there, rerun it again, etc.
Inspired by this drudgery I wrote a Griffon app that would give me a sandbox in which I could play with Selenium live instead of in the context of a test.
If you are interested in Griffon, I will walk you through some of the basics and you can see what you think. If you just want the app I wrote feel free to download it. I hope it will ease some of the pain of using Selenium!
Installing Griffon is not too hard. Download it, unzip it, create a GRIFFON_HOME system variable, and then glom $GRIFFON_HOME/bin to your PATH.
Like Grails, Griffon provides an application scaffolding script. Simply type griffon create-app and you have a skeleton for an application.
Of interest to this little tutorial are the models, views, and controllers folders, as well as lifecycle and conf.
MODEL
A Griffon model is just a POGO. It does not have to inherit from any particular class. It is associated with a controller and a view via the naming convention.
So for example, here is the model from my Selenium Console project:
class SeleniumConsoleModel {
@Bindable String host
@Bindable String port
@Bindable String command
@Bindable String baseUrl
@Bindable boolean serverRunning = false
@Bindable String scriptSource
@Bindable String scriptResult
@Bindable boolean enabled = true
}Griffon will automatically associate this model object with a view named SeleniumConsoleView and a controller named SeleniumConsoleController.
Note the use of the @Bindable annotation. This is a very interesting feature that will be put to good use in the view.
VIEW
Griffon uses Groovy SwingBuilder syntax to create a view. Here is a snippet from the SeleniumConsoleView:
application(title:'Selenium Console', pack:true, locationByPlatform:true, iconImage: imageIcon('/griffon-icon-48x48.png').image,
iconImages: [imageIcon('/griffon-icon-48x48.png').image,
imageIcon('/griffon-icon-32x32.png').image,
imageIcon('/griffon-icon-16x16.png').image]
) {
panel() {
borderLayout()
panel(constraints:CENTER) {
borderLayout()
panel(constraints: NORTH, border: raisedBevelBorder(), background: Color.DARK_GRAY) {
flowLayout(alignment:FlowLayout.LEFT)
panel(opaque: false) {
button("Start Selenium", actionPerformed: controller.&startSelenium, enabled: bind { model.enabled }, visible:bind(source:model, sourceProperty:'serverRunning', converter:{ !it }))
button("Stop Selenium", actionPerformed: controller.&stopSelenium, enabled: bind { model.enabled }, visible:bind(source:model, sourceProperty:'serverRunning'))
}
...
By making good use of Groovy's dynamic features, the SwingBuilder syntax allows you to declaratively build your layouts. Each "method call" (such as panel() or button() is actually interpreted by methodMissing and the corresponding Swing component is constructed and added in whatever scope it occurs. The named parameters correspond to properties of the component which can be set inline.
A useful reference for all the valid named parameters that can be called on each component:
http://groovy.codehaus.org/Alphabetical+Widgets+List
A closure containing any subcomponents to be added can be passed in as well, allowing you to anonymously nest components inside of each other.
Two properties are injected into the scope of the view: model and controller, allowing you to access them where appropriate.
BINDING
Groovy / Griffon allow you to "bind" one property to another. This mechanism acts like an action listener, when a property changes, any property that is bound to it also changes. This is extremely useful because you can bind GUI widgets (such as a checkbox or a testarea) to your model. As the user interacts with the GUI, the state of the GUI is automatically captured on your model object.
This can also work in reverse. You can set portions of your GUI to respond to changes in your model object.
Introduction
On my current project I was given the task of generating a Word document from content dynamically entered into a web application. After some research and about a month of hard core development we had a working system that used Velocity to assemble a Word document using the WordprocessingML (WordML) XML standard understood by Microsoft Office 2003.
Along the way I encountered a number of challenging problems, several of which lack clear or readily available solutions on the internet. In an effort to spare any poor chap that comes along behind me the same pain I wen through, I wanted to write a blog post that would give a clear explanation of some of WordML's tougher parts.
This blog post assumes a basic understanding of WordML. If you need an introduction to WordML the Microsoft Reference Schema is actually extremely helpful. Particularly peruse the long, but very clear Overview of WordprocessingML section. I found a copy of that section online as well: Overview of WordprocessingML.
Going forward I will assume that you understand the basics of WordML. I am much more interesting in helping you with the hard stuff.
Experimenting
One of the best ways to understand WordML is to experiment with it. Open up Word, create a document with some feature you want to learn about (lists, images, etc.) save the document as an XML file and see what comes out.
Unfortunately, what Word outputs when you save this file is (needlessly) complicated.
Some hints to reduce complexity:
-- Disable the Tools > Options > Security > "Store random number to improve merge accuracy" option in Word 2003 if you are exporting XML. This fragments the text inside paragraphs into dozens of different tagged runs (each tagged with an RSID to allow more accurate merging.)
-- Disable the Tools > Options > Save > Embed SmartTags option. Reduces extraneous cruft in the text.
Handling Rich Text
In my project we had rich text editors that could save content with simple HTML markup (<b>, <i>, etc.)
On my current project I was given the task of generating a Word document from content dynamically entered into a web application. After some research and about a month of hard core development we had a working system that used Velocity to assemble a Word document using the WordprocessingML (WordML) XML standard understood by Microsoft Office 2003.
Along the way I encountered a number of challenging problems, several of which lack clear or readily available solutions on the internet. In an effort to spare any poor chap that comes along behind me the same pain I wen through, I wanted to write a blog post that would give a clear explanation of some of WordML's tougher parts.
This blog post assumes a basic understanding of WordML. If you need an introduction to WordML the Microsoft Reference Schema is actually extremely helpful. Particularly peruse the long, but very clear Overview of WordprocessingML section. I found a copy of that section online as well: Overview of WordprocessingML.
Going forward I will assume that you understand the basics of WordML. I am much more interesting in helping you with the hard stuff.
Experimenting
One of the best ways to understand WordML is to experiment with it. Open up Word, create a document with some feature you want to learn about (lists, images, etc.) save the document as an XML file and see what comes out.
Unfortunately, what Word outputs when you save this file is (needlessly) complicated.
Some hints to reduce complexity:
-- Disable the Tools > Options > Security > "Store random number to improve merge accuracy" option in Word 2003 if you are exporting XML. This fragments the text inside paragraphs into dozens of different tagged runs (each tagged with an RSID to allow more accurate merging.)
-- Disable the Tools > Options > Save > Embed SmartTags option. Reduces extraneous cruft in the text.
Handling Rich Text
In my project we had rich text editors that could save content with simple HTML markup (<b>, <i>, etc.)
This is a wicked problem in WordML because WordML (as you know) is a flat structure. HTML markup is hierarchical. So this rich text markup:
This means you cannot simply translate rich text to WordML by replacing all <b> tags with a new <w:r><w:rPr><w:b></w:rPr> ... expression. Not convinced? Consider an example:
Suppose we did blind replacement (as above) to the example rich text fragment above. The phrase "Some bold text followed by " would be bold. So good so far. But the next phrase poses a problem. If you continued with blind replacement and inserted a run with an italic style, you will lose the bold formatting from the parent <b> tag.
The solution to this problem is non trivial, but viable. The system I was working on had already solved this problem for PDF generation. Using an XSLT transformation they were able to map rich text to XSL FO. That worked fine for XSL FO (which is hierarchical like HTML) but was not usable for WordML.
The critical insight came from David Gerhadt in his excellent blog which is required reading for this blog.
David solved the problem by using
Some wicked rich text gotchas:
Lists (and how renumber them)
Lists have to be the strangest and ugliest part of WordML. I mean seriously!
Images
XSLT file that indents output
<b>Some bold text follow by <i>some bold and italic text</i> ended by more bold text</b>Is represented in WordML as:
<w:p>
<w:r>
<w:rPr> <w:b /> </w:rPr>
<w:t>Some bold text followed by </w:t>
</w:r>
</w:p>
<w:p>
<w:r>
<w:rPr> <w:b /><w:i /> </w:rPr>
<w:t>some bold and italic text</w:t>
</w:r>
</w:p>
<w:p>
<w:r>
<w:rPr> <w:b /> </w:rPr>
<w:t> ended by more bold text</w:t>
</w:r>
</w:p>
This means you cannot simply translate rich text to WordML by replacing all <b> tags with a new <w:r><w:rPr><w:b></w:rPr> ... expression. Not convinced? Consider an example:
Suppose we did blind replacement (as above) to the example rich text fragment above. The phrase "Some bold text followed by " would be bold. So good so far. But the next phrase poses a problem. If you continued with blind replacement and inserted a run with an italic style, you will lose the bold formatting from the parent <b> tag.
The solution to this problem is non trivial, but viable. The system I was working on had already solved this problem for PDF generation. Using an XSLT transformation they were able to map rich text to XSL FO. That worked fine for XSL FO (which is hierarchical like HTML) but was not usable for WordML.
The critical insight came from David Gerhadt in his excellent blog which is required reading for this blog.
David solved the problem by using
Some wicked rich text gotchas:
- Multiple spaces in rich text are rendered literally in wordml
- Leading spaces are rendered in wordml
- Spaces around tags are not stripped in wordml
Lists (and how renumber them)
Lists have to be the strangest and ugliest part of WordML. I mean seriously!
Images
XSLT file that indents output
