Portnov Computer School presents

:

Selenium Web Test Tool Training
Discover the automating power of Selenium
Presented by:

Kangeyan Passoubady (Kangs)

Copy Right: 2008, All rights reserved by Kangeyan Passoubady (Kangs). Republishing requires author’s permission

2

Day 2
Quick Tour of Selenium IDE Advanced Features

Discover the automating power of Selenium
Copyright © 2008-2010 by Kangeyan Passoubady (Kangs)

2

Options Menu  Adding a New Format #1 Go to ToolsSelenium IDE Options Format Tab Press the add button Click the add button to add a new format Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 3 .

js” (CSV Format) from Selenium/Day2/Excercises Section URL Open “seleniumIDE_CSV. right click on the file name and select Edit Option). Name: CSV Format Select Edit in Notepad Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 4 .js” file in notepad.Options Menu  Adding a New Format #2 • • • Provide the name of format as “CSV Format” Download the “seleniumIDE_CSV. (From the folder where you have stored.

select “Comma” and Press “Ok” button CSV Format Source Code Select comma from the separator options Click here “Ok” Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 5 .Options Menu  Adding a New Format #3 • Press Ctrl+A to select all the Text from the notepad. and Press Ctrl+C to copy the contents • Paste the JavaScript contents in Selenium IDE Format Source window • Press the “OK” button • Under the Separator Option.

it is in html format HTML Format Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 6 .Options Menu  Adding a New Format #4 Now we have created two new formats: 1. what do you see.html Select the Source Tab. Tab Delimited Values (TDV) We’ll get into action to test the new formats Open any of the existing test cases you have stored by going to File  Open  GE Test Case1. Comma Separated Values (CSV) 2.

csv Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 7 .Options Menu  Adding a New Format #5 • • • Go to Format  Select CSV Format from the available options Now look at the source Tab. it is converted into Comma Separated Value format. Save by going File  Save Test Case As option. GE Test Case1.csv Source is in comma Separated values Format Select CSV Format GE Test Case1.

you can look at your test cases in a nice formatted way in Excel Sheet. • You can able to send your test cases to the Business Users easily through excel sheet. • If you are interested we can look at the JavaScript code which does this conversion. Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) GE Test Case1.csv in Microsoft Excel Application 8 .csv in Excel Application • With little formatting.Options Menu  Adding a New Format #6 • Open the GE Test Case1.

Two separators type CSV. tab: "\t" }.".Options Menu  Adding a New Format #7 var SEPARATORS = { comma: ". Comma is the default value XUL XML String for the UI of the options dialog Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 9 . options = {separator: 'comma'}. TDV The customizable option that can be used in format/parse functions. configForm = '<description>Separator</description>' + '<menulist id="options_separator">' + '<menupopup>' + '<menuitem label="Comma" value="comma"/ >' + '<menuitem label="Tab" value="tab"/>' + '</menupopup>' + '</menulist>'.

} } return result.length. name) { return formatCommands(testCase. if (command.value + "\n". } Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) Format Test Case and return the source Argument 1: testCase Test Case to format Argument 2: name Name of the test case.target + sep + command. } function formatCommands(commands) { var result = ''.command + sep + command. Discover the automating power of Selenium 10 . It may be used to embed title into the source Format an array of commands to the snippet of source. var sep = SEPARATORS[options['separator']].commands). Used to copy the source into the clipboard. for (var i = 0.Options Menu  Adding a New Format #8 function format(testCase. i < commands.type == 'command') { result += command. i++) { var command = commands[i].

push(command).value = array[2].exec(doc). Argument 1: testCase Test Case to update if (array.} Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 11 . Target and commands.setCommands(commands).substr(line[0]. Command. any error occurs while (doc.Options Menu  Adding a New Format #9 function parse(testCase.target = array[1].*)(\r\n|[\r\n])?/. var doc = source. var commands = []. Source Line is parsed and in the IDE it is passed as command.length >= 3) { Argument 2: source var command = new Command().command = array[0]. Source to parse command.length > 0) { var line = /(. var array = line[1]. Throw an exception if var sep = SEPARATORS[options['separator']].length). command. } testCase.split(sep). source) { Parse source file and update TestCase. Value } doc = doc.

Options Menu  Adding a STIQ Format #1 • StoryTestIQ (STIQ) is a test framework used to create Automated Acceptance Tests or Story Tests • STIQ uses selenium which has the following syntax for test cases |command|value|target| • It starts with a pipe symbol ends with a pipe symbol • Command and Value separated by a Pipe symbol • Value and Target separated by a Pipe symbol Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 12 .

Options Menu  Adding a STIQ Format #1 • Create one more format as shown below: ~~Command~~Value~~Target~~ • Double Tilde is the separation Character • Modify the javascript “seleniumIDE_CSV. to handle two new formats: 1. Double Tilde Format Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 13 . STIQ Pipe Format 2.js”.

Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) Two more separator types added Pipe. tab: "\t". Tilde: '~~' }. configForm = '<description>Separator</description>' + '<menulist id="options_separator">' + '<menupopup>' + '<menuitem value="Comma" label="Comma Separated"/>' + '<menuitem value="Tilde" label="Double Tilde"/>' + '<menuitem value="Pipe" label="Pipe STIQ Format"/>' + '<menuitem value="Tab" label="Tab Delimited"/>' + '</menupopup>' +'</menulist>'. options = {separator: 'Pipe'}. Tilde The default option Pipe XUL XML String for the UI of the options dialog Where Tilde and Pipe are added now Discover the automating power of Selenium 14 .".Options Menu  Adding a STIQ Format #2 var SEPARATORS = { comma: ". Pipe: "|".

target + sep + command.} “~~” delimiters.value + sep+ "\r\n".type == 'command') { switch (sep) { case '|': result += sep+command.command + sep + command. for (var i = 0.commands).Options Menu  Adding a STIQ Format #3 function format(testCase. i < commands. break. var sep = SEPARATORS[options['separator']].target + sep + command.target + sep + command.command + sep + command.length. default: result += command. } function formatCommands(commands) { var result = ''. break. if (command. Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) Format Test Case and return the source No coding change required in this function 15 .value + "\r\n". i++) { var command = commands[i]. } Now we have added a switch } } statement which handles “|” and return result. name) { return formatCommands(testCase. case '~~': result += sep+command.value + sep+ "\r\n".command + sep + command.

split(sep). command. var commands = []. Argument 2: source if (array. command.value = array[3]. value. changed now. var doc = source. Throw an exception if var sep = SEPARATORS[options['separator']]. the positions are command.*)(\r\n|[\r\n])?/.target = array[2]. any error occurs //alert("sep"+sep) while (doc. target. Argument 1: testCase Test Case to update var array = line[1]. source) { Parse source file and update TestCase.exec(doc).command = array[1]. break. switch (sep) { See the changes in the array how it retrieves the case '|': values to command.length >= 3) { Source to parse var command = new Command(). Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 16 .Options Menu  Adding a STIQ Format #4 function parse(testCase.length > 0) { var line = /(.

command. default: command. command.push(command).} Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) This one handles the ~~ (Double Tilde) separator The CSV. TDV are handled as a default case Discover the automating power of Selenium 17 .value = array[3].setCommands(commands). } testCase. break.Options Menu  Adding a STIQ Format #5 case '~~': command.target = array[1].command = array[0].substr(line[0].value = array[2].target = array[2].length). command. } commands. } doc = doc.command = array[1]. command.

press Ctrl+C (Edit  Copy) to copy and paste in the Selenium IDE format source window. Provide the Name of the format: STIQ 10.Options Menu  Adding a STIQ Format #6 1. Press Add button 7. For your convenience I have placed this file in the http://www. Go to Selenium IDE  Options Menu  Format Tab 6. Name the file as : selenium_IDE_STIQ_Pipe_v1. 9.js in notepad (right click on the explorer where you have placed the file. Press “Ok” button to close the Selenium IDE Options 12.portnov. Now we’ll do a simple test in Google Maps to test the STIQ format. Download the file and save into your folder. press Ctrl+A (or Edit  Select All) to select all the contents of the file.js 3. Press “Ok” button to close the window 11.com/Selenium/ 4. Now we’ll put all the functions together in a file 2. Open your selenium_IDE_STIQ_Pipe_v1. In notepad. 5. 8. Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 18 . and select Edit Option).

google. Mountain View. AssertText “Portnov Computer School” present within the inline popup window. Stop the Recoding in Selenium IDE 10. CA 94040 Verify the Text Present “Portnov Computer School” Verify the Title “1580 West El Camino Real. 3. 8. 4. 2.pipe. Make sure Selenium IDE  Options Menu  Format  STIQ 11.com/maps Type or Cut and Paste the below Address: 1580 West El Camino Real. 5.Options Menu  Adding a STIQ Format #7 1. Mountain View. 9. VerifyText Present “Ste 12” on the right side inline popup window.txt 12. Click and open the file in Notepad Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 19 . Go to the below URL:http://maps. Click on the “Portnov Computer School” link 7. File  Save Test Case  Google Maps Test Case1. Save the test case. CA 94040 Google Maps” 6.

it should be formatted like this Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 20 .pipe. It should show the source as shown below. See the source it should be “|” formatted See the test case.Options Menu  Adding a STIQ Format #8 Selenium IDE  File  Open (or Ctrl+O) Select the file “Google Maps Test Case1.txt” from the path where you have saved.

so that it works without any problem.Options Menu  Adding a STIQ Format #9 Your test case should look like this (or similar to something like this). To make sure the test passes. I have added couple of WaitFor commands Change your script to match something similar to this and rerun the test Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 21 .

Exercise #5 • How do you find Page Load Time of a webpage using Selenium IDE? • Find Page Load Time of a webpage using windows onload event in Selenium IDE (Hint: Use JavaScript)? Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 22 .

Exercise #6 • How do you convert your HTML Selenese test cases to XML compliant format? (Hint: Your XML test cases should be read and processed by any XML parser) Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs) 23 .