Selenium-Tutorial Quick-Tour-of-Selenium-IDE-Advanced-Features...

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

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 Selenium Copyright © 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” button CSV Format Source Code

Select comma from the separator options

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

Click here “Ok”

5

Options Menu  Adding a New Format #4 Now 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.html Select the Source Tab, what do you see, 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 #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

GE Test Case1.csv Select CSV Format

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

GE Test Case1.csv in Microsoft Excel Application

8

Options Menu ď&#x192; Adding a New Format #7 var 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 type CSV, TDV The customizable option that can be used in format/parse functions.

Comma is the default value

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

XUL XML String for the UI of the options dialog

9

Options Menu ď&#x192; Adding a New Format #8 function 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 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 Copyright Š 2008-2010 by Kangeyan Passoubady (Kangs)

10

Options Menu ď&#x192; Adding a New Format #9 function 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 Selenium Copyright Š 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 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.js”, to handle two new formats: 1. STIQ Pipe Format 2. Double Tilde Format Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs)

13

Options Menu ď&#x192; Adding a STIQ Format #2 var 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 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 Copyright Š 2008-2010 by Kangeyan Passoubady (Kangs)

14

Options Menu  Adding a STIQ Format #3 function format(testCase, name) { return formatCommands(testCase.commands); }

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

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 Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs)

15

Options Menu ď&#x192; Adding a STIQ Format #4 function 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 Selenium Copyright Š 2008-2010 by Kangeyan Passoubady (Kangs)

16

Options Menu ď&#x192; 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 Selenium Copyright Š 2008-2010 by Kangeyan Passoubady (Kangs)

17

Options Menu  Adding a STIQ Format #6 1. Now we’ll 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 we’ll do a simple test in Google Maps to test the STIQ format.

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

18

Options Menu  Adding a STIQ Format #7 1.

2.

3.

4.

5.

Go to the below URL:http://maps.google.com/maps Type or Cut and Paste the below Address: 1580 West El Camino Real, Mountain View, CA 94040 Verify the Text Present “Portnov Computer School” Verify the Title “1580 West El Camino Real, Mountain View, CA 94040 Google Maps” 6. Click on the “Portnov Computer School” link 7. 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 IDE 10. Make sure Selenium IDE  Options Menu  Format  STIQ 11. Save the test case, File  Save Test Case  Google Maps Test Case1.pipe.txt 12. Click and open the file in Notepad Discover the automating power of Selenium Copyright © 2008-2010 by Kangeyan Passoubady (Kangs)

19

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 source it should be “|” formatted

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

See the test case, it should be formatted like this

20

Options Menu ď&#x192; 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 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

â&#x20AC;˘ 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