Green Lantern Framework with Selenium IDE
Once upon a time, the average life for automation scripts that were recorded and played back was till the new user interface replaced the old one or until the HTML ID’s were changed during subtle application face lift. This kind of change is expected seldom once every 5 or 7 years or frequently with every build.
Major functionality additions, minor bug fixes, elusive changes to improve the response time, etc. all require the testers to spend a lot of time in regression testing. Build verification and predictable functional tests can rely heavily on automated testing to complete the task. Automated test scripts type in fields, click on buttons, click and wait on links, select from drop down lists, verify texts, logos, images present, compare strings of text or results.
There is a simple way to create UI/GUI repository in selenium IDE. There is a way all the UI/GUI elements can be named in English (my favorite language). Any changes to the IDs can be tracked and updated and the scripts do not have to be modified or tweaked individually ever again.
Typically tools that have a repository map such as TestComplete, Quick Test Professional, Rational Functional Tester, etc. collect and store all the GUI elements in the object repository map. When the DOM (document object model) or the HTML ID name or other properties of an element change in an application, this change could be managed / updated via the object repository map.
Automation tools such as Selenium IDE rely on the HTML ID attribute of the UI (User Interface) and GUI (graphical User Interface) to recognize an element. They do not have object repository maps to store all the UI and GUI elements. If the HTML ID changed for any reason, the script death is inevitable. To keep-up with the changes and to avoid script death, each and every script has to be changed.
The reason this concept is named after the super hero Green Lantern is – Each Green Lantern possess a power ring and power lantern that gives the user great control over the physical world as long as the wielder has sufficient will power and strength to wield it (http://en.wikipedia.org/wiki/Green_Lantern).
Plus the scripts are green. We do not need to modify the code or change all the scripts that utilize a particular element whose properties change constantly. We automation test suit developers can control the longevity of our scripts by creating them with appropriate standards. Our standards and conventions are only as good as our ideas. Just like the super Green Lantern creates objects with his will power.
Introduction
This presentation will give step by step instructions for creating a Test suite utilizing the Green Lantern concept. A tester can take this concept and utilize it for creating test suites for one’s applications.
I will discuss the possibilities and show how a script written for one UI (Gmail) can be used for a different UI (Netflix). I will discuss the recommended naming conventions, standards and methods to be followed while creating a project suit utilizing Selenium IDE. I will also explain the advantages of following these standards and naming conventions.
First step is to specify a location where the test result pictures will be stored. I like to log messages with pictures rather than go through the log file and find the errors, warning or information messages.
Second step is to identify the elements (field, links, buttons, pages, text, check boxes, etc.) that are needed for the test. These elements usually are given a logical name by the developers who coded it. I like to rename the logical names using the Selenium command called store be specifying a variable that can be interpreted easily as to which age it belongs to and what kind of an element it is and the actual name as it would display on the website.
Third step is to create a data sheet from where the test scripts will use the data from, so that the scripts are not hard coded.
Fourth step will invoke the URL intended for testing. I like to use one selenium test case solely to invoke the URL that can be replaced and used with other functionality.
Last but not least, the ingredient that adds value to this concept is being able to post a screen shot at every passed or failed step with a meaningful message as its name.
01_filePath, 02_repository, 03_dataSheet (if data is required), 04_GoToURL are the required test cases for this concept. In order to make it easy to remember and add the required test cases, I number the test cases and save them in the same numbered folder. I further numbered the functional pieces of the application too to make it easy for me to recognize them.
Installations / Software needed
Download and install –
We will utilize the Selenium IDE, Mozilla Firefox (any version as long as each is compatible with the other)
Mozilla Firefox - http://www.mozilla.org/en-US/firefox/new/
Selenium IDE - http://seleniumhq.org/download/ (download Selenium IDE latest version and any add-ons listed in the same page (optional))
FireBug for Firefox – http://getfirebug.com/downloads
Create folders –
Select a location on the local Drive and create the following folders in the order specified. The folder names that are highlighted (In Bold) only will be used for this tutorial.
Invoke Mozilla Firefox. Go to menu – Tools > Selenium IDE. Selenium IDE comes up in record mode. Stop recording (click on the “pink” button on the top right side. Delete any lines of code that may have been recorded.
3 01_FilePath
File path specifies the location for the Captured Screen Shots to be saved. Each set of screen shots will be saved to a specific location with a specific naming convention.
3.1 File Path for Gmail
Click in the Source area to highlight the first line. In the below fields, type in –
Command = store
Target = C:\000_SeleniumIDE\001_TestResults\
Value = first
Save the test case as “01_FilePath_Login_Gmail” at “C:\000_SeleniumIDE\01_FilePath”
3.2 File Path for Netflix
Copy all the lines of code from file “01_FilePath_Login_Gmail” and paste it into a new file (In Selenium IDE section Test Case, Right click and select “New Test Case”.) Change the code as such –
Save the test case as “01_FilePath_Login_Netflix” at “C:\000_SeleniumIDE\01_FilePath”
3.3 File Path for Yahoo
Copy all the lines of code from file “01_FilePath_Login_Gmail” and paste it into a new file (In Selenium IDE section Test Case, Right click and select “New Test Case”.) Change the code as such –
Save the test case as “01_FilePath_Login_Yahoo” at “C:\000_SeleniumIDE\01_FilePath”
The whole file path does not need to be specified in one selenium test case. Each folder can be listed in a selenium test case and used in the order of first, second, third, more. This way the files can be mix and matched.
4 02_Repository
Even though Selenium IDE does not offer an object repository (like in QTP) or object map (like in RFT) to store all the elements with their desired properties / attributes, we can “store” the elements by their HTML ID and / or Document Object Models with specific names (variables) that are easy to remember and relate to, when writing code in several test cases.
4.1 Store elements for Gmail
I will now capture the necessary elements that are necessary to verify a successful or failed login for page Gmail Login.
In Selenium IDE section - Test Case, right click and select “New Test Case”.
In Mozilla Firefox, navigate to https://accounts.google.com
Right click on the field Username and select option “assertText id=Email”
Right click on the field Password and select option “assertText id=Passwd”
Right click on the checkbox Stay Signed in and select option “assertText id=PersistentCookie”
Right click on the button SignIn and select option “assertText id=signIn”
Right click on the link Cant Access Your Account and select option “asertText id=link-forgot-passwd”
Log in to Gmail with valid credentials.
Right click the email ID in the Gmail Logged in page and select option “assertText id=gbgs4dn”
Right click on the button Log out and select option “assertText id=gb_71”
Log in to Gmail with invalid credentials.
Right click on the error messages in red and select option "assertText"
Save the test case as “02_repGmail” at “C:\000_SeleniumIDE\02_Repository”.
4.1.1 Store
In Windows Explorer and go to location – “C:\000_SeleniumIDE\02_Repository”. Open file “02_repGmail” in Notepad (or WordPad also suffices). Replace text “assertText” and “assertTitle” with “store” via find and replace (Ctrl + h). Replace anything in column – Command to “store”.
4.1.2 English names
Open the file again via Selenium IDE. To the HTML ID of field username (id=Email), specify Value as “fUsername”, meaning – f = field, Username = username. I find it easy to remember the elements I use for coding in English. This is my attempt to rename them to English as they would appear on the webpage along with subtly specifying the element type. For more operational naming, I usually specify the page name too like – pGmailLogin_fUsername, meaning – p = page, GmailLogin or GL (to keep the names short while making sense) = Gmail Login, f = field, Username = username. There is no right or wrong way to name the elements as long as they make sense to the person coding the test cases.
4.1.3 Naming convention
d = Dialog Box
These are the most commonly used shortcuts by me to specify the element type. I habitually abbreviate the page names but only occasionally I abbreviate the element names.
The names are short or long based on the hierarchy. Example for short names: “pGL” is short and meaningful enough for our test cases. If we also were dealing with page General Ledger, I would name the page – pGenLed to be able to differentiate easily. Example for long names: “pGL_dLoginFailure_bOK.” Or “pGenLed_dLogFail_errUsernameAndPasswordNoMatch”
Name the rest of the elements / attributes as discussed.
4.1.4 Sort Order
Sort the column = Value alphabetically. This test case file will acquire many additional elements each day. It would be difficult to keep track of the elements when there is sudden need to change or add or even look for, if particular elements already exist. So, sort all the lines in alphabetical order in the Value column to look like the below picture. A little effort will save a lot of time and sanity in the long run.
4.2 Store elements for Netflix
In Selenium IDE section Test Case, Right click and select “New Test Case”.
In Mozilla Firefox, navigate to https://signup.netflix.com/Login
Capture all the elements on the page. Log in with valid credentials and add the page title and link / button Logout.
Save the test case as “02_rep_Netflix_HomePage” at “C:\000_SeleniumIDE\02_Repository”. Following the steps discussed in ‘Store elements for Gmail’, name the attributes and sort.
4.3 Store elements for Yahoo
In Selenium IDE section Test Case, Right click and select “New Test Case”.
In Mozilla Firefox, navigate to https://login.yahoo.com
Capture all the elements on the page. Log in with valid credentials and add the page title and link / button Logout.
Save the test case as “02_rep_Netflix_HomePage” at “C:\000_SeleniumIDE\02_Repository”. Following the steps discussed in ‘Store elements for Gmail’, name the attributes and sort.
Note: I did not specify the ‘pGmail_’ or ‘pYahoo_’ or pNextflix_’ for all the attributes because, I am demonstrating the reuse of scripts with multiple yet similar user interfaces. My objective here is to show how script death can be minimized when the user interface changes.
5 Documentation (optional)
Take some time to document the elements in any kind of file that you would like. I prefer to document the naming convention of each application and its pages in excel spreadsheets. The end result would look like the
Specify values to the rest of the attributes too using the suggestions discussed. The end result would look somewhat like the picture below.
The span of the name does not matter, its uniqueness matters. The purpose for naming is to recall the element and utilize them promptly. Meaningful names will also eliminate the possibility of naming two attributes the same. Maintaining the given names in the hierarchical order in the excel spread sheet, gives me clarity about the requisite elements needed to be tested before utilizing / testing an element. (Example: Unless the page Gmail is invoked, the login test case cannot be executed)
5.1 More about 02_Repository
5.1.1 02_rep(page)
Repository file (page) to store all the elements per page. Some pages have just 2 elements specific to the page. Some pages have 200 elements specific to the page. I store the page specific elements for each page in an application in an individual repository file. This way when the User Interface or Document Object Model or HTML IDs of the page change, it would be easy to locate the particular page and update the values quickly.
5.1.2 02_repHomeElements
Repository file home to store all the home elements. I call the elements (links, logos, version, header, footer, menus etc.) that are standard on all the pages of a web application as the Home elements. This practice eliminates the need to maintain the standard elements in all the individual page repository files and also eliminates the need to update numerous files.
5.1.3 02_repPages
Repository file Pages to store all the page titles. Most pages may not need individual repository files, but it would be necessary still test their existence. Though the elements of each page are maintained in individual files, it is a good practice to store all the page titles in a singular file.
During development of an application, most pages are given page titles decided by the developers, this changes once the Business Analysts and the legal team decide and decide again, the page titles change. During organizational changes or Web site name changes (although rare in most companies) occur, it would be easier to update the Titles in one quick editing session.
5.1.4 Create 02_repPages
Go to home pages for Gmail, Netflix login and Yahoo mail. Right click anywhere on the pages and select option “assertTitle”. Add the variable name in the column Value as such - for Gmail add pGmailLogin, for Netflix login add pNetflixLogin, for Yahoo Mail add pYahooLogin.
Note: We have successfully created the pages repository file necessary for our test today. In real time, the pages of a particular application only are to be added to this file.
6 03_DataSheets
Selenium IDE does not support data driven testing. However, we can create files specifically to store data. Several of these files can be created ahead of time and saved for iteration. This kind of data files may also be used for setting up data, to keep track of the data already used and so on. Instead of in an excel sheet, the data is maintained in the selenium test case itself.
Each data using test case does not need an individual data file. For example: the file used only once for Registration can also be used for several Logins and profile changes, etc. (For now, only data for Username and Password will be discussed.)
6.1 Data Sheets for Gmail
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Click in the Source area to highlight the first line. In the below fields, type in –
Save the test case as “03_data_Gmail_Register” at “C:\000_SeleniumIDE\03_DataSheets”.
6.2 Data Sheets for Netflix
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Copy all the lines of code from file “01_data _Gmail_Register”. Modify data as necessary.
Save the test case as “03_data_Netflix_Register” at “C:\000_SeleniumIDE\03_DataSheets”.
6.3 Data Sheets for Yahoo
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Copy all the lines of code from file “01_data _Gmail_Register”. Modify data as necessary.
Save the test case as “03_data_Yahoo_Register” at “C:\000_SeleniumIDE\03_DataSheets”.
6.3.1 About data sheets
I like to name the data variables as “data_(name)”. This way the data variables won’t interfere with repository variables. I would also highly recommend maintaining a main data file for each set of functionalities. This main data sheet could be cloned and reused with a new name and updated data. Uniquely naming the data files will help identify the data we seek for a particular test results.
7 04_GoToURL
Selenium typically records the default URL each test case is supposed to invoke before executing the steps in it. There are plenty of occasions where we would like to use the steps created on one environment in another (example: login script created in environment QA1 is to be used on the build installed in environment QA2). There are plenty of occasions where we would like to continue running various test case steps on a particular environment too. For this purpose, I would highly recommend maintaining a file specifically for invoking the URL alone.
During company or website name changes and such could happen seldom. Once again this kind of practice will also eliminate the need to update the URL on each individual test case saving time.
7.1 04_GoToURL for Gmail
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Start recording (click on the red button. The red button turns pink.)
In Mozilla Firefox, navigate to https://accounts.google.com
Stop recording.
Add (write) steps to verify title and to capture a screen shot of the page for reference.
Save the test case as “04_GoTo_Gmail” at “C:\000_SeleniumIDE\04_GoToURL”.
7.2 04_GoToURL for Netflix
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Copy all the steps from test case “04_GoTo_Gmail” and paste them in the new Test Case.
Update “${pGmailLogin}” to “${pNetflixLogin}”
Save the test case as “04_GoTo_Netflix” at “C:\000_SeleniumIDE\04_GoToURL”.
Via Windows Explorer navigate to the location “C:\000_SeleniumIDE\04_GoToURL”.
Open the file “04_GoTo_Netflix”
Replace the URL https://accounts.google.com with https://signup.netflix.com/Login
Save the file and close it.
7.3 04_GoToURL for Yahoo
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Copy all the steps from test case “04_GoTo_Gmail” and paste them in the new Test Case.
Update “${pGmailLogin}” to “${pYahooLogin}”
Save the test case as “04_GoTo_Yahoo” at “C:\000_SeleniumIDE\04_GoToURL”.
Via Windows Explorer navigate to the location “C:\000_SeleniumIDE\04_GoToURL”.
Open the file “04_GoTo_Yahoo”
Replace the URL https://accounts.google.com with https://login.yahoo.com
Save the file and close it.
8 07_Login scripts for Gmail, Netflix, Yahoo
We are now going to create selenium test cases for Login Steps, Login Pass, Login Fail and Log Out. These test cases will be hand written (keyboard typed) not recorded using the variables created in the previous files. These test cases can be used for all the three user interfaces (Gmail, Netflix, and Yahoo).
In Selenium IDE section Test Case, Right click and select “New Test Case”.
Manually type the following in Command, Target, and Value.
8.1 Login Steps
Save the test case as “07_LoginSteps” at “C:\000_SeleniumIDE\07_Login”.
8.1.1 Purpose of Login Steps
Type in field Username the data specified for the Username;
Type in field Password the data specified for the Password;
Click button Sign In and wait for the page to load.
Note: This test case only carries on the steps for a test. It does not verify if the test had passed or failed.
8.2 Login Pass
Save the test case as “07_LoginPASS” at “C:\000_SeleniumIDE\07_Login”.
8.2.1 Purpose of Login Pass
Only if text Username is present execute the rest of the steps;
Capture and save a screen shot at the specified location as PASS.
Note: This test case executes and logs a picture as PASS, if the desired outcome (text Username) exists.
8.3 Login Fail
Save the test case as “07_LoginFAIL” at “C:\000_SeleniumIDE\07_Login”.
8.3.1 Purpose of Login Fail
Only if text Username is NOT present execute the rest of the steps;
Only if field Username is present execute the rest of the steps;
Capture and save a screen shot at the specified location as FAIL.
Note: This test case executes and logs a picture as FAIL, if the desired outcomes (text Username does not and field Username) exist.
8.4 Log Out
Save the test case as “07_LogOut” at “C:\000_SeleniumIDE\07_Login”.
8.4.1 Purpose of Log Out
Only if text Username is present execute the rest of the steps;
Click the text Username;
Click the button Sign Out and wait for the page to load.
Capture and save a screen shot at the specified location as LogOut.
Note: This test case executes and logs a picture as LogOut only if the desired outcome (text Username) exists.
9 Base Script
For effortless and quick test case creation, I would recommend creating and maintaining a base script. The base script will consist of all the elements needed for writing a test case for most actions, verifications and assertions.
10 Test set arrangement and execution order
We have created test cases in modular fashion. It is time to put them together sensibly. As I had already mentioned,
01_FilePath (files – 01_FilePath_First, 01_FilePath_Second, 01_FilePath_Third),
02_Repository (files – 02_repPages, 02_repHomeElements files; If specific page or pages are involved in the test, 02_rep (page(s)) will also be necessary in the test suit),
03_DataSheet (optional, datasheets may be added as necessary or may be skipped for some test sets),
04_GoToURL (one file suffices)
The test cases should be added in ascending order till 04_GoToURL.
This is one way to create, store and guesstimate when a test case is ready and if it is set up in order. Now, the actual test cases may be added in the order they would execute manually.
11 Test Execution and Results
Typically, all test cases are supposed to turn Green in order to assume that the test set passed. Here, that is not the case. Certain test cases are supposed to pass and certain test cases are supposed to fail. Each test case will only execute if the required conditions are met.
Provide valid credentials to pass a test. Passed tests would have three picture logs, one for navigating to the website, one for successful login, one for log out. Provide invalid credentials to fail a test. Failed tests would have two picture logs, one for navigating to the website, one for failed login.
SAREE
The most suitable mnemonic to summon up the steps for Green Lantern Automation concept in my opinion would be SAREE. (http://en.wikipedia.org/wiki/Sari) The scripts we create can be wrapped to any User Interface testing as long as their functionalities are similar.
Select elements for testing.
Select the elements that would be used for testing. Listed below are a few common elements.
Assert appropriate custom name to each element in the repositories
Rename a few of the above elements to describe them fittingly. Listed below are a few elements named to fit Google page.
Page à pGoogle
Text Field à pGoogle_fUsername
Button à pGoogle_bSearch
Check Box à pGoogle_cbChose
Radio button à pGoogle_rbTrue
Link à pGoogle_lHome
Menus à pGoogle_mMore
Sub Menu à pGoogle_smTranslate
Drop Down List à pGoogle_ddlSettings
Caption à pGoogle_capGoogle
Image à pGoogle_imgGmail
Logo à pGoogle_logoGoogle
Text à pGoogle_tVersion
Section à pGoogle_secSearch
Dialog box à pGoogle_dSuccessful
Based on the naming convention one can (with a little bit of training) can identify that the elements belong to the page Google
wRite the test cases with custom names
Selenium IDE typical code would look as such –
Execute the test cases
Exact the element property in the repositories from time to time
No comments:
Post a Comment