What’s the most imaginative way you could click this button? – 30 Days of Tools, Day 21

Welcome to Day 21 of the 30 Days of Tools challenge. There’s a button, how you gonna click it?


What’s the most imaginative way you could click this button?

  1. Head to https://ministryoftesting.github.io/the-button/
  2. Click the button (Sound on is recommended)
  • What tools would you use to learn how the button works?
  • What tools would you use to click the button?

Feel free to reply to this post and share wherever you like, on the MoT Slack, LinkedIn, Twitter using #30DaysOfTools, Racket, your blog, with your team and any place you feel might inspire yourself and others to do the same. Let’s learn from each other throughout October. Visit the 30 Days of Tools page and select the “Subscribe to Topic” button to receive each daily challenge direct to your inbox.


:point_right: Have you seen the amazing schedule and registered for Test.bash();?

It’s on October 28th, 10am-10pm UK time. Available with a Pro Subscription or you can purchase a ticket.

3 Likes

For an accessibility test, I would be interesting in a tool with the following features:

  • when my mouse pointer is on the picture, the tool compares the alternative text with the look of the button. It contains the colour, information about the text like fontsize and location, etc.
  • when I press button, the tool will do another comparison of the alternative text with the look of the button.
  • Next to this, the tool will compare the sound of the button with the audio description of the button.
  • when the button is ub a pressed down position, the tool will compare the new sound of the button with the audio description of the button.
  • when the button pops up, the tool will do another comparison of the alternative text with the look of the button.
  • Next to this, the tool will compare the sound of the button with the audio description of the button.

Bonus point: when the tool can determine whether the audio description is suited for people from different cultures.

2 Likes

First of I try a few different click (basically just to explore the mouse-events) which results in couple of sounds variations, after that I checked the Developer Tools, to see more details about it. Seems like somebody who likes jQuery made this :smiley:

2 Likes
  • What tools would you use to learn how the button works?
    – Inspected the source code, which shows what the script is doing
    – Manually attempted interacting with the button

  • What tools could you use to click the button?
    – I’ve clicked it by doing document.getElementById('theButton').click() on the browser console
    – played around a bit creating a snippet to force sequential clicks, etc…

2 Likes

I opened Developer Tools and saw the GET calls passing by so I copied the horn.wav request and went to:

I opened an auto-clicker and set the click timer on 3.5 seconds and now we have a “Horn-y” party here at home! :stuck_out_tongue:
[/quote]

1 Like

It turns out there is a website called click that button, so I used this for the challenge. It contains a button that you click .

I first clicked the button with the mouse, and I saw there was a counter which showed how many times I’d clicked the button.

I decided that this wasn’t particular imaginative, so i wrote an automated test that will click the button for me. I used the dev tools to find out what I could about the button and then wrote a test.

    public void pressButtonOnce()
    {
        Driver = new ChromeDriver(Environment.CurrentDirectory);
        Driver.Navigate().GoToUrl("https://www.clickthatbutton.com/");
        Driver.Manage().Window.Maximize();
        IWebElement redButton = Driver.FindElement(By.Id("submit"));
        IWebElement clickCounter = Driver.FindElement(By.Id("clicks-user-number"));

        redButton.Click();
        Assert.Equal(1, Convert.ToInt32(clickCounter.Text));
    }

I then decided running the test just to click the button rather tedious so I expanded the test so I could click the button multiple times:

    public void pressButtonLotsOfTimes(int numberOfClicks)
    {
        Driver = new ChromeDriver(Environment.CurrentDirectory);
        Driver.Navigate().GoToUrl("https://www.clickthatbutton.com/");
        Driver.Manage().Window.Maximize();
        IWebElement redButton = Driver.FindElement(By.Id("submit"));
        IWebElement clickCounter = Driver.FindElement(By.Id("clicks-user-number"));

        for (int i = 0; i < numberOfClicks; i++)
            redButton.Click();

        Assert.Equal(numberOfClicks, Convert.ToInt32(clickCounter.Text));
    }

I then decided that this clearly wasn’t imaginative, so I decided to simulate throwing a ball at the button. Making it so I could set the accuracy rating of the thrower, and seeing how many times I successfully clicked the button.

    public void ThrowBallAtButton(int accuracy, int numberOfClicks)
    {
        Driver = new ChromeDriver(Environment.CurrentDirectory);
        Driver.Navigate().GoToUrl("https://www.clickthatbutton.com/");
        Driver.Manage().Window.Maximize();
        IWebElement redButton = Driver.FindElement(By.Id("submit"));
        IWebElement clickCounter = Driver.FindElement(By.Id("clicks-user-number"));

        //Higher the number, more chance of the button being pressed

        for (int i = 0; i < numberOfClicks; i++)
        {
            Thread.Sleep(500);
            if(ThrowBallAtButton(accuracy))
                redButton.Click();
        }

        Assert.True(Convert.ToInt32(clickCounter.Text) > 0);
    }

    public bool ThrowBallAtButton(int accuracy)
    {
        Random r = new Random();

        if (r.Next(accuracy).Equals(1))
            return false;
        else
            return true;
    }

https://www.clickthatbutton.com/

4 Likes

what auto-clicker did you use?

Just one that I googled.
I suppose any will do. :slight_smile:

A zero code solution.
Took about an hour to assemble, clicks the button once per hour if you have the patience.

Elaborate power supply arrangement only because I don’t have spare kettle leads, also is a bit buggy still, but nothing a flux capacitor won’t fix.

/edit: Oh, did I mention, this one will work with literally any desktop browser OS and is “zero install” ™. Unless of course you have a mac with no USB ports. I’ll see myself out now.

4 Likes

So I was watching the discussion that the @friendlytester and @mwinteringham were having about todays challenge. For those who haven’t seen it, I was severely reprimanded for not completing the challenge using the button that they created.

I do apologize, I didn’t read the days task correctly and chose to click the button that someone else created (which didn’t even include a sound when clicked, clearly an inferior button).

Anyway, I adapted the code I wrote so it would click the correct and superior button.

I was able to include some asserts in there to check that the colour of the button was correct before and after the button was clicked. However, I’m not sure its possible to automate a check to confirm that the sound is produced (evidenced only in the recording of the test being run).

    public void ClickCorrectButton()
    {
        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"));

        Assert.Contains("green", button.GetAttribute("src"));
        button.Click();
        Assert.Contains("red", button.GetAttribute("src"));
        Thread.Sleep(4000);
        Assert.Contains("green", button.GetAttribute("src"));
        Thread.Sleep(6000);
    }
2 Likes
    Assert.Contains("red", button.GetAttribute("src"));
    Thread.Sleep(5000);

those 2 lines would not pass code review in my experience of the framework, I’m not remotely familiar with java, nor the assert lib, so I hope I’m wrong. I’m certainly not implying my zero-code solution is void of timing issues especially either, at all.

Assert is used in C# automated tests. It returns pass or fail depending on if the condition is met. In this case, it is checking if the colour is red or green.

  • The test first checks the colour is green.
  • Then clicks the button.
  • It then checks the colour is red.
  • The button doesn’t immediately turn green again, this takes about 4 seconds, so this is why the sleep is needed.
  • After 4 seconds it checks the button has changed back to green.
  • The reason for the further 6 second sleep is that I didn’t want the program to end before the sound effect was played, made a better recording of the button click.
2 Likes
  • What tools would you use to learn how the button works?

Using DevTools, I right clicked the button to see the markup for it. I looked whether it had a unique Id that I could use to interact with it. I also looked at it’s other element attributes to see how I might interact with the element.

  • What tools would you use to click the button?
  1. My hand/mouse and click the button!
  2. Open DevTools, Click on the console and then click on the button:
    document.getElementById(“buttonImage”).click();
  3. Using voice control (built in to Mac) **
    See video :slight_smile: https://www.youtube.com/watch?v=JIZ_x9f2qRo

** I created a custom command to open the MoT URL “Ministry of testing”. The button image had an alt attribute called ‘Click this button’ so I could use voice controls built-in click method and say “Click Click this button”

1 Like

LOL C#, Java, I even have semicolons in some of my Python code.

This one wins it for me ^^ Nice one @vivrichards

1 Like

Richard and I had some fun using Chrome Extensions to click the button:

3 Likes

image

3 Likes

Since you guys have already did so many things I’m going to think out of the box.

  • I think about an amazing “tool” which is communication “Hey @simon_tomes can you tell me more about the button and how it works? Please”.
  • I used the keyboard to click the button “tab” “enter”.
3 Likes

Chrome dev tools all the way. Checkout the console and the DOM. I noticed that it is a script right in the page, which allows me to know a lot about it

I mean, the simplest would be to move my mouse cursor over the button and click it.

I could also ask my kids to NOT click the button, and then they would do it anyways…

If we are automating the browser, I should be able to use any web driving tool like selenium or playwright to click the unique id of the button.

2 Likes

@lgibbs blog post inspired me to take a stab at clicking the button and waiting with Playwright - Waiting vs. Sleeping – Stop wasting time – Louise Gibbs – Software Tester

My work is here: GitHub - BMayhew/MOT-Button-automation

Playwright is pretty freaking cool :slight_smile: using their online interface (you can’t hear the sounds, but you can run the code and see the screenshots that get taken).

https://try.playwright.tech/?l=javascript&s=1jg7st4

2 Likes