SpecFlow : How to write selenium Webdriver script with SpecFlow and C# using Visual Studio

SpecFlow is the .Net version of Cucumber. This is a Behavior development framework for .Net. Here we will show how we can implement our Selenium Webdriver script using SpecFlow framework.

Test Case : Verify the search Functionality of Google Search page

• Open the browser and navigate to “www.google.com”.
• Enter the word “SpecFlow” as Search Text.
• Click on Search button.
• Verify the search result.

Step One : Installing IDE integration package for SpecFlow

• Open Visual Studio and go to Tools>>Extension and Updates…

 

• Extensions and Update window is displayed. Enter the word “SpecFlow” at search text box and press enter from keyboard. “SpecFlow for Visual Studio 2013” package is displayed as Search Result.
• If you see Disable and Uninstall button then it means it is already installed with your IDE like the following.

• If you see Download button then Click on this button.

• It starts downloading.

• After finishing download,click on Install button.

• After finishing installation, click on Restart Now button.

• Visual Studio will be restarted and if you go to Tools>>Extension and Updates… and search with “SpecFlow” then you see “SpecFlow for Visual Studio 2013” is installed.
• In the same way search the extensions “NUnit Test Adapter” and Download it. It is used for NUnit Framework.

• Click on Install button.

• Click on Restart Now button to restart Visual Studio.

Step Two : Crating a new project with Unit Test Framework

• Click on File menu and go File>>New>>Project

• New project window is displayed.
• Select Visual C#
• Select Test
• Select Unit Test Project

• Enter project name as “GoogleSearchTest”
• Select Location. In my case “D:\Development\”.
• Select Solution name. In my case Solution name is same as Project name.
• Check Create Directory for solution
• Click on OK button.

• “GoogleSearchTest” project is created.

Step Three : Add SpecFlow  reference from nuget.org

• Go to Solution Explorer and Right click on Reference and click on Manage NuGet Packages…

• Manage NuGet Packages window is displayed.
• Enter the text SpecFlow at search text box and press enter from Keyboard.
• SpecFlow package is displayed at Search list.
• Click on Install button.

• Installation Started.

• After finishing installation, a green color icon is displayed and shown that SpecFlow is installed.

• In the same way, we need to add SepcFlow.NUnit package.

• Clicking on Install button will install this package.

Step Four : Add Selenium Webdriver reference from nuget.org

• Enter the text Selenium WebDriver at search text box and press enter from Keyboard

Selenium WebDriver package is displayed at Search list.

Click on Install button.

Latest WebDriver will be installed and added as Reference.

Select Selenium WebDriver Support Classes package and click on Install button.

• After finishing installation and click on Close button to close the Package Manager window.
• Now verify that all the References are showing properly at the solution explorer.

Step Five : Create a Feature file and write test case steps using gherkin syntax

• Right click on the Project and go to Project>>Add>>New Item.

• Add New Item window displayed.
• Select Visual C# Items.
• Select SpecFlow Feature File.
• Enter file name as “GoogleSearchFeature.feature”. Note that Feature file name must have the extension “.feature”.
• Click on Add button.

• New Feature file is added with the project.

• Double click on the File name “GoogleSearchFeature.feature” and File is opened at the Editor with default text.

• Write the Feature name as “GoogleSearch”. Remove all the default text from Feature section.

Feature: GoogleSearch

• Write the case title as the scenario.

Scenario: Verify the search Functionality of Google Search page

• Write the test case steps using Gherkin syntax (Given…GoogleSearchWhen…Then).

Given : It describes the precondition to execute test steps.
When : It describes the steps to perform the test.
Then : It describes the expected result. 

In our case, Given clause will be,

Given I navigate to the page "www.google.com"
And I see the page is loaded

Note that we an “And” operator to write multiple clauses. 

When clause will be,

When I enter Search Keyword in the Search Text box
| Keyword  |
| SpecFlow |
And I click on Search Button

Note that here we write data table for search keyword where we use “Keyword” as the table column name and “SpecFlow” is the data. 

Then clause will be,

Then Search items shows the items related to SpecFlow

Now the Feature file looks like, 

Step Six : Write code for every step

• Here we write code for every Feature file steps.
• In Order to write code we need Add a step definition class.
• Right click on the Project and go to Project>>Add>>New Item. 

• Add New Item window is displayed.
• Select Visual C# Items.
• Select SpecFlow Step Definition
• Enter file name as “GoogleSearchFeatureSteps.cs”.
• Click on Add button.

• New class file is added with the project named “GoogleSearchFeatureSteps.cs”.

• Go to GoogleSearchFeature.feature file.
• Right click on Feature name and click on Generate Step Definitions

• Generate Step Definition Skeleton window is displayed.
• Click on Copy Methods to clipboard button and window is closed.

• Go to GoogleSearchFeatureSteps.cs class. Remove all the sample codes from the class and it looks like the following.

• Right click on the editor and paste the code on GoogleSearchFeatureSteps class. GoogleSearchFeatureSteps.cs class looks like the following. 

• Now we need to write automated scripts for every steps
• We need to add the following name space at GoogleSearchFeatureSteps.cs class.
• Go to GoogleSearchFeature.feature file.
• Right click on the First line of Given clause and click Go to Step Definition.

• Note that  GoogleSearchFeatureSteps.cs file is opened and mouse cursor is blinked on the Given method. Also note that method name is the combination of all word of Given clause.

• Write the code for GivenINavigateToThePage() method.

Note that we do not need to write any comment here as Methods name describes the steps. This is the contribution BDD.

• Write code for GivenISeeThePageIsLoaded() method.

Here we just verify that appropriate page is loaded.

• Write code for WhenIEnterSearchKeywordInTheSearchTextBox() method.

Note that we use list of data in our feature file that SpecFlow converts to table. We can use it as normal Row/Column concept.

• Write code for WhenIClickOnSearchButton() method.

• Write code for ThenSearchItemsShowsTheItemsRelatedToSpecFlow() method.

• GoogleSearchFeatureSteps.cs class looks like the following,

Step Seven : Run the test

• Delete default class UnitTest1.cs as it is not needed.

• Build the solution by going to Build>>Build Solution.
• Go to Test>>Windows>>Test Explorer
• Note that the scenario name is the test name VerifyTheSearchFunctionalityOfGoogleSearchPage
• Right click on the test name and click on Run Selected test.
  

• Test will run using NUnit and Passed.

• Click on Output link.
• We see the output step by step as it is written in our Feature file.

This is the power of SpecFlow using BDD.

Lot more new things are coming…
Happy automated scripting with SpecFlow using the concept of BDD!!!…..!!!…. 

Sikuli : Commands used in Sikuli IDE

In our last post on Sikuli we have shown how we can automate a desktop application using Sikuli IDE with image recognition technique. Here we will discuss about the command used in Sikuli IDE.

Command List : Command list is displayed at left side panel. With the help of these commands we will write the scripts. There are four sections in the command list.

1. Settings : By checking Auto capture options can be enabled or not.
2. Find : These Command lists help the tester to write script to find an UI object.
3. Mouse Actions : All the commands is this section are related mouse actions.
4. Keyboard Actions : All the Keyboard related commands are there.

1. Settings : If Auto Capture option is uncheck then Sikuli IDE will not go to Screen Capture when click any command name from Command list. 

For example if we click on click() command after unchecking the Auto Capture option, it just displays the command name at the script editor like the following,

  

Note that a camera icon is displayed at the click(camera icon) command as argument. By clicking on camera icon Sikuli IDE will move to screen capture mode and then UI can be captured.

If we click on left mouse button at screen capture mode we can back to Sikuli IDE without capturing any screen UI object.

If Auto Capture option is checked and click on a command then it automatically goes to screen capture mode and a text displays on the screen “Select an image”.

Clicking on Expand/Collapsed button, commands section can be expanded and collapsed.

2. Find : In this section, all the Sikuli IDE command related to find an UI objects are displayed. There are five commands here.

• find(captured image) : It finds out the given captured image on the screen. General syntax of find() command.

find(captured image)

For example,

 

• findAll(captured image) : It return all the available locations of the given captured image on the screen. If there are multiple UI images on the screen then we can use this findAll() and gets all the locations of the given images. We can use loop structure to access all the images. Note that Sikuli script editor supports python language.

• wait(captured image) : It waits for the given image to appear. It takes two arguments- one is the captured image and other is the time to wait. Time is counted as millisecond. General Syntax,

wait(Captured image, timestamp)

Note that we can use the constant “FOREVER” in place of timestamp that waits for the captured images up to indefinite time.

 

• waitVanish(captured image, timestamp) : It waits for the given image to vanish. The same syntax here as wait(),

waitVanish(Captured image, timestamp)

• exists() : It returns the matched UI object that is given as an argument. It the captured image given as an argument it checks and returns match object if it is matched on the screen. Generally we use it to verify expected value on our scripting. General syntax,

exists(Captured image, [timestamp])

Note that here timestamp is the time to wait for the image to appear and it is optional. We can set default time.

3. Mouse Actions : Sometimes we need to click on a button, check/uncheck a check box or option button or set focus on a text box, all of the cases we have to handle mouse event. Commands on this section will perform this activities.

• click(captured image) : It is used to click on a captured image. General syntax,

click(Captured image)

For example, if we want to click on a button on our calculator application, command will be,

Note that here click means mouse’s left button click.

• doubleClick(captured image) : It is used to double click on a captured image. General syntax,

doubleClick(Captured image)

Note that here click means mouse’s left button click.

• rightClick(captured image) : Clicking by Right mouse button on a captured image. General syntax,

rightClick(Captured image)

• hover(captured image) : If we want to hover mouse pointer on an UI object then we use hover() command. General syntax,

hover(Captured image) 

Note that it returns 1 if it finds the UI image similar to captured image or 0 if it does not.

• dragDrop(source image, destination image) : It is used to drag an object from a location and drop it to other location. General syntax,

dragDrop(source image, destination image)

4. Keyboard Actions : In order to enter data as input in a text box or copy/paste input data we need to handle keyboard actions and in that we have to write keyboard command. In Sikuli, following commands are used.

• type(text) : If we want to type some text on a text box we can use this command. It takes text as argument. Most of the cases we click on a text box to set focus and then type text. General Syntax,

type(text)

Note that it supports all keyboard commands like TAB, ESC etc.

• type(captured image, text) : This command first finds the captured image and then type the text it that area. General Syntax,

type(captured image, text)

 

• paste(text) : If we want to paste a text to a location then we can use this command. General Syntax,

paste(text)

• paste(captured image, text) : If we want to paste text to a desired location that is captured by an image we can use this paste() command. general syntax,

paste(captured image, text)

Here captured image is the location where given text is pasted.

Happy Scripting by capturing UI image using Sikuli….!!!