Blog

Automated website testing in Firefox with Selenium IDE plugin

Mar 29th, 2016 by Max Tokman

Introduction

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 seleniumhq.org/download/

  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.

    screenshot

 

  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.

    screenshot

 

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

    screenshot

 

  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.

    screenshot

 

  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.

    screenshot

 

  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.

    screenshot

 

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

    screenshot

 

  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").

    screenshot

 

  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 http://news.portal.com had an in-house beta site named http://beta.news.portal.com. 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

wordpressSEOweb designWeb DevelopmentHTML5productionresponsive designDrupaldesignCSSPhotoshopsecurityADAgooglebeta testingautomationharness-btoolsGoogle AnalyticsTestingmarketingFlashproduction tipstypographyAdobe Museweb imagesite speedintegrationswebsite buildingtechnologiesJavaScriptfirefoxbrowsercomplianceserver securityquality controlfontsthemesMicrosoftmodulesApplemobile websiteapp developmentplug-inAPIweb standardsweb preflightiOSInDesignE-commerceOpenSSLSSLIE8JSONQAmobile devicestabletsAdobe AirRIAsInteraction MetricsAdvertisingLong TailExporting from InDesign to PhotoshopInDesign to Photoshop conversionresponsive buildWordpress pluginshorizontal layoutBacklinksAdobegTLDscustom domain suffixesdevelopmentwireframeaugmented realityweb awardprogramming awardPhotoshop Layer compsdesign best practicesmobile app challengeapp lifespannon-Flash animationHTML5 animationAdobe EdgeiPad screen templateICANNweb development awardvertical layoutvideo playbackfaildudrevolutionary softwareInDesign to HTMLcommunicationclienthtmlimage sizesoftwareimage compressionweb compatibilitybreakpointresponsive statePDFAdobe Edge ReflowconvertingEdge ReflowParfaitweb design softwareogvcloudawardhostseleniumFoundationBootstrapCKEditor3rd partyAppleScriptecommercetechnologycollaborateupdatevulnerabilityCMSwebsiteiPhoneCSS3Ps. and CSS HatProject Parfaithigh fidelityconceptcodecwebmformatweb developerssidney garberVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunescustom fontsHTML4web-fontsRGBweb colorsrelationship marketingOSSW3Cfragmented technology landscapeAndroidvideo sizegammamp4microsoft’s project natalUDIDvideoCVE-2014-0224integrationLinkedInFacebookWindows XPInternet Explorer 8interactive banner adsbrochurewaresony playstationinstant video playback solutionHeartbeatonline subscriptionWebOSabletCMS for Flashoptimizednintendo wiioutsourcing
Harness-B for Basecamp Classic now allows others to see your workload!

Jan 13th, 2016 by Max Tokman

If you get swamped with tasks, let your slacker colleagues see your workload and take up some of the burden.  Whether they’ll do it is another matter entirely. Tip of the hat to Bryan Kuester for suggesting this feature.  

Testing website's new server with URL prior to launch / transfer - on Mac and PC

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