efficient automated test creation with selenium ide plugins

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

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 Code

Main code

User interface

Installation / registration code

Preferences defaults

Files required for a Firefox add-on

User interface styling

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


– 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


– 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

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.comsearch results page will generate your test


• 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

efficient automated test creation with selenium ide plugins

Technology