How to Select Calendar Values in Selenium with C# and Webtable

In this post, we will be talking about How to Select Calendar Values in Selenium with C# and Web table.

In our previous post we have already seen like working with basic web elements and dropdowns 

Tables are one of the primary design tools for HTML documents. Tables allow for greater control over page layout, allowing the creation of more visually interesting pages.

Tables are also used to set apart sections of documents, such as in sidebars, navigation bars, or framing images and their titles and captions. Tables have literally changed the look of the Web page. Originally, tables let people present data in a column format. Designers quickly figured out ways to improve the layout of their pages using tables.

Example of Webtable

Every web table contains data (text data) and child objects in specified cells.

We can handle web tables in two different ways. We will discuss them one by one

1. Iterate each cell until you get the value you want.
2. Use custom XPath. If you are new to XPath then you should check out this post where we discussed how to write Custom and Dynamic XPath in Selenium WebDriver

Iterating each cell is effective only if the table is having fewer cells.

Let’s see how to handle tables by Iterating each cell.

Example: How to Handle WebTable in Selenium with C#

1. Create a C# project.
2. Add Selenium WebDriver and ChromeDriver to the project.
3. Code Explanation
4. You can use my blog for calendar scenario 

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WebTable
{
class Program
{
private const string XpathToFind = "//table[@class='wikitable sortable jquery-tablesorter']/tbody/tr";

static void Main(string[] args)
{
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("https://en.wikipedia.org/wiki/EZTABLE");

driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);// wait for 10 seconds for page to load

// Trying to find table
IWebElement table= driver.FindElement(By.XPath("//table[@class='wikitable sortable jquery-tablesorter']"));

if (table.Displayed)
{
// converting webelement to list of webelement
List<IWebElement> tableContent = new List<IWebElement>(driver.FindElements(By.XPath(XpathToFind)));

// getting the count
int elementCount = tableContent.Count;
int i;
Console.WriteLine("Table count is " + elementCount);
for (i = 1; i <= elementCount; i++)
{
// fetching all td one by one
string tableElement = XpathToFind + "[" + i + "]/td";

// capturing text from webelement
string element = driver.FindElement(By.XPath(tableElement)).Text;
if (element.Equals("2016"))
{
break;
}
}
Console.WriteLine("2016 found at " + i);
}
else
{
Console.WriteLine("Table is not displayed");
}
driver.Close();
}
}
}

If the table is having more cells than iterating each cell will be less effective.

Let us see how to use custom XPath to find the element.

Example: Let us modify the above program.

1. Create a C# project.
2. Add Selenium WebDriver and ChromeDriver to the project.
3. Code Explanation.

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CustomXpath
{
    class Program
    {
        static void Main(string[] args)
        {
IWebDriver driver = new ChromeDriver();

driver.Navigate().GoToUrl("https://en.wikipedia.org/wiki/EZTABLE");

 driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10);

IWebElement table = driver.FindElement(By.XPath("//table[@class='wikitable sortable jquery-tablesorter']"));

if (table.Displayed)
 {
// Here we are writing xpath of 2016 directly which will be little faster
string customXpath = "//table[@class='wikitable sortable jquery-tablesorter']/tbody/child::tr/td[text()='2016']"; // custom xpath which gets to the element directly.
IWebElement element = driver.FindElement(By.XPath(customXpath));
if (element != null)
Console.WriteLine("Element found");
            }
driver.Close();
}
}
}

With the above two examples, you can clearly understand how this web table look like and how to handle them.

How to Select Calendar Values in Selenium with C#

Calendar dates are also stored as a table. Handling calendar is similar to handling webtables in selenium.

Let us see an example.

Example:

1. Create a C# project.
2. Add Selenium WebDriver and ChromeDriver to the project.
3. Code Explanation.

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Calendar
{
    class Program
    {
        static void Main(string[] args)
        {

            IWebDriver driver = new ChromeDriver(); // create a webdriver instance.

            driver.Navigate().GoToUrl("http://seleniumpractise.blogspot.com/2016/08/how-to-handle-calendar-in-selenium.html"); // launch the url.

            driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(10); // wait for 10 seconds for the page to load.

            driver.FindElement(By.XPath("//*[text()='Date: ']/input")).Click(); // find the calendar input field and click on it.

            List<IWebElement> tableContent = new List<IWebElement>(driver.FindElements(By.XPath("//table[@class='ui-datepicker-calendar']//td"))); // get all the dates.

            foreach(IWebElement ele in tableContent) // use foreach iterate each cell.
            {
                string date = ele.Text; // get the text of the element.

                if(date.Equals("20")) // check if the date is 20
                {
                    ele.Click(); // if date is 20, select it.
                    break;
                }
            }

            driver.Close(); // close the driver.
        }
    }

I hope this post must have usefull for you. If yes then please share with your friends and teammates.

See you in the next post.  Bye.