23
Selenium Web 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

Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

Embed Size (px)

Citation preview

Page 1: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 2: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

Discover the automating power of SeleniumCopyright © 2008-2010 by Kangeyan Passoubady (Kangs) 2

Day 2

Quick Tour of Selenium IDEAdvanced Features

2

Page 3: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 4: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 5: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 6: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 7: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 8: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 9: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 10: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 11: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 12: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 13: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 14: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 15: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 16: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 17: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 18: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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.

Page 19: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 20: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 21: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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

Page 22: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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)?

Page 23: Selenium Tutorial Day 22 - Quick Tour of Selenium IDE - Advanced Features

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)