• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

150
Views
querySelector returns blank node in HTML DOM

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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error