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']"));

No comments:

Post a Comment

My Presentations