Selenium C# Tutorial: Locating Web elements using CSS selectors (Advanced)
Updated: Mar 5
Cascading Style Sheets (CSS) is a language used to describe HTML/XML elements (The style of the element and how it is represented on the screen). When using CSS, we can review the pattern–matching (Known as “Selectors”) rules defined for different DOM elements.
For more information about CSS:
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
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...).
Finding Element with absolute CSS path
We will use the complete path of the element referring to its hierarchy in the DOM (Same as XPath, any changes made in the element's structure hierarchy will cause failure to locate it using the CSS locator).
CSS Path:
CSS = "#comp-khbyvzuo1label";
Scenario:
Log in to my blog.
Approve the cookie banner,
Navigate the blog section.
Code:
namespace SeleniumC
{
class Program
{
static void Main(string[] args)
{
string CSS = "#comp-khbyvzuo1label";
string cookieApproval = "html body.device-windows div._2svEM._2f7c5._4Ck7e div.HzPhN div._1STS6 button.undefined.MWTAz._6WUOF";
IWebDriver firefoxDriver = new FirefoxDriver();
TEstPreperation(firefoxDriver, cookieApproval);
IWebElement CSSElement = firefoxDriver.FindElement(By.CssSelector(CSS));
CSSAbsolutePath(CSSElement); //CSS absolute path
// driver.Quit();
}
private static void TEstPreperation(IWebDriver webDriver ,string cookie)
{
webDriver.Navigate().GoToUrl("http://www.agilequalitymadeeasy.com/");
Thread.Sleep(3000);
webDriver.FindElement(By.CssSelector(cookie)).Click();
Thread.Sleep(3000);
}
private static void CSSAbsolutePath(IWebElement cssElement)
{
if (cssElement.Displayed)
{
cssElement.Click();
Console.WriteLine("Element is available");
}
else
{
Console.WriteLine("Element is NOT found");
}
}
Finding Element with relative CSS path
We will use the element's relative path instead of its whole hierarchy in the DOM.
CSS Path: "html body.device-windows div#SITE_CONTAINER div#main_MF div#site-root div#masterPage.mesh-layout header#SITE_HEADER_WRAPPER div#SITE_HEADER._11CDm div._2WCQx div._3sXYI div div section#comp-khbyvzcj div._3BQmz div#comp-khbyvzck._1HpZ_ div div wix-dropdown-menu#comp-khbyvzuo._13c26._2cbNh.hidden-during-prewarmup nav#comp-khbyvzuonavContainer.zmzdJ ul#comp-khbyvzuoitemsContainer._3ryjj li#comp-khbyvzuo1._3vxeZ._2TFvc a._25Cim div._3zfdd div p#comp-khbyvzuo1label._3YCIf";
Relative Path: "div p#comp-khbyvzuo1label._3YCIf";
Scenario:
Log in to my blog.
Approve the cookie banner,
Navigate the blog section.
Code:
class Program
{
static void Main(string[] args)
{
string CSS = "div p#comp-khbyvzuo1label._3YCIf";
string cookieApproval = "html body.device-windows div._2svEM._2f7c5._4Ck7e div.HzPhN div._1STS6 button.undefined.MWTAz._6WUOF";
IWebDriver firefoxDriver = new FirefoxDriver();
TEstPreperation(firefoxDriver, cookieApproval);
IWebElement CSSElement = firefoxDriver.FindElement(By.CssSelector(CSS));
CSSRealativePath(CSSElement); //CSS absolute path
// driver.Quit();
}
private static void TEstPreperation(IWebDriver webDriver ,string cookie)
{
webDriver.Navigate().GoToUrl("http://www.agilequalitymadeeasy.com/");
Thread.Sleep(3000);
webDriver.FindElement(By.CssSelector(cookie)).Click();
Thread.Sleep(3000);
}
private static void CSSRealativePath(IWebElement cssElement)
{
if (cssElement.Displayed)
{
cssElement.Click();
Console.WriteLine("Element is available");
}
else
{
Console.WriteLine("Element is NOT found");
}
}
Finding Element with CSS ID
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:
HTML Tag = <button>
Element ID = Approval
Result (Full): (By. cssSelector (“button#Approval”))
Scenario
log-in to Bing.
Add Text into the search field.
Element Details:
CSS By Element ID:
"input#sb_form_q"
Code:
class Program
{
static void Main(string[] args)
{
string CSS = "input#sb_form_q";
string cookieApproval = "html body.device-windows div._2svEM._2f7c5._4Ck7e div.HzPhN div._1STS6 button.undefined.MWTAz._6WUOF";
IWebDriver firefoxDriver = new FirefoxDriver();
TEstPreperation(firefoxDriver, cookieApproval);
IWebElement CSSElement = firefoxDriver.FindElement(By.CssSelector(CSS));
CSSByID(CSSElement); //CSS absolute path
// driver.Quit();
}
private static void TEstPreperation(IWebDriver webDriver ,string cookie)