Challenge: Setup a locator using XPath or CSS Selector for the Next Output cell in the Generator 6 row of the table
https://remarkablegames.org/button-clicker/
Comment below with your answer. I’ll be posting my own response next week.

This week, I’ve chosen something a little more challenging. The chosen website is a template for incremental games. There is a counter which increases in value depending on the generators currently enabled. There is a table where each row provides detailed about a different generator. For this task, create a locator using XPath or CSS Selector that can retrieve the next output text for generator 6.

At the end of this post, I’ve included some sample code which you can use to test your chosen locator. Instead of identifying a single element, the example I’ve provided will identify a list of matching elements. It then prints out the text value for each valid element to the console. For this challenge, you’ll need to update the XPath or CSS Selector string to only provide the text value of a single element.

ReadOnlyCollection<IWebElement> tableCells = Driver.FindElements(By.CssSelector("td"));
//ReadOnlyCollection<IWebElement> tableCells = Driver.FindElements(By.XPath("//td"));

foreach (IWebElement element in tableCells)
    Console.WriteLine(element.Text);

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

Response To Last Weeks Challenge

Last week, I asked you to create an XPath or CSS Selector for the Click Me button on the following website:
https://ministryoftesting.github.io/the-button/

Congratulations to David Haines, James Sheasby Thomas and Vivek for providing their own correct answers to the challenge.

Looking at the dev tools, there are 2 possible elements which could be used to identify the button. Some chose the element with ‘img’ tag and others chose the element with the ‘a’ tag. Since I never specified what I actually wanted to do with the button, either element is correct. Both elements could be used to click on the button. However, if you also wanted to get additional information about the button (like the button colour) then the ‘img’ element would be the better choice.

Here are a few options that could be used:

XPaths:

Xpaths use the following format: “//tagname[@attribute=’value’]”
The tag name for either of these elements is ‘img’ or ‘a’. If using the ID as an identifier, then the correct ID value for the tagname has to be used.

  • “//img[@id=’buttonImage’]”
  • “//a[@id=’theButton’]”

Alternatively, you could have used another attribute as an identifier.

  • “//img[@alt=’Click this button’]”
  • “//img[@class=’img-responsive center-block’]”

CSS Selectors:

Use the hashtag # to locate element based on the ID. Optionally, you could include the tagname before the hashtag.

  • “#buttonImage” or “img#buttonImage”
  • “#theButton” or “a#theButton”

If you wanted to identify the element using a different attribute, then the following CSS Selector could be used:

  • “[alt=’Click this button’]”

If you wanted to identify the element using the class, then you put a full stop . before the class value:

  • “.img-responsive center-block”

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://remarkablegames.org/button-clicker/");
            Driver.Manage().Window.Maximize();

            ReadOnlyCollection<IWebElement> tableCells = Driver.FindElements(By.CssSelector("td"));
            //ReadOnlyCollection<IWebElement> tableCells = Driver.FindElements(By.XPath("//td"));

            foreach (IWebElement element in tableCells)
                Console.WriteLine(element.Text);

            Driver.Quit();
        }
    }
}