VBA Selenium - Find Button to Click in Container that has multiple very similar entries

Question

Apologies Newbie so hope posting in correct format

I am trying to find and click a button. This is for a tee booking sheet where there is a seperate button (Text = Book) for each time available. I need to get to the Div Class 'controls' section and find within that a time (say 07:54) and if found click.

I have tried

obj.FindElementByXPath("*//div[@class,'Controls' contains(text(),'07:54')]").Click

obj.FindElementByPartialLinkText("07:54").Click

and various others which do not work and

obj.FindElementByXPath("//*//*[@id='booking-teesheet-container']/div/div[5]/div[2]/div[3]/div/a").Click

which works but does not enable me to search for a specific time As you can see I am not well versed in VBA Selenium.

Any assistance appreciated

<div class="tee available" data-hour-val="9" data-min-val="22" data-teetime="2021-03-30 09:22">
    <div class="time theme_bg">
        09:22
    </div>
    <div class="info">
        <div class="col-xs-12 col-sm-6" data-players-view-ctr="09:22">
            <div class="player player-free view" data-players-view="09:22"><span>P</span> <i class="fa fa-angle-double-down"></i> View Players</div>
        </div>
        <div class="players col-xs-12 col-sm-8 col-md-6" data-players="09:22">
            <div class="player player-free">
                <span>P1</span>

                <a data-teetime-selected="2021-03-30 09:22" href="/Members/BookingAdd?dateTime=2021-03-30T09%3A22&amp;courseId=7738&amp;startPoint=1&amp;crossOverStartPoint=0&amp;crossOverMinutes=0">
                    Available
                </a>
            </div>
            <div class="player player-free">
                <span>P2</span>

                <a data-teetime-selected="2021-03-30 09:22" href="/Members/BookingAdd?dateTime=2021-03-30T09%3A22&amp;courseId=7738&amp;startPoint=1&amp;crossOverStartPoint=0&amp;crossOverMinutes=0">
                    Available
                </a>
            </div>
            <div class="player player-free">
                <span>P3</span>

                <a data-teetime-selected="2021-03-30 09:22" href="/Members/BookingAdd?dateTime=2021-03-30T09%3A22&amp;courseId=7738&amp;startPoint=1&amp;crossOverStartPoint=0&amp;crossOverMinutes=0">
                    Available
                </a>
            </div>
            <div class="player player-free">
                <span>P4</span>

                <a data-teetime-selected="2021-03-30 09:22" href="/Members/BookingAdd?dateTime=2021-03-30T09%3A22&amp;courseId=7738&amp;startPoint=1&amp;crossOverStartPoint=0&amp;crossOverMinutes=0">
                    Available
                </a>
            </div>
        </div>

        <div class="col-xs-12 col-sm-6">
            <div class="controls">
                <a
                    data-book="1"
                    data-teetime-selected="2021-03-30 09:22"
                    href="/Members/BookingAdd?dateTime=2021-03-30T09%3A22&amp;courseId=7738&amp;startPoint=1&amp;crossOverStartPoint=0&amp;crossOverMinutes=0"
                    class="btn btn-primary theme_bg theme_border_primary"
                >
                    Book
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

You can use attribute= value selectors. Say you want to book a time (irrespective of date), you can use

FindElementByCss(".controls [data-teetime-selected*='09:22']").click

This looks for data-teetime-selected attribute with value 09:22 in.

If you want to specify date:

[data-teetime-selected*='2021-03-30 09:22']

To select for the player free links e.g.

[data-players='09:22'] .player-free

What I can't tell from the html is whether this attribute data-teetime-selected is dynamically added after performing some other step.