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
- 27. Result
- 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
- 29. Selenium IDE Plugin API
- 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.
- 33. Plugin API
- 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
- 36. Result
- 37. Preferences
- 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
- 40. Preferences
- 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
- 43. Result
- 44. Result
- 45. Creating a Command Builder
- 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