Challenge: Setup a locator using Xpath or CSS Selector that can be used to identify the 2nd item in the On This Day list on Wikipedia
Comment below with your answer. I’ll be posting my own response next week.

The Wikipedia home page includes a series of daily featured articles, facts and events that happened on this day. These will change daily. For this challenge, write a locator that can identify the 2nd bullet point that appears in the ‘on this day’ section.

Response To Last Weeks Challenge

Last week, I asked you to create an XPath or CSS Selector that could be used to retrieve the Next Output text for generator 6 on the following website:
remarkablegames.org/button-clicker/

Congratulations to Emile Zwiggelaar and Badar Munir for providing their own correct answers to the challenge.

Since there were already several ‘Next Output’ elements on the page, we needed the locator to identify the information for generator 6 and then identify the next output text for that particular generator.

Here are a few options that could be used:

XPaths:

"//tr[@id='generator6']/td[@class='output-next']"

We first need to identify the generator 6 element, this is done by searching for a tr element with the id ‘generator6’. We then use a forward slash symbol (/) to indicate that we’re looking for an immediate child element of generator 6 with a class name of ‘output-next’.

CSS Selectors:

"#generator6 .output-next" 

A hashtag (#) is used to identify an element using the ID. So #generator6 will identify the row for generator 6.

A fullstop (.) is used to identify an element using the classname. Including .output-next after the locator for generator 6 means that a child element of generator 6 with a classname of ‘output-next’ will be identified.

Other Examples

Emile Zwiggelaar came up with some interesting alternative solutions. The first one included an xpath within an xpath (something which I’ve never thought of doing before – really good to know that this is possible), opting to locate the tr element which has a child element containing a button with the text generator 6.

"//tr[td/button[text()='Generator 6']]/td[@class='output-next']"

Another solution identified the generator 6 button, and then identified the parent of that element before using this to identify the output text. Emile did a great job using alternative functions available when constructing XPaths such as parent and following sibling.

"//button[text()='Generator 6']/parent::td//following-sibling::td[@class='output-next']"

Badar Munir also produced some alternative ideas. As well as including an XPath similar to my own, he also used the last() function to identify the last td element for generator 6. This would produce the next output text as this is the last element.

"//tr[@id='generator6']//td[last()]"

Another option that Badar produced was to simply pick the 7th td element with the class ‘output-next’.

"(//td[@class='output-next'])[7]"

If I can, I often choose to avoid using index numbers or last element functions in xpaths as the order of the elements could easily change in the future. However, both Badar and Emile brilliantly demonstrated how there can often be multiple options available for XPaths. Sometimes, clear and unique IDs are not available. This gives us no option but to be a little more creative with our XPaths to get the tests to work.

Useful Resources

Two ‘games’ that will help you learn how to write XPaths and CSS Selectors.

Cheat Sheets

Sample Code

For this code to work, you’ll need to install the following NuGet packages:

  • Selenium.WebDriver
  • Selenium.WebDriver.ChromeDriver
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Interactions;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading;

namespace LocatorChallenge
{
    public class Program
    {
        public static void Main(string[] args)
        {
            IWebDriver Driver = new ChromeDriver(Environment.CurrentDirectory);
            Driver.Navigate().GoToUrl("https://en.wikipedia.org/wiki/Main_Page");
            Driver.Manage().Window.Maximize();

            IWebElement SecondOnThisDayListItem = Driver.FindElement(By.CssSelector(""));
            //IWebElement SecondOnThisDayListItem = Driver.FindElement(By.XPath(""));
            Console.WriteLine(SecondOnThisDayListItem.Text);
        }
    }
}