CODEWITHSUNDEEP
htmltestingextjshtml-components
Anand Maheswar
Anand Maheswar

Reputation: 73

How to find attribute values of components in an HTML page other than inspecting it

I've been working on Sencha test and I am in a situation to find all the attribute values like IDs, NAMEs, etc to add those in my scripts, to represent the component. So what I am doing for that is, go to web page -> right click component -> Inspect element -> and then get enough component attributes by referring to the HTML code. Is there any way to find attribute values of components in an HTML page other than inspecting it ??? Please advice..

Upvotes: 0

Views: 1763

Answers (4)

Alexander
Alexander

Reputation: 20224

To get Attribute Values of component elements programmatically:

First, get the component. There are various ways, e.g.:

  • var component = Ext.getCmp(id) gets you the component with a certain id.
  • var component = Ext.ComponentQuery.query(xtype) gets you an array of all components of a certain xtype

Second, on that component, call getEl() or any other element selector, e.g.:

  • var el = component.getEl()
  • var el = grid.getView().getEl()
  • var el = formfield.inputEl

Third, on the el, call getAttributes:

var attributes = el.getAttributes()

attributes will now contain an object like this:

class:"x-grid-view x-grid-with-col-lines x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable"
data-componentid:"tableview-1325"
id:"tableview-1325"
role:"rowgroup"
style:"margin: 0px; overflow: auto; width: 317px; height: 664px;"
tabindex:"0"

Upvotes: 1

Gilsha
Gilsha

Reputation: 14591

Go to the browser console and execute the below script to collect the list of attributes of each element. 

var parentEl = document.getElementById("container");
getElementsAndAttributes(parentEl);

function getElementsAndAttributes(container) {
  var all = container.getElementsByTagName("*");
  for (var i = 0, max = all.length; i < max; i++) {
    console.log(all[i].tagName);
    var attrs = all[i].attributes;
    var keys = Object.keys(attrs);
    for (var j = 0; j < keys.length; j++) {
      var attr = attrs[keys[j]];
      console.log(attr.name + " -> " + attr.value);
    }
  }
}
<body>
  <div id="container">
    <span class="title" style="color:GREEN;">Phineas</span>
    <img src="https://cdn.pastemagazine.com/www/blogs/lists/2010/05/12/phineas.jpg" width="104" height="142">
  </div>
</body>

Upvotes: 0

David R
David R

Reputation: 15647

Try the App Inspector for Sencha chrome extension, which will help you to debug ExtJS and Sencha Touch applications much easier.

It also helps you to inspect your component tree, data stores, events, and layouts.

You can install it from the below URL,

App Inspector For Sencha

Hope this helps!

Upvotes: 1

Sindhoor
Sindhoor

Reputation: 548

you can press ctrl+u that will show you the page source. use ctrl+f to find the element which u want. This is easier than inspect element.

Upvotes: 0

Related Questions