locked
Find number of elements and their label in a AngularJS webpage using java script. RRS feed

  • Question

  • User-1911336846 posted

    I wrote a program using java script that takes source code of website and shows the list of GUI elements in the page.

    <script>
                                var $textarea = $('#TextArea1'), $submit = $('#Submit1');
                                $submit.click(function (e) {
                                    e.preventDefault();
                                    sourceCode = $textarea.val();
                                    var $searchObject = $('<div id="Searching"></div>');
                                    $searchObject.append($(sourceCode));
    
                table += "<tr bgcolor='#ff4d4d'><td align=center colspan='5'>Number of text boxes = " + $searchObject.find('[type=text]').length + "</td></tr>";
                                    $searchObject.find('[type=text]').each(function () {
                                        counter++;
    
                                        table += "<tr bgcolor='#ccccff'><td>" + counter + "</td><td>Name of textbox = " + $(this).attr("name") + "</td><td> Label = " + $(this).html() + "</td><td> ID =" + $(this).attr("id") + "</td></tr>";
    
    
                                    });
    
                                    table += "<tr bgcolor='#ff4d4d'><td align=center colspan='5'>Number of Submit Buttons = " + $searchObject.find('[type=submit]').length + "</td></tr>";
                                    $searchObject.find('[type=submit]').each(function () {
                                        counter++;
                                        table += "<tr bgcolor='#6666ff'><td>" + counter + "</td><td>Name of Submit button = " + $(this).attr("name") + "</td><td> ID =" + $(this).attr("id") + "</td><td> ID =" + $(this).attr("id") + "</td></tr>";
    
    
                                    });
    </script>

    The above program worked perfectly for most of the websites, but I had trouble when I gave the source code of an Angular website as its input. I found that most of the elements displayed in the AngularJS website was not shown in the source code of that website. I don't have good knowledge in AngularJS. Is there anyway I can get the number of elements(text box, check box etc...) and their ID's in an Angular website?

    Thanks in advance.

     

    Friday, May 6, 2016 6:00 AM

Answers

  • User527778624 posted

    Hi,

    You have to make angularJS render.

    Possibly use an iframe, load the angularjs webpage into it, after load complete you may count the elements in iframe.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 6, 2016 11:50 AM
  • User475983607 posted

    AngularJs binds and renders HTML on the client not the server.  You're application is grabbing the raw page but not the binding scripts (controllers) which are probably separate JS files.  That's why an iFrame was suggest above.  An iFrame will resolve the referenced scripts which will in turn render the HTML you're looking for.

    You might want to spend a little time with AjgularJs so you know how it works.  That should give you a better idea of what you need to do.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 9, 2016 12:55 PM

All replies

  • User527778624 posted

    Hi,

    I gave the source code of an Angular website as its input. I found that most of the elements displayed in the AngularJS website was not shown in the source code of that website.

    AngularJS webpage actually is a template with ng-binds.

    So what you see is only a template not the actual html page.

    Number of elements to be rendered is based on angularJS model which is nothing but javascript object.

    I think, you can't get your requirement with angular template.

    Friday, May 6, 2016 6:26 AM
  • User-1911336846 posted

    So does that mean there is no script / any other methods available to fetch the number of elements on the AngularJS page? 

    Friday, May 6, 2016 11:04 AM
  • User527778624 posted

    Hi,

    You have to make angularJS render.

    Possibly use an iframe, load the angularjs webpage into it, after load complete you may count the elements in iframe.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, May 6, 2016 11:50 AM
  • User61956409 posted

    Hi Phoenix.1993,

    You could try to select element and check the html markup of element via F12 developer tools instead of viewing source in browser.

    <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
        <ul>
            <li ng-repeat="x in names">{{ x }}
            </li>
        </ul>
    </div>
    

    View Source

    Select elements in F12 developer tools

    Then you could access elements by actual client id or class.

    Best Regards,

    Fei Han

    Monday, May 9, 2016 6:48 AM
  • User-1911336846 posted

    Hi Fei Han,

    I know to get client id or class using developer option. But my application's main feature is that it takes the source code of a website (automatically) when the web address is entered automatically and then it lists out the names of all GUI elements , their ID and name as well . Its working for most of the websites except the ones built using AngularJS. This is because all the elements on an AngularJS webpage is not shown in the source code. My app scans the Source code to fetch the details.  I need to find a way to make the application automatically fetch the details of AngularJS websites as well.

    Thank You.

    Monday, May 9, 2016 11:24 AM
  • User475983607 posted

    AngularJs binds and renders HTML on the client not the server.  You're application is grabbing the raw page but not the binding scripts (controllers) which are probably separate JS files.  That's why an iFrame was suggest above.  An iFrame will resolve the referenced scripts which will in turn render the HTML you're looking for.

    You might want to spend a little time with AjgularJs so you know how it works.  That should give you a better idea of what you need to do.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 9, 2016 12:55 PM
  • User-1911336846 posted

    Ok thank you for the explanation. I will give it a try and let you know the result soon....  Thanks again.

    Tuesday, May 10, 2016 5:26 AM