SlideShare a Scribd company logo

Efficient Automated Test Creation With Selenium IDE Plugins

•
•
S
Samit Badle

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.

Related slideshows

Selenium IDE
Selenium IDESelenium IDE
Selenium IDE
 
Selenium ppt
Selenium pptSelenium ppt
Selenium ppt
 
Selenium IDE features
Selenium IDE featuresSelenium IDE features
Selenium IDE features
 
1 of 55
Download to read offline
Efficient Automated Test Creation With Selenium IDE Plugins Selenium Conference 2011 San Francisco 4th April 2011
Samit Badle @samitbadle http://blog.reallysimplethoughts.com
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
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
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
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
What are Selenium IDE Plugins? Demos!
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 ☺
http://seleniumhq.org/download/
https://addons.mozilla.org/
Efficient Automated Test Creation? “Automated Tests are Cool!” “Automating Generation of Automated Tests is Even Cooler.” “But How?”
“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
“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
Demo!
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)
Be Efficient In Action
Be Efficient In Action
Be Efficient In Action
Be Efficient In Action
Be Efficient In Action
Be Efficient Code Main code Installation / registration code User interface User interface styling Preferences defaults Files required for a Firefox add-on
Simple Firefox Add-on
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
Simple Firefox Addon
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)
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
Result
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
Selenium IDE Plugin API
Plugin API Functions • addPlugin • addPluginProvidedIdeExtension • addPluginProvidedFormatter • addPluginProvidedUserExtension
Using the Plugin API • Code to register plugin with Selenium IDE • Load the real plugin code as an IDE extension • Lots of boilerplate code
Using My pluginframework.js Lots of boilerplate code hidden away in pluginframework.js and reduces the required code to two lines.
Plugin API
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)
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
Result
Preferences
Preferences • Lot of support is built into Firefox • Involves mostly boilerplate code
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
Preferences
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)
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
Result
Result
Creating a Command Builder
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
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
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
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)
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
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)
Resources for Selenium IDE Plugins • Selenium IDE Plugin Documentation http://seleniumhq.org/projects/ide/plugins.html • My Blog http://blog.reallysimplethoughts.com/
Resources for Firefox Add-ons https://developer.mozilla.org/en/XUL_School https://developer.mozilla.org/en/Building_an_Extension https://developer.mozilla.org/En/Firefox_addons_developer_guide http://robertnyman.com/2009/01/24/how-to-develop-a-firefox-extension/ http://books.mozdev.org/chapters/index.html https://developer.mozilla.org/en/Creating_XPCOM_Components http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/ http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/
Time to Celebrate! Thanks for Joining!
Questions? Feel free to chat with me anytime

More Related Content

Efficient Automated Test Creation With Selenium IDE Plugins

  • 1. Efficient Automated Test Creation With Selenium IDE Plugins Selenium Conference 2011 San Francisco 4th April 2011
  • 2. Samit Badle @samitbadle http://blog.reallysimplethoughts.com
  • 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
  • 7. What are Selenium IDE Plugins? Demos!
  • 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
  • 14. Demo!
  • 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)
  • 16. Be Efficient In Action
  • 17. Be Efficient In Action
  • 18. Be Efficient In Action
  • 19. Be Efficient In Action
  • 20. Be Efficient In Action
  • 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
  • 30. Plugin API Functions • addPlugin • addPluginProvidedIdeExtension • addPluginProvidedFormatter • addPluginProvidedUserExtension
  • 31. Using the Plugin API • Code to register plugin with Selenium IDE • Load the real plugin code as an IDE extension • Lots of boilerplate code
  • 32. Using My pluginframework.js Lots of boilerplate code hidden away in pluginframework.js and reduces the required code to two lines.
  • 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/
  • 53. Resources for Firefox Add-ons https://developer.mozilla.org/en/XUL_School https://developer.mozilla.org/en/Building_an_Extension https://developer.mozilla.org/En/Firefox_addons_developer_guide http://robertnyman.com/2009/01/24/how-to-develop-a-firefox-extension/ http://books.mozdev.org/chapters/index.html https://developer.mozilla.org/en/Creating_XPCOM_Components http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/ http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/
  • 54. Time to Celebrate! Thanks for Joining!
  • 55. Questions? Feel free to chat with me anytime