css-selectorshtmlunit

Trying to select the correct button using a css selector with HTMLUnit

I have the following snippet of HTML code:

<div class="LocationsIndex__paginationBar__YE2Xo">
    <div>
        <nav>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button">
                <div style="transform: rotate(180deg);">➞</div>
            </button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">1</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">2</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__active__EK2e1" type="button">3</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">4</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__disabled__FbUC6 Pagination__symbol__KHv6r" type="button">...</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw" type="button">79</button>
            <button class="Control__control__ijHLR Pagination__pageItem__NsQSw Pagination__symbol__KHv6r" type="button">
                <div class="">➞</div>
            </button>
        </nav>
    </div>
    <div class="LocationsIndex__paginationInfo__YbpCl">Showing 81 to 120 of 3121</div>
</div>

I am trying to capture the last button control within this group (it's a paginator) using the HtmlPage.querySelector() method shown in the following code. This method call always returns a null. I have tried several different ways of trying to get this information, but no luck. The last several characters of the 'class="Control__Control__xxxxx" class can be different, so I just want to find based on the start of the class value.

// do the pagination
HtmlButton button = page.querySelector("button[class^='Control__control']:nth-child(8) div");
page = button.click();

What am I doing wrong?

Solution

  • enter image description here To target the last button control, you can use the last-child pseudo-class to select the last button element within the nav

    page.querySelector("nav button[class^='Control__control']:last-child div");