selenium tutorial day 22 - quick tour of selenium ide - advanced features
Post on 27-Nov-2014
431 Views
Preview:
TRANSCRIPT
SeleniumWeb Test Tool Training
Discover the automating power of Selenium
Portnov Computer School presents:
Presented by: Kangeyan Passoubady (Kangs)
Copy Right: 2008, All rights reserved by Kangeyan Passoubady (Kangs). Republishing requires author’s permission
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 2
Day 2
Quick Tour of Selenium IDEAdvanced Features
2
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 3
Options Menu Adding a New Format #1
Go to ToolsSelenium IDE Options Format TabPress the add button
Click the add button to add a new format
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 4
Options Menu Adding a New Format #2• Provide the name of format as “CSV Format”• Download the “seleniumIDE_CSV.js” (CSV Format) from
Selenium/Day2/Excercises Section URL• Open “seleniumIDE_CSV.js” file in notepad, (From the folder where you
have stored, right click on the file name and select Edit Option),
Name: CSV Format
Select Edit in Notepad
Discover the automating power of SeleniumCopyright © 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, select “Comma” and Press “Ok”
buttonCSV Format Source
Code
Click here “Ok”Select comma from
the separator options
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 6
Options Menu Adding a New Format #4Now we have created two new formats:1. Comma Separated Values (CSV)2. 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.htmlSelect the Source Tab, what do you see, it is in html format
HTML Format
Discover the automating power of SeleniumCopyright © 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
Select CSV Format
Source is in comma Separated values Format GE Test Case1.csv
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 8
Options Menu Adding a New Format #6• Open the GE Test Case1.csv
in Excel Application• With little formatting, 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.
GE Test Case1.csv in Microsoft Excel
Application
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 9
Options Menu Adding a New Format #7var SEPARATORS = { comma: ",", tab: "\t"};options = {separator: 'comma'};configForm = '<description>Separator</description>' +
'<menulist id="options_separator">' +'<menupopup>' +'<menuitem label="Comma" value="comma"/>' +'<menuitem label="Tab" value="tab"/>' +'</menupopup>' +'</menulist>';
Two separators typeCSV, TDV
The customizable option that can be used in
format/parse functions.Comma is the default
value
XUL XML String for the UI of the options
dialog
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 10
Options Menu Adding a New Format #8function format(testCase, name) { return formatCommands(testCase.commands);}function formatCommands(commands) { var result = ''; var sep = SEPARATORS[options['separator']]; for (var i = 0; i < commands.length; i++) { var command = commands[i]; if (command.type == 'command') { result += command.command + sep + command.target + sep + command.value +
"\n"; } } return result;}
Format an array of commands to the snippet of source.Used to copy the source into the clipboard.
Format Test Case and return the source
Argument 1: testCase Test Case to formatArgument 2: name
Name of the test case. It may be used to embed
title into the source
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 11
Options Menu Adding a New Format #9function parse(testCase, source) { var doc = source; var commands = []; var sep = SEPARATORS[options['separator']]; while (doc.length > 0) { var line = /(.*)(\r\n|[\r\n])?/.exec(doc); var array = line[1].split(sep); if (array.length >= 3) { var command = new Command(); command.command = array[0]; command.target = array[1]; command.value = array[2]; commands.push(command); } doc = doc.substr(line[0].length); } testCase.setCommands(commands);}
Source Line is parsed and in the IDE it is passed as Command, Target and Value
Parse source file and update TestCase.
Throw an exception if any error occurs
Argument 1: testCase Test Case to updateArgument 2: source
Source to parse
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 12
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 SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 13
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.js”,
to handle two new formats:1. STIQ Pipe Format2. Double Tilde Format
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 14
Options Menu Adding a STIQ Format #2var SEPARATORS = { comma: ",", Pipe: "|", tab: "\t", Tilde: '~~'};options = {separator: 'Pipe'};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>';
Two more separator types addedPipe, 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 SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 15
Options Menu Adding a STIQ Format #3function format(testCase, name) { return formatCommands(testCase.commands);}
function formatCommands(commands) { var result = ''; var sep = SEPARATORS[options['separator']]; for (var i = 0; i < commands.length; i++) { var command = commands[i]; if (command.type == 'command') {
switch (sep) { case '|': result += sep+command.command + sep + command.target + sep + command.value + sep+ "\r\n"; break; case '~~': result += sep+command.command + sep + command.target + sep + command.value + sep+ "\r\n"; break; default: result += command.command + sep + command.target + sep + command.value + "\r\n"; }
} }return result;}
Now we have added a switch statement which handles “|” and “~~” delimiters.
Format Test Case and return the source
No coding change required in this function
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 16
Options Menu Adding a STIQ Format #4function parse(testCase, source) { var doc = source; var commands = []; var sep = SEPARATORS[options['separator']];//alert("sep"+sep) while (doc.length > 0) { var line = /(.*)(\r\n|[\r\n])?/.exec(doc); var array = line[1].split(sep); if (array.length >= 3) { var command = new Command(); switch (sep) { case '|': command.command = array[1]; command.target = array[2]; command.value = array[3]; break;
See the changes in the array how it retrieves the values to command, target, value, the positions are changed now.
Parse source file and update TestCase.
Throw an exception if any error occurs
Argument 1: testCase Test Case to updateArgument 2: source
Source to parse
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 17
Options Menu Adding a STIQ Format #5 case '~~': command.command = array[1]; command.target = array[2]; command.value = array[3]; break; default: command.command = array[0]; command.target = array[1]; command.value = array[2]; } commands.push(command); } doc = doc.substr(line[0].length); } testCase.setCommands(commands);}
This one handles the ~~ (Double Tilde)
separator
The CSV, TDV are handled as a default
case
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 18
Options Menu Adding a STIQ Format #61. Now we’ll put all the functions together in a file2. Name the file as : selenium_IDE_STIQ_Pipe_v1.js3. For your convenience I have placed this file in the
http://www.portnov.com/Selenium/4. Download the file and save into your folder.5. Go to Selenium IDE Options Menu Format Tab6. Press Add button7. Open your selenium_IDE_STIQ_Pipe_v1.js in notepad (right click on the
explorer where you have placed the file, and select Edit Option).8. In notepad, press Ctrl+A (or Edit Select All) to select all the contents of
the file, press Ctrl+C (Edit Copy) to copy and paste in the Selenium IDE format source window.
9. Provide the Name of the format: STIQ10.Press “Ok” button to close the window11.Press “Ok” button to close the Selenium IDE Options12.Now we’ll do a simple test in Google Maps to test the STIQ format.
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 19
Options Menu Adding a STIQ Format #71. Go to the below URL:http://maps.google.com/maps2. Type or Cut and Paste the below Address:3. 1580 West El Camino Real, Mountain View, CA 940404. Verify the Text Present “Portnov Computer School”5. Verify the Title “1580 West El Camino Real, Mountain View, CA 94040 -
Google Maps”6. Click on the “Portnov Computer School” link7. VerifyText Present “Ste 12” on the right side inline popup window.8. AssertText “Portnov Computer School” present within the inline popup
window.9. Stop the Recoding in Selenium IDE10.Make sure Selenium IDE Options Menu Format STIQ11.Save the test case, File Save Test Case Google Maps Test
Case1.pipe.txt12.Click and open the file in Notepad
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 20
Options Menu Adding a STIQ Format #8
Selenium IDE File Open (or Ctrl+O)Select the file “Google Maps Test Case1.pipe.txt” from the path where you
have saved.It should show the source as shown below.
See the test case, it should be formatted
like this
See the source it should be “|”
formatted
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 21
Options Menu Adding a STIQ Format #9
Your test case should look like this (or similar to something like this), so that it works without any problem.
To make sure the test passes, I have added
couple of WaitFor commands
Change your script to match something
similar to this and re-run the test
Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 22
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 SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 23
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)
top related