querySelector returns blank node in HTML DOM

Question

I have a HTML document with following tags with multiple occurance

<div _ngcontent-mjy-c67="" uipath_custom_id="13">
    <div _ngcontent-mjy-c67="" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" uipath_custom_id="12">
        <button _ngcontent-mjy-c67="" role="button" data-toggle="tooltip" data-placement="top" class="btn btn-default flag-item" title data-original-title="Allowed to log into the Main Tools." uipath_custom_id="11">
            <span _ngcontent-mjy-c67="" class="glyphicon glyphicon-ok">
                ::before::
            </span>
            <!---->
            "Admin" 
        </button>
        <!---->
    </div>
    <!---->
</div>

There are total 112 buttons present in the document with

class="btn btn-default flag-item"

I want to select a particular button with

data-original-title="Allowed to log into the Main Tools."

using javascript and click the button.

I have tried using querySelectorAll but couldn't find a solution to do it.

 document.querySelectorAll('button.btn.btn-default.flag-item')

The above code returns all the 112 elements but how to use selector to select only button with

data-original-title="Allowed to log into the Main Tools."

attribute?

Also I have tried using

document.getElementsByClassName('btn btn-default flag-item')

which also returns 112 elements but can not proceed further using querySelectorAll on that.

Note: I need to call this script from UiPath, so one-liner script is much appreciated.

Using the copy JS Path in Chrome I found

document.querySelector("body > app-root > app-shell > app-dashboard > div > div.dashboard-widgets > div.app-privileges-widget.col-md-6.widget-new-line > app-widget-container > div > div.collapse.in > div > app-privileges-widget > app-privileges-grid > div > div:nth-child(2) > div:nth-child(3) > div > button").click()

and it works perfectly, but I don't know whether this path is always correct as the page I'm trying to automate is a dynamic page and elements gets created dynamically. So if this path works for a certain user, may be this path will not be valid for other users.

Please help.

Answer 1

By using the attribute selector:

console.dir(document.querySelector('[data-original-title="Allowed to log into the Main Tools."]'))

<div _ngcontent-mjy-c67="" uipath_custom_id="13">
    <div _ngcontent-mjy-c67="" class="col-xs-12 col-sm-6 col-md-4 col-lg-3" uipath_custom_id="12">
        <button _ngcontent-mjy-c67="" role="button" data-toggle="tooltip" data-placement="top" class="btn btn-default flag-item" title data-original-title="Allowed to log into the Main Tools." uipath_custom_id="11">
            <span _ngcontent-mjy-c67="" class="glyphicon glyphicon-ok">
                ::before::
            </span>
            <!---->
            "Admin" 
        </button>
        <!---->
    </div>
    <!---->
</div>