Wednesday, March 22, 2017

Selenium WebDriver - Locating Web elements using CSS selectors


Cascading Style Sheets (CSS) is a language used for describing the semantics of the elements related to a document written in an HTML or XML syntax (The style of the element and how it represented on the screen).

When using CSS, we can review the pattern –matching (Known as “Selectors”) rules that were defined for different elements in the DOM.

For more information about CSS:

Selenium WebDriver can use the structure and identifiers of the CSS syntax to locate elements in DOM, this strategy is superior compared to XPath (More reliable and will work faster...).

תוצאת תמונה עבור ‪CSS‬‏

Finding Elements with absolute path

We will use the complete path of the element referring to its hierarchy in the DOM (Same as XPath, any changes that are made in the structure hierarchy of the element will cause failure to locate it using the CSS locator).

Code Example

public void CSSAbsolutePath()
IWebDriver Firefox = new FirefoxDriver();
Assert.AreEqual("David Tzemach's Blog", Firefox.FindElement(By.CssSelector("html.v2 body.variant………………………div#header.header.section div#Header1.widget.Header div#header-inner div.titlewrapper h1.title")).Text);

Finding Elements with relative path

The locator goes directly to the element instead of parsing from the root element. So if the absolute path is defined as: "HTML.v2 body.variant………………………div#header.header.section…div#header-inner div.titlewrapper h1.title"; the relative path will be  "h1.title"

Code Example
public void CSSRelativePath()
IWebDriver Firefox = new FirefoxDriver();
Assert.AreEqual("David Tzemach's Blog", Firefox.FindElement(By.CssSelector("h1.title")).Text);

Finding Elements using ID selector

We can locate elements using the ID that was assigned to them, the information that we need is the 
HTML tag and the element ID (# should set in the middle), Example:

 = <button>HTML Tag
 = ApprovalElement ID
Result (Full): (By. cssSelector (“button#Approval”));

Code Example

public void CSSIDFull()
IWebElement ButtonID;
IWebDriver Firefox = new FirefoxDriver();
ButtonID = Firefox.FindElement(By.CssSelector("input#gsc-i-id1"));

Result (Shortcut): 
(By. cssSelector (“#Approval”));

When using the shortcut strategy, you ignore the HTML tag, therefore there may some additional elements that corresponding to the element ID which resolves the retrieval of an incorrect element.

Finding Elements using the CSS class selector
The CSS selector allows us to search for elements using their class attribute, all we need to do is to specify the HTML tag, insert a dot and add the class attribute.

Code Example
public void CSSClassSelector()
IWebElement Title;
IWebDriver Firefox = new FirefoxDriver();
Title = Firefox.FindElement(By.CssSelector("h1.title"));


Finding Elements using the attribute value

CSS enable us to locate elements using the value of a specific attribute.



<input type="text" name="email" style="width:140px">

public void CSSattribute()
IWebElement Search;
IWebDriver Firefox = new FirefoxDriver();

//Using Single Attribute

//Using Multiple Attributes

Finding elements based on partial attribute value

This previous strategy is great but it will not allow us to use it on dynamic elements that changed continually, to overcome this issue CSS provides another strategy to locate elements bases on matching only partial attribute value

<input type="text" placeholder="Email address..." name="email" class="follow-by-email-address">

//Partial matching based on CONTAINS value

//Partial matching based on the START of the attribute value

//Partial matching based on the END of the attribute value

Finding Elements using the attributes name/type

Similar to the Attribute value strategy, we can perform the same search on the attribute name (ignoring the attribute value). This strategy is useful if we need to locate multiple elements that have the same attribute name.

//Locate all elements from type input containing the 'type 'attribute

//Locate all elements from type input that does not containing the 'type 'attribute

Locating elements using text (CSS)

Same as XPath, CSS provide the same strategy where we can find elements using their text;

WebElement = Firefox.FindElement(By.CssSelector("//a:contains('Quality Assurance')"));

For Firefox:
WebElement = Firefox.FindElement(By.CssSelector("//a[textContent='Quality Assurance']"));

Tuesday, March 21, 2017

Selenium WebDriver – Taking screenshot for a specific element (C#)

This code will demonstrate how to take a screenshot of a specific element while ignoring the rest of the browser elements.

תוצאת תמונה עבור ‪selenium webdriver screenshot‬‏

public void PrinSpecificElement ()
IWebElement ElementToCapture;
IWebDriver FirefoxInstance = new FirefoxDriver ();

//Select a specific element from my Blog (The Main Title in this case)
ElementToCapture = FirefoxInstance.FindElement(By.ClassName("titlewrapper"));

//Get the element Size
int The_Element_Width = ElementToCapture.Size.Width;
int The_Element_Height = ElementToCapture.Size.Height;

//Get the Element location Via X/Y coordinates
int The_Element_Location_X = ElementToCapture.Location.X;
int The_Element_Location_Y = ElementToCapture.Location.Y;

//Creating the Rectangle that we going to use to extract the element
Rectangle Test = new Rectangle (The_Element_Location_X, The_Element_Location_Y, The_Element_Width, The_Element_Height);

//Take Screenshot and save it on TMP file
((ITakesScreenshot)FirefoxInstance).GetScreenshot().SaveAsFile(@"c:\TMP.jpeg", ImageFormat.Jpeg);

//import The File that we save earlier
Bitmap ImportFile = new Bitmap(@"c:\TMP.jpeg");

//Clone and extract the requested Element (Based on our Rectangle)
Bitmap CloneFile = (Bitmap)ImportFile.Clone(Test, ImportFile.PixelFormat);

//Save The Extract Element

//Dispose the TMP file that we don't need anymore

//Delete the TMP file


Saturday, March 18, 2017

Selenium WebDriver – Working with windows services and processes (C#)


Sometimes, we will need to validate the current state of a system service/process, prior during and after a test execution. the following paragraphs will provide the basic set of tools to accomplish these tasks.

To use the system services, you first need to add the "System.ServiceProcess" as a reference and the "System.Diagnostics" namespace.

תוצאת תמונה עבור ‪selenium webdriver‬‏

Getting the basic information about a service

static void Main(string[] args)
//Define the service that we want to use
ServiceController sc = new ServiceController("Spooler");

//Getting the service status
string servicestatus = sc.Status.ToString();

//Getting the service name
string servicename = sc.ServiceName;

//Getting the service Display Name
string servicedisplayname = sc.DisplayName;

Getting the basic information about a process

//Selecting the process by ID
Process Process = Process.GetProcessById(94204);

//Get the process name
string processname = Process.ProcessName;

How to change the service status

In the following code snippet, I will demonstrate how to "Start" and "Stop" a specific service

static void Main(string[] args)
//Define the service that we want to use
ServiceController Service = new ServiceController("Spooler");

//Define a Time Span that we will use to validate the service status
TimeSpan Timer = TimeSpan.FromMilliseconds(30);

//Start a Service

//Stop a Service
Service.WaitForStatus(ServiceControllerStatus.Stopped, Timer);

How to kill a process execution

For this purposes, we will use the "Kill" command.

//Selecting the process by ID
Process Process = Process.GetProcessById(94204);

//Kill the process

My Presentations