Browse Author: Aditya

Slide-bar and slide action using Webdriver

Some websites do have slider elements like you can see in some travel websites like given below. this moment is possible using mouse event and concept would be very much similar to the old article on the mouse event. I will take a simple example of working code with dummy data inside so you can pass your input and see this working. Here is a detailed explanation: You need to keep few things in mind:

  1. Slider bar size may or may not vary based on browser size.
  2. You may need to slide either by the number of pixels or percentage of slider bar length.

I will take very generic example of http://jqueryui.com/slider/ to explain all steps. First reason to select this example is that the size of slider bar is adjusting based on browser size and secondly its available for everyone J. In the code below, I will first try to get the size of bar at the current browser size where I want to perform slider action and then based on req I will move the slider. Make sure you don’t change the browser size in between reading the slider bar size and doing sliding action.

  1. Open URL via selenium code.

  2. Switch to the container frame to reach the slider and slider bar web element.

  3. Select the bar and get the width.

  4. Now we need to move slide to 50% (231px) or 100px. We can write small java/.net program to calculate the desired percentage in pix using the width of the bar as 463 in my case. But I will move only 40pixels.
  5. Get web element for the slider on the bar.

  6. Now we want to move the slider on right side horizontally means towards Y axis. To perform movement action we will use action class and use mouse event. To move horizontally we need to move in the Y direction of the screen so we can use MoveByOffset

    i.e. X-axis: 0 & Y axis: 40px. So first create action, Click and hold the slider, move to some pix as follows.

    Now the script has completed and you can perform the whole action in one go!!!

Happy testing!!

Jenkins and Continuous Test Execution

Continuous test execution is an essential part of automation testing, especially in regression run. If you need to start execution manually means your return on investment is not as good as needed. There are multiple ways to do this. Developers in many companies use Continuous Integration (CI) tool like Hudson, Rational Team Concert for building application multiple times in a day where codes are checked in from multiple locations. You can use the same feature of building application to perform testing as well. You can build your own in-house application to perform the same task. I will give an idea for the same at the end of the blog.


I use WebDriver for automation testing in .NET framework.  I heard that many companies use Jenkins for CI and even for testing so thought to implement my tests written in C#. After some research on the internet, I was able to implement a basic skeleton for continuous testing. In order to understand and to customize Jenkins, we will go Step by Step.

  1. Download Jenkins.
  2. Run and verify Jenkins.
  3. Install as a Window Service.
  4. Configure Jenkins as a slave. (Optional. Read only if you want to learn.)
  5. Create Job to execute the test.

1.       Download Jenkins:

In order to download Jenkins, Go to http://jenkins-ci.org/ and download ‘Latest and greatest’ version of Java web archive (.war) file and save it to some location.

2.       Run And Verify Jenkins:

Open Command window and navigate to the location where you have downloaded *.war file. Execute following command (I saved Jenkins.war file in D drive)

  • Java –jar Jenkins.war

You will see following output

image001

If you read all lines you will see that HTTP Listeners started at port 8080.

image002

3.       Install Jenkins as Window Service:

Node: If you install as window service, your tests will run in the background.

Perform Step 2 if not yet done. Click ‘Manage Jenkins’ you will see the following screen with various option.

image003

Click on ‘Install as Windows Service link. You will see the following screen.

image004

Click on Install button. Once installation complete you will see following:

image005
Go to Window Services and verify if you can see there or not. image006 For now, you will not require starting Jenkins site on the command line. You can directly start http://localhost:8080/ if your Jenkins service is running. NOTE: if you are using only window OS then you can directly install native package from http://jenkins-ci.org/ image007 You need to unzip the folder and install MSI file. That will install and get ready for step 3.

4.       Configure Jenkins as a Slave:

This is most interesting part of Jenkins. Here you can configure your slave attached to Master which is ready for step 3. You can assign tasks to various slave to perform like test execution etc. Start Jenkins Website and click on the link ‘Manage Jenkins’. You will see following option among various other options. image008 Click on the above option which will take you to the following screen. image009 Now you need to create Node that connected to master (Just like GRID (HUB-NODE)). To do that you need to click on ‘New Node’ link that should you to following screen. image010 Give some Name of Node and Click on Dumb Slave radio button that will activate the OK button. Click on OK button. This will take you to the following screen. image011 You can click on Help icon toimage012 understand more about the fields. I am giving following options # of executor: 1, Remote FS root:  D:\Shared. Launch method: Save this. It will take you the following screen. image013 As you can see above, you can start that node by given three options. It is up to you, to choose but I prefer the first option. Click on the Orange button with Launch. This will ask you to download slave-agent.jnlp. Please save this to the location where you have created your slave i.e. D:\Slave. Open command prompt and change directory to the location where you have saved this file and execute following command Javaws slave-agent.jnlp after some processing you may see following windows: image014 This will disappear in few seconds and you will see Jenkins slave Agent screen with ‘Connected’ text on the screen. image015 If you go back to Jenkin site and refresh the page in Manage Node screen, you will see the following screen. image016 You can install this slave into the machine as window services using File menu given in ‘Jenkin salve agent’ screen so in future you will not require doing the whole process of starting slave via jlnp image017 image018 Click ‘OK’. This may ask your permission to run the program. image019 Will see that Jenkins slave agent window disappear and if you check in ‘services’ you will be able to see slave as services. image020 Go back to Jenkins site and Click on slave link the page and make sure that you can see slave running. image021 Now your slave is connected to your master and ready to serve you for execution by added execution job assigned by you as given in next section.

5.       Create JOB to Execute Test:

Once your slave node is running, go to home page of Jenkins and click on ‘New Job’. image022 This will take you to the following window. Provide Job name as per your choice and select radio button. ‘Build a free-style software project’. And hit OK. image023

This will take you the detailed screen and you can fill information as you needed. Few points are very important which you should consider.

  1. Execute test at specific Node.

image024

2. Regression Run repletion :

How frequent you want to execute the test.

image025

There are various commands you can give to select the frequency of test execution ie. Every hour or at every day at some specific time frame. You can Google the commands or I can write a separate article about this if needed.

3. Execute Tests from various options (batch command preferred at least in my case)

image026

4. Post Execution:

Configure to send email or prepare report as NUnit/Junit repot etc.

image027

Once you save this job this will take you to the following screen.

image028

Click on  [Back to Dashboard] link that will take you the following screen.

image029

To execute test you can click on.image030 You will see the following screen.

image031

I think much detail covers the basic understanding of Jenkins configuration for test execution. I hope this will give you are the direction to configure Jenkins in your project. I use Webdriver in .NET environment and configure Jenkins for continuous execution and  it was successful implementation but later we decided to build our own internal application to specific for our own application which can do continuous execution and other tasks as well which is not possible via Jenkins like customized internal website with customized graph and tables but that’s another story.

I am going to write another article specifically how to execute tests using MSBuild, msTest and Nunit and another article for JUnit.

Selenium with C#

Basic WebDriver and C# script for beginners

WebDriver Test using C# and Visual Studio 2013 Express.


One of my videos is getting multiple hits for how to write WebDriver or selenium tests using C#. There are many tutorials available on the internet for Java but not many for WebDriver and C#. I will teach you how to write test scenario in C#. I have Visual Studio 2013 express edition.

Step1: Create WebDriver Project

Create new Project, and choose ‘Unit Test Project’, and give some name says; ‘AddItemToShoppingCart’ and hit the OK button.

Create new Unit Test Project

You will see following folder structure and if you open UnitTest1.cs, you will see the code

Step1.1C# Code In Visual Studio

 

Rename the file, UnitTest1.cs to some logical name and class name inside the code as well.

Step2: Add WebDriver into reference.

Go to Manage NuGet Packages and search for WebDriver.

C# Manage NuGet Package

Select the latest version of WebDriver and Selenium WebDriver Support Classes item and click Install button to install.

Webdriver and WebDriver Support files

After installation, you can see WebDriver and WebDriver.support in Reference under Solution Explorer.

Step2.2

Search ‘Selenium chrome’ and install Chrome Driver that will add chromedriver.exe to your project.

Step2.3

Step 3 (optional if you want to use NUnit instead of inbuilt UnitTestFramework in Visual Studio)

Now to you need to install NUnit before writing NUnit. Search NUnit in NuGet Package and Install. To use lean more about NUnit and attributes, please refer Learn Nunit tutorial. In this Tutorial, I will Use predefined Unit Test Framework and its attributes.

Step 4: Write WebDriver Code

Now real implementation starts here. This article will talk about Visual Studio Unit Test tool which is even new to me too. This UnitTest namespace has three main test attributes which I am going to use.

  1. The [TestClass] attribute is required in Microsoft Unit Test Framework for any class that contains Test method and you want to run in Test Explore. Class with Attribute [TestClass] must have Test method.
  2. The [TestMethod] attribute is to assign a method inside [TestClass] to run actual test code.
  3. The [TestInitialize] attribute need to assign to the method which runs prior to running any [TestMethod] attribute method.
  4. The [TestCleanup] attribute method is to run after [TestMethod] method.

[TestInitialize] attribute method will have the code to do all setup like defining any variable required for code, initializing WebDriver, opening URL etc.

[TestMethod] attribute method will have actual test code which will run after [TestInitialize] and all kind of action and verification will take place in this method.

[TestCleanup] attribute method will have code to clean up all kind of setting or action like removing any special setup or log out from the application and close application. This method can have the code to prepare the reports etc.

Test Explorer will show only methods with the attribute [TestMethod].

Step4.1

Step5: Start Writing Code

This section will have real coding.

We have two scenarios to implement

  1. We want to open an e-commerce website and pick nexus phone and add into the cart and verify if the cart has that item before proceeding to checkout.
  2. Check if you can open find makeup brush.

 

If you write both scenarios in steps:

 

Scenario 1 Scenario 2
1.       Open Brower2.       Open  the application under test says donethedeal.com3.       Click on nexus phone link that will take you to the description page.4.       Click on Add to Cart and wait for confirmation if phone added to cart.5.       Open Cart link from the top menu and verify if Phone is present there.

6.       Close the browser.

1.       Open Browser2.       Open application under test says: donethedeal.com3.       Open brush page4.       Verify that if item has description of brush

 

 

5.       Close the browser.

If you check above you will see that we have common steps in both scenarios which we can move to common area for each scenario and that will go to [TestInitialize] and the last step in [TestCleanup.]

Before writing actual code, you need to add the reference for selenium into the code as follows;

using OpenQA.Selenium;

using OpenQA.Selenium.Chrome; //to use google chrome browser.

using OpenQA.Selenium.Support;

[TestInitialize]

In this step you need to initialize the browser, let’s say Firefox using Firefox Driver. You initialize interface IWebDriver in the [TestClass] that controls the browser and have URL for application under test so these will be available across the class.

Now you need to initialize the Firefox/chrome browser and once it is open, you need to open the url to cover step 1 and step2.

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support;
using ExcelReader;

namespace AddItemToShoppingCart
{
[TestClass]
public class VerifyItems
{
IWebDriver driver;
string url = "http://learnseleniumtesting.com/demo/";
[TestInitialize]
public void TestSetup()
{
driver = new ChromeDriver();
driver.Navigate().GoToUrl(url);
}
}

 

[TestCleanup]

This attribute method will run at the end so we want to close the browser here. You just need to call the driver.Quit() to close the browser.

[TestCleanup]

public void Cleanup()

{

driver.Quit();

}

[TestMethod]

The method with this attribute will contain the actual code. Create a public method with some logical name and assign the attribute. For now, keep the method blank build the solution.

Overall code should look like this;

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support;

namespace AddItemToShoppingCart
{
[TestClass]
public class VerifyItems
{
IWebDriver driver;
string url = "http://learnseleniumtesting.com/demo/";
[TestInitialize]
public void TestSetup()
{
driver = new ChromeDriver();
driver.Navigate().GoToUrl(url);
}
[TestCleanup]
public void Cleanup()
{
driver.Quit();
}
[TestMethod]
public void AddPhoneToCartAndVerifyInCart()
{
//This is the placeholder to write actual code.
}

}
}

 Test The Code:

Open Test Explorer window and you will see as below. To test the code click on the ‘Run All’ option in the Test Explorer windows. You will see new chrome browser instance launched and loaded www.donethedeal.com website and close the browser. You can add some wait in Test method in case if you want to make sure if it goes to TestMethod or not.

You can run that test in debug mode and you can put a breakpoint into your code and step through that. To run in debug mode you need to run test via Test Toolbar. Select the test in Test Explorer and Go to Test->Debug->Selected Test.

Test Code Implementation

Now we will work on the implementation of test Steps.

// Click on nexus phone link that will take you to the description page

To perform above step. You just need to click on the application that will eventually take you the details page of the Nexus phone. Since we have only two products on the Test application then it is easy to write.

driver.FindElement(By.PartialLinkText("Nexus")).Click();
var summary = driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > div.product_meta > span > span")).Text;

You just need to click on the application that will eventually take you the details page of the Nexus phone. Since we have only two products on the Test application then it is quick to execute. If you run that you will notice that product description page appeared and then closes the browser. We need to have some verification framework. For that, We can use Assert.

And code will look like this:

driver.FindElement(By.PartialLinkText("Nexus")).Click();
var sku = driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > div.product_meta > span > span")).Text;
Assert.AreEqual("10001", sku);

Assert call with is to verify items.

Later you can add following code to verify cart.

[TestMethod]
public void AddPhoneToCartAndVerifyInCart()
{

driver.FindElement(By.PartialLinkText("Nexus")).Click();
var sku = driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > div.product_meta > span > span")).Text;
Assert.AreEqual("10001", sku);
driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > form > button")).Click();
//Verify if item added to cart.
driver.FindElement(By.XPath("//*[@id='content']/div/div/div[2][contains(text(), 'was successfully added to your cart')]"));

//Clikc Go to cart\
driver.FindElement(By.CssSelector("#content > div > div > div.woocommerce-message > a")).Click();
var dd = driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[1]")).Text;

//Verify If one phone given the cart.
Assert.AreEqual("×", driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[1]")).Text);
Assert.AreEqual("1", driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[5]")).Text);
Assert.AreEqual("Proceed to Checkout", driver.FindElement(By.CssSelector("#content > div > div > div > form > table > tbody > tr:nth-child(2) > td > a")).Text);
}

Execute the test either in run mode and or debug mode and see the result. It will be pass. If its failing then try to give some pause wherever required

 

Note: Avoid using any hard wait in the script though.

 

In similar way you need to write another Test case where you just click on brush and verify the description and close the browser. And overall code will look like:

 

using System;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Support;
using ExcelReader;
namespace AddItemToShoppingCart
{
[TestClass]
public class VerifyItems
{
IWebDriver driver;
string url = "http://learnseleniumtesting.com/demo/";
[TestInitialize]
public void TestSetup()
{

driver = new ChromeDriver();
driver.Navigate().GoToUrl(url);
}
[TestCleanup]
public void Cleanup()
{
driver.Quit();
}

[TestMethod]
public void AddPhoneToCartAndVerifyInCart()
{

driver.FindElement(By.PartialLinkText("Nexus")).Click();
var sku = driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > div.product_meta > span > span")).Text;
Assert.AreEqual("10001", sku);
driver.FindElement(By.CssSelector("#product-18 > div.row > div.col-md-7 > div > form > button")).Click();
//Verify if item added to cart.
driver.FindElement(By.XPath("//*[@id='content']/div/div/div[2][contains(text(), 'was successfully added to your cart')]"));

//Clikc Go to cart\
driver.FindElement(By.CssSelector("#content > div > div > div.woocommerce-message > a")).Click();
var dd = driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[1]")).Text;

//Verify If one phone given the cart.
Assert.AreEqual("×", driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[1]")).Text);
Assert.AreEqual("1", driver.FindElement(By.XPath("//*[@id='content']/div/div/div/form/table/tbody/tr[1]/td[5]")).Text);
Assert.AreEqual("Proceed to Checkout", driver.FindElement(By.CssSelector("#content > div > div > div > form > table > tbody > tr:nth-child(2) > td > a")).Text);
}
[TestMethod]
public void VerifyBrushDescription()
{
driver.FindElement(By.PartialLinkText("Brush")).Click();
var description = driver.FindElement(By.CssSelector("#product-28 > div.row > div.col-md-7 > div > h1")).Text;
Assert.AreEqual("Makeup Brush", description);
}
}
}

Final Result

I am using C# and Visual Studio 2013 Express Edition. The code given in the video is different than the code given in this blog.

Please change the quality of video to HD so you can see the code clearly.

Hopefully, this video is helpful for the beginners who want to learn or use WebDriver with .NET framework
Please don’t forget to like/comment on video if you have any suggestion or you like this.

Sample Website: http://learnseleniumtesting.com/demo/