Automated website testing in Firefox with Selenium IDE plugin

Mar 29th, 2016 by Max Tokman


User experience testing is a crucial element of web quality assurance.   One UX testing solution we use internally is a Selenium IDE plugin for Firefox, which allows you to record interactions with multiple elements and multiple web pages, organize recorded tests into sets (suites) and save them for future use.  Below is a screenshot showing Selenium IDE popup that appears in Firefox after plugin is installed and activated, with test cases organized on the left, playback and recording controls on the top, actions being recorded in the main content area on the left and log area on the bottom.

Selenium IDE Interface

Installing Selenium IDE

  1. Install Selenium IDE by visiting

  2. Go to the "Selenium IDE" header and you should find the link with the latest released version available. Click on the link and download Selenium.

  3. Now go to your downloads directory and double click on the selenium-selenium-ide-X.X.X.xpi file.

  4. Firefox (which needs to be set as your default browser) will display the following message:

    selenium ide firefox install


  1. Click "Install Now" to continue

  2. You will have to restart Firefox in order to continue with the installation

  3. After restarting Firefox, Selenium IDE icon will be available on browser Toolbar.

    selenium ide toolbar icon

How to use

Creating a Test Case

  1. Start Selenium IDE from Firefox's Tool Bar.

  2. Add "Base URL" to specify web page on which the test is going to be performed. This URL can be changed to perform the same test case on a different URL.

    selenium ide baseurl


  1. Once you've added the Base URL you can press the "Record" button (red round button top right) and start performing a manual test to the site (filling inputs, clicking links, etc.).

  2. As you perform your manual test, Selenium will populate its commands table with all your interactions on the page.



  1. After you've finished recording your test, press the "Record" button again to stop the recording process.

  2. Once your test is done recording, you can use the "Play" buttons to play either and entire Test Suite or current Test Case.



  1. Right click on the test case's title, at the moment "Untitled *" and click on "Properties".



  1. Here you can change the Test Case's Title to something more descriptive as you will probably have many test cases in a single Test Suite.



  1. Once your test case has a title, you can proceed to save it. Click Firefox's menu File> Save Test Case As … and add a name to the file. Test Cases could be saved as HTML files.



  1. If you save a Test Case as an HTML file you can later double click on it and see the table on any browser.



Editing an existing Test Case

Editing an existing Test Case it's simple:

  1. Start Selenium IDE from Firefox's Tool Bar.

  2. Click Firefox's menu File> Open … and browse to the Test Case file that you want to work with.

Once loaded there are several things you can do to a Test Case:

  • You can "Edit" a command

  • You can "Add" new commands

  • You can "Delete" commands


Editing a Command

  1. Click on a command from the Commands Table to select it.

  2. Right below the commands table you'll see the selected command's information



  1. Here you can change the command executed selecting from the drop down menu. You CAN Find an Entire list of Selenium's commands in the Selenium Reference ("broken link").



  1. Once a command is selected you can see a short reference at the bottom of the app, where you'll find the command's arguments and description.

    selenium ide command reference


  1. You can also edit the target of the command by changing the target's id.

    selenium ide edit target


  1. If you do not know the target's id you can click on "Select" and then click on the website's element you want to apply the command to, this will get you its id.

    selenium ide select target


  1. And finally you can change the value used with the selected command by changing the "Value" field.

  2. After you've finished editing commands you can proceed to save your test case as previously explained.


Adding a new command

  1. Right click anywhere on the command's table and select the "Insert New Command" option.

  2. An empty new command will be added to the table.

  3. Edit it as previously explained.

  4. After edited, drag and drop the command to its required position.

  5. After you've finished adding commands you can proceed to save your test case as previously explained.


Deleting command

  1. Go to your commands table and right click on the command you want to eliminate.

  2. Select "Delete" from the menu.

  3. After you've finished deleting commands you can proceed to save your test case as previously explained.

Reusing Selenium Test Cases

As stated on the Selenium IDE Documentation here:

"The Base URL field at the top of the Selenium-IDE window is very useful for allowing test cases to be run across different domains. Suppose that a site named had an in-house beta site named Any test cases for these sites that begin with an open statement should specify a relative URL as the argument to open rather than an absolute URL (one starting with a protocol such as http: or https:). Selenium-IDE will then create an absolute URL by appending the open command’s argument onto the end of the value of Base URL…"

Related Links

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

May 31st, 2017 by Max Tokman

Americans with Disabilities Act (ADA) is slated to become a legal requirement for websites selling goods or services directly to the public starting in 2018. There are already plenty of good resources for identifying code-based compliance, but image compliance is a trickier matter. As a quick solution, we p...

Mar 24th, 2016 by Max Tokman

This instruction will be useful for anyone who has to test new website being build, or website being transferred to new server, prior to DNS change when all you have is a new website's IP address. You can make changes on your local machine to associate web address (URL) with known IP address and test how the webs...