Click here to load reader

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

  • View
    426

  • Download
    0

Embed Size (px)

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

Portnov Computer School presents:

Selenium Web Test Tool TrainingDiscover the automating power of SeleniumPresented by:

Kangeyan Passoubady (Kangs)

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

2

Day 2Quick Tour of Selenium IDE Advanced Features

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

2

Options Menu Adding a New Format #1Go to ToolsSelenium IDE Options Format Tab Press the add button

Click the add button to add a new format

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

3

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)

4

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

Select comma from the separator options

Click here Ok

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

5

Options Menu Adding a New Format #4Now we have created two new formats: 1. Comma Separated Values (CSV) 2. Tab Delimited Values (TDV) Well 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.html Select 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)

6

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.csv

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

7

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.Discover the automating power of SeleniumCopyright 2008-2010 by Kangeyan Passoubady (Kangs)

GE Test Case1.csv in Microsoft Excel Application

8

Options Menu Adding a New Format #7var SEPARATORS = { comma: ",", tab: "\t" }; options = {separator: 'comma'}; configForm = 'Separator' + '' + '' + '' + '' + '' + '';Two separators type CSV, 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)

9

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; }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. It may be used to embed title into the source

Format an array of commands to the snippet of source. Used to copy the source into the clipboard.

Discover the automating power of Selenium

10

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

11

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 symbolDiscover the automating power of SeleniumCopyright 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.js, to handle two new formats: 1. STIQ Pipe Format 2. Double Tilde FormatDiscover the automating power of SeleniumCopyright 2008-2010 by Kangeyan Passoubady (Kangs)

13

Options Menu Adding a STIQ Format #2var SEPARATORS = { comma: ",", Pipe: "|", tab: "\t", Tilde: '~~' }; options = {separator: 'Pipe'}; configForm = 'Separator' + '' + '' + '' + '' + '' + '' + '' +'';Copyright 2008-2010 by Kangeyan Passoubady (Kangs)

Two more separator types added 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 #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"; } Now we have added a switch } } statement which handles | and return result;} ~~ delimiters.Discover the automating power of SeleniumCopyright 2008-2010 by Kangeyan Passoubady (Kangs)

Format Test Case and return the source No coding change required in this function

15

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

16

Options Menu Adding a STIQ Format #5case '~~': 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);}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

Options Menu Adding a STIQ Format #61. Now well put all the functions together in a file 2. Name the file as : selenium_IDE_STIQ_Pipe_v1.js 3. 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 Tab 6. Press Add button 7. 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: STIQ 10. Press Ok button to close the window 11. Press Ok button to close the Selenium IDE Options 12. Now well do a simple test in Google Maps to test the STIQ format.Discover the automating power of SeleniumCopyright 2008-2010 by Kangeyan Passoubady (Kangs)

18

Options Menu Adding a STIQ Format #71. 2. 3. 4. 5. Go to the below URL:http://maps.go

Search related