Challenge: Setup a locator using XPath or CSS Selector for the Click Me button on the following website https://ministryoftesting.github.io/the-button/

My response to this weeks challenge, and a new locator challenge, can be found in the following link: https://louisegibbstest.wordpress.com/2021/11/15/weekly-xpath-css-selector-challenge-15th-november-2021/

Locators are an essential part of setting up UI automated tests. Without locators, the test is unable to interact with the elements on the page. It could be argued that setting up locators is one of the most important skills required to develop a reliable and robust automated test.

I used to work at a place that sent out weekly locator challenges each week. It was a good opportunity to practice writing locators, especially for those with less involvement in the test automation and wanted the opportunity to practice their skills. In a similar style, I’ve decided to setup a weekly locator challenge. I will provide a website and an element on that website, and encourage you all to have a go at setting up a locator for that element.

I will be looking specifically at XPaths and CSS Selectors for this challenge.

For the first challenge, I’ve decided not to set up something too challenging. Go to the following website and create either a CSS Selector or XPath that can interact with the click-me button.

https://ministryoftesting.github.io/the-button/

At the end of this post, I’ve included some sample code which you can use to test your chosen locator. In this example, I used the ID to locate the button. For this challenge I want you to use an XPath or CSS Selector instead.

To do this, take the following line of code:

 
IWebElement button = Driver.FindElement(By.Id("buttonImage"));
 

Change the section where it says By.Id to either By.CssSelector or By.XPath. Your Css Selector or XPath goes between the bracket. The Css Selector or XPath must be a string, so don’t forget to add double quote marks.

The new line of code will look something like this:

 
IWebElement button = Driver.FindElement(By.XPath("Insert XPath Here"));
 
 
IWebElement button = Driver.FindElement(By.CssSelector("Insert CSS Selector Here"));
 

I’ve also provided some helpful resources that will help you learn more about XPaths and CSS Selectors and setup your locators. I’ll be posting a new challenge next week, plus providing my own response to the challenge.

Looking forward to seeing what locators people come up with. Feel free to message me if you need help.

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 System;
using System.Threading;

namespace PushButton
{
    public class Program
    {
        public static void Main(string[] args)
        {
            IWebDriver Driver = new ChromeDriver(Environment.CurrentDirectory);
            Driver.Navigate().GoToUrl("https://ministryoftesting.github.io/the-button/#");
            Driver.Manage().Window.Maximize();

            IWebElement button = Driver.FindElement(By.Id("buttonImage"));
            button.Click();

            //Added so there is a delay before the driver closes
            Thread.Sleep(5000);

            Driver.Quit();
        }
    }
}