Saturday, March 25, 2017

Selenium WebDriver – Using the Text Field and Button elements (C#)

תמונה קשורהI think that you can agree with me that these two elements are a mandatory part of any software that you will need to test; the next code examples will demonstrate how to use them.

Definitions:

Text box /Field:  is a web element that enables the user to insert/Remove text.
Button: is a controller that allows the user to trigger a new event.


List of available commands 


Algorithm:

  1. Log in to Yahoo.
  2. Validate both the Title and URL (using the Assert function).
  3. Enter Text to the search field and remove it (SendKeys () and Clear ()).
  4. Enter text www.machtested.com and use the "Submit" function.
  5. Select the first link and click on it using the click ().
  6. Quit.

Code:

[TestMethod]
public void TextFieldAndButtonExample ()
{
IWebElement TempElement;
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("https://www.yahoo.com/");
Assert.AreEqual("Yahoo", Firefox.Title);
Assert.AreEqual("https://www.yahoo.com/", Firefox.Url);
TempElement = Firefox.FindElement(By.Id("uh-search-box"));
TempElement.SendKeys("Clear text example");
TempElement.Clear();
TempElement.SendKeys("http://www.machtested.com/");
TempElement.Submit();
Firefox.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(30));
Firefox.FindElement(By.XPath("//a[contains(@href,'RU=http%3a%2f%2fwww.machtested.com%2f/RK')]")).Click();
Firefox.Quit();
}




Wednesday, March 22, 2017

Selenium WebDriver - Locating Web elements using CSS selectors

Overview

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

[TestMethod]
public void CSSAbsolutePath()
{
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com/");
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
[TestMethod]
public void CSSRelativePath()
{
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com/");
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

[TestMethod]
public void CSSIDFull()
{
IWebElement ButtonID;
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com/");
ButtonID = Firefox.FindElement(By.CssSelector("input#gsc-i-id1"));
ButtonID.SendKeys("David");}

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

Note!
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
[TestMethod]
public void CSSClassSelector()
{
IWebElement Title;
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com/");
Title = Firefox.FindElement(By.CssSelector("h1.title"));
}

Shortcut: 



Finding Elements using the attribute value

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

Examples:

HTML:

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

[TestMethod]
public void CSSattribute()
{
IWebElement Search;
IWebDriver Firefox = new FirefoxDriver();
Firefox.Navigate().GoToUrl("http://www.machtested.com/");

//Using Single Attribute
Firefox.FindElement(By.CssSelector("input[name='email']")).SendKeys("Text");

//Using Multiple Attributes
Firefox.FindElement(By.CssSelector("input[name='email'][type='text']")).Clear();
}

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

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

Code
//Partial matching based on CONTAINS value
Firefox.FindElements(By.CssSelector("input[class*='by-email']"));

//Partial matching based on the START of the attribute value
Firefox.FindElements(By.CssSelector("input[class^='follow']"));

//Partial matching based on the END of the attribute value
Firefox.FindElements(By.CssSelector("input[class$='address']"));

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.

Code
//Locate all elements from type input containing the 'type 'attribute
Firefox.FindElements(By.CssSelector("input[type]"));

//Locate all elements from type input that does not containing the 'type 'attribute
Firefox.FindElements(By.CssSelector("input:not([type])"));


Locating elements using text (CSS)

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

Example:
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‬‏

Code:
[TestMethod]
public void PrinSpecificElement ()
{
IWebElement ElementToCapture;
IWebDriver FirefoxInstance = new FirefoxDriver ();
FirefoxInstance.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(60));
FirefoxInstance.Navigate().GoToUrl("http://www.machtested.com");
FirefoxInstance.Manage().Window.Maximize();

//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
CloneFile.Save(@"c:\SpecificElementAfter.jpeg");

//Dispose the TMP file that we don't need anymore
ImportFile.Dispose();

//Delete the TMP file
File.Delete(@"c:\TMP.jpeg");

}

My Presentations