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..
How to find attribute values of components in an HTML page other than inspecting it
1.5k Views Asked by Anand Maheswar At
4
There are 4 best solutions below
0
On
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.
0
On
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>0
On
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 certainxtype
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"
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!