如何在浏览器检查中获取Ext js元素id或itemId值

Question

EXT VIEW PAGE

text : ACTIONS,
xtype : 'actioncolumn',
draggable: false,
dataIndex: 'message',
items:
{
  [ 
     {
       glyph:'xf044@FontAwesome',
       name : 'edit_customer', 
       handler: function(grid, rowIndex, colIndex, item, event, record, row)
       {
        this.up("customer-list").getController().EditCustomer(record);
        },
      }
    ]
  }

HTML OUTPUT:

<span role="button" title="" 
class="x-action-col-icon x-action-col-glyph x-action-col-6   x-hide-display" 
style="font-family:FontAwesome" 
data-qtip="Edit Customer"></span>

But i need to get my id here.

If refresh the page that button id will comeing diff number

For Ex : id="tableview-1738"

So how can i get id or any attrbute from html page driectly. I need to test automate in this element

Answer 1

Ids in ExtJS are dynamic. So you have to use either the label string or the design of your web page to get hold of elements. Here is a code to get element id based on the label and field type.

    private static String getID(WebDriver driver, String elementText, String field_type, Integer occurence) throws InterruptedException {

    String pageSource = driver.getPageSource();
    String regX = "<" + field_type + " id=\"([^\"]+)\" [^>]+>" + elementText + "<\\/" + field_type + ">";
    Pattern id = Pattern.compile(regX);
    Matcher match = id.matcher(pageSource);
    int count = 0;

    while (count < occurence) {
        count++;
        match.find();
        switch (field_type) {
        case "label":
            returnID = match.group(1).replace("label", "input");
            break;
        case "span":
            returnID = match.group(1).replace("btnInnerEl", "btnIconEl");
            break;

        }
    }
    return returnID;
}

Fn call to get id of a textfield with label "Password".

element = driver.findElement(By.id(ElementFinder.getID(driver, "Password", "label",1)));