Selenium WebDriver: Checking an element's attribute values (C#)

Developers are usually configuring various attributes of elements displayed on the web page as part of their design or at runtime to control the style or behavior of elements when they are displayed on the website.


"HTML attributes are special words used inside the opening tag to control the element's behavior. HTML attributes are a modifier of an HTML element type" - Wikipedia

When creating tests we sometimes need to verify that element attributes are set correctly. Using the getAttribute() method of the WebElement class, we can easily retrieve and verify an elements attribute.



How does it work?

By passing the name of the attribute to the getAttribute() method. it returns the value of the attribute back as a text. Let's see a small example, of getting specific attributes related to the "Google" search window.

The HTML attributes of this window are:

      /*
            <input class="gLFyf gsfi" 
            jsaction="paste:puy29d;" 
            maxlength="2048" 
            name="q" 
            type="text" 
            aria-autocomplete="both" 
            aria-haspopup="false" 
            autocapitalize="none" 
            autocomplete="off" 
            autocorrect="off" 
            autofocus="" 
            role="combobox" 
            spellcheck="false" 
            title="Search" 
            value="" 
            aria-label="Search"
            data-ved="0ahUKEwjTqOa2pOXxAhVSilwKHeKKA9oQ39UDCAQ">
            */ 

Code Example:

IWebDriver chromedriver = new ChromeDriver();
string siteToAccess = "https://www.google.com/";
chromedriver.Navigate().GoToUrl(siteToAccess);
                        
IWebElement test = chromedriver.FindElement(By.Name("q"));
Console.WriteLine(test.GetAttribute("type"));
Console.WriteLine(test.GetAttribute("role"));
Console.WriteLine(test.GetAttribute("name"));            
Console.WriteLine(test.GetAttribute("autocomplete"));
Console.WriteLine(test.GetAttribute("spellcheck"));

Checking an element's CSS values

Various styles are applied to elements displayed in a web application using CSS, so they will have the neat look and usability that customers are looking for. Similar to what we saw in the previous example, we can getCSSValue() method which returns the value of a specified style attribute.

Code Example:

IWebElement test = chromedriver.FindElement(By.Name("q"));
Console.WriteLine(test.GetCssValue("height"));
Console.WriteLine(test.GetCssValue("color"));


38 views0 comments