This document provides an overview of creating efficient automated tests with Selenium IDE plugins. It discusses the goals of introducing Selenium IDE plugin development, presenting the agenda which includes creating a basic plugin, using preferences, and building commands. Code snippets and exercises are provided to help attendees develop their first plugin. Resources for continuing to learn about Selenium IDE plugins and Firefox add-on development are also listed. The presentation aims to educate attendees on efficiently generating automated tests through plugin capabilities.
3. Goals
• Give you a taste of creating a Selenium
IDE plugin
• Make you aware of the code in various
files by completing the TODOs in the
exercises
• Introduce you to ideas for efficiently
creating tests or test data
4. Agenda
• Brief introduction
• Create a Selenium IDE plugin with
– Menu and Toolbar buttons
– Selenium IDE Plugin API
– Preferences
– Command Builder
• Ideas to efficiently create tests
5. Getting Ready
• Install the latest version of Firefox
– Either Firefox 3.6.16 or Firefox 4.0
• Install 7-Zip or your favorite zip tool
• Download the WorkshopFiles.zip
– http://links.reallysimplethoughts.com/files/Wor
kshopFiles.zip
6. Using WorkshopFiles.zip
• Extract WorkshopFiles.zip
• Install the special version of Selenium IDE
(selenium-ide-multi-workshop.xpi) included
in it
• The HandsOn folder contains the
exercises
• The Solutions folder contains the
completed versions and pre-built plugins
8. Where to find them?
• Selenium download page
http://seleniumhq.org/download/
• Firefox add-ons page
https://addons.mozilla.org/en-US/firefox/
• Other places on the Internet
Google ☺
11. Efficient Automated Test Creation?
“Automated Tests are Cool!”
“Automating Generation of Automated Tests is
Even Cooler.”
“But How?”
12. “Be Efficient” Selenium IDE Plugin
Here’s How!
• Add “Write My Test” to the context menu
• When I click on it, write my test for me
13. “Be Efficient” Selenium IDE Plugin
The Benefits
• Capture test data or test commands
directly
• Direct access to the web page
• Reuse code from Selenium IDE and
Selenium
15. Be Efficient In Action
• Open Selenium IDE
• In Firefox, open www.bing.com
• Type selenium in search box
• Hit the enter key
• Right click on the results web page
• Select Write My Test!
• Check the generated test case
• Execute the test case (maybe with
highlight elements plugin)
21. Be Efficient Code
Main code
Installation / registration code
User interface
User interface styling
Preferences defaults
Files required for a Firefox add-on
23. Simple Firefox Add-on
• XPI (zippy)
• Install Manifest (install.rdf)
• Chrome Manifest (chrome.manifest)
• Overlay containing a menu and toolbar
button
• Style-sheet for the toolbar button
• Icon for the toolbar button
25. Your Turn
• Explore the files in the first exercise
HandsOn/selenium-ide_be-efficient_ex1
• Complete the TODO in the following files
– Install Manifest (install.rdf)
– Chrome Manifest (chrome.manifest)
– Overlay (ovIDE.xul)
– Style sheet (beefficient.css)
26. Package and Install
• Create a zip of all files in src folder
• Change the file extension from .zip to .xpi
• Open this xpi file in Firefox
• Click on install button
• Restart to complete
28. Result
• New menu item in the Options menu in
Selenium IDE
• A new toolbar button on the right side
• Clicking on the menu item or toolbar item
results in a simple alert message
34. Your Turn
• Explore the files in the second exercise
HandsOn/selenium-ide_be-efficient_ex2
• Complete the TODO in the following files
– Chrome Manifest (chrome.manifest)
– Setup overlay (setup.xul)
– Setup code (setup.js)
– Overlay (ovIDE.xul)
– Real plugin code (BeEfficient.js)
35. Result
• Be Efficient Plugin now shows up in
Plugins tab of the Selenium IDE options
dialog
• The plugin code in BeEfficient and
ovIDE.xul can now change the enabled
state from the UI
38. Preferences
• Lot of support is built into Firefox
• Involves mostly boilerplate code
39. Preferences
• Create defaults for the preferences
• Create dialog to allow user to change preference
• Create an observer to receive notification of
changes
• And one of the following (or both):
– Define options in Install manifest
– Create UI (usually menu) to show Options dialog
41. Your Turn
• Explore the files in the third exercise
HandsOn/selenium-ide_be-efficient_ex3
• Complete the TODO in the following files
– Preference defaults (defaults.js)
– Options dialog (options.xul)
– Plugin code (BeEfficient.js)
– Install Manifest (install.rdf)
42. Result
• Be Efficient Plugin options dialog is
available
• The options dialog can now be opened
from the menu item
• The preference can be seen in
about:config
• The preference and the UI elements are
now in sync
46. Command Builder
• Puts a menu item in the context menu on
the web page when Selenium IDE is open
• Three types: Action, Accessor, Util
• Util type will be available with Selenium
IDE v1.0.11
47. Util Command Builder
• Register the Util command builder
functions
• Prepare (builder) function
– Returns the menu item to show
• Execute function
– Called when the menu item is clicked
– Can return zero or more commands to add to
the test case
48. Be Efficient Command Builder
• When the Write My Test! context menu
item is pressed, create commands for the
following
• Verify page title
• Wait for all results
• Verify each result
49. Your Turn
• Explore the files in the third exercise
HandsOn/selenium-ide_be-efficient_ex4
• Complete the TODO in the following file
– Plugin code (BeEfficient.js)
50. Result
• Write My Test! context menu is available
on the web page when Selenium IDE is
open
• Clicking on the write my test on bing.com
search results page will generate your test
51. Be Efficient In Action
• Open Selenium IDE
• In Firefox, open www.bing.com
• Type selenium in search box
• Hit the enter key
• Right click on the results web page
• Select Write My Test!
• Check the generated test case
• Execute the test case (maybe with
highlight elements plugin)
52. Resources for Selenium IDE Plugins
• Selenium IDE Plugin Documentation
http://seleniumhq.org/projects/ide/plugins.html
• My Blog
http://blog.reallysimplethoughts.com/