How to select this element in Javascript? - Chrome Extension

I'm new to javascript and I've been trying for an hour to select this from a web app:

<button type="button" class="zp-button zp_zUY3r zp_B5hnZ zp_rhXT_ zp_FVbJk finder-select-multiple-entities-button" fdprocessedid="jowqnd"><div class="zp_kxUTD" data-elem="button-label"><div class="zp_fwjCX" data-input="checkbox" data-cy-status="unchecked"></div></div><i class="zp-icon apollo-icon apollo-icon-caret-down-small zp_dZ0gM zp_j49HX zp_sGyhf"></i></button>

I've been trying to select it by the "zp_FVbJk" class.

const dropdownSelector = 'zp_FVbJk'
// Handles button and has to be the same in popup.js and content.js until I find a better solution
function sharedTempHandleButton() {
    console.log("sharedTempHandleButton() started.");

    let buttonToClick;

    buttonToClick = document.getElementsByClassName(dropdownSelector)[0];

    console.log(buttonToClick)

    if (buttonToClick) {
        console.log("Button found: ", buttonToClick);
        buttonToClick.click();
    } else {
        console.error('Button not found using the provided CSS selector');
    }
}

It returns buttonToClick as undefined.

I've tried:

• Changing selector to '.zp_FVbJk'
• Using queryselector()

I think getElementsByClassName to select the button by its class name. If that's not working, there might be a few reasons.

So, I suggest you use querySelector and hope my code using `querySelector``` might be helpful.

document.addEventListener('DOMContentLoaded', function() {
    let buttonToClick = document.querySelector('.zp_FVbJk');

    if (buttonToClick) {
        console.log("Button found: ", buttonToClick);
        buttonToClick.click();
    } else {
        console.error('Button not found using the provided CSS selector');
    }
});