ext js 4 rowediting how to add custom attributes for selenium testing id purposes in a grid

Question

I have an ext js grid that uses the plugin row editing. I need to write selenium test scripts and would like to assign static ids or custom attributes to the row editing form fields and update and cancel buttons.. I know how to rename button text.. but what I really need to do is add a attribute so I can reference with selenium testing.

See fiddle demo.. if someone could show me how it would be appreciated (newbie extjs).

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
        {"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
        {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
        {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'}
    ],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1,
            pluginId: 'qqrowEditingqq'
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
if (Ext.grid.RowEditor) {
        Ext.apply(Ext.grid.RowEditor.prototype, {
            saveBtnText : "Guardar",
            cancelBtnText : "Cancelar",
            errorsText : "Errores",
            dirtyText : "Debe guardar o cancelar sus cambios"
        });
    }
grid.on('beforeedit', function(e) {
    if (e.record.get('phone') == "555-111-1224")
        grid.getPlugin('qqrowEditingqq').editor.form.findField('name').disable();
    else
        grid.getPlugin('qqrowEditingqq').editor.form.findField('name').enable();
});

I don't want to do xpath for this.

we will be doing grids and roweditng on many pages and would like to write selenium test scripts that select the object some sort of attribute that targets one form field or button within a grid.

Yi Zeng Yi Zeng · Accepted Answer · 2013-04-05T23:30:20

You can add class names to all the elements in the panel.

For example, add cls: 'panel-simpsons' to the panel, add cls: 'header-name', tdCls: 'col-name' to each column (not requested here by you, but I think might be useful for other tests), the the x-grid-row-editor can be located by cssselector .panel-simpsons .x-grid-row-editor, then you will have two buttons inside this.

Sample ExtJs code:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
        {"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"},
        {"name":"Homer", "email":"[email protected]", "phone":"555-222-1244"},
        {"name":"Marge", "email":"[email protected]", "phone":"555-222-1254"}
    ]
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    cls: 'panel-simpsons', // NEW!!!
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', cls: 'header-name', tdCls: 'col-name', editor: 'textfield'}, // NEW!!!
        {header: 'Email', dataIndex: 'email', flex:1, cls: 'header-email', tdCls: 'col-email', // NEW!!!
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone', cls: 'header-phone', tdCls: 'col-phone'} // NEW!!!
    ],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1,
            pluginId: 'qqrowEditingqq'
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});
if (Ext.grid.RowEditor) {
        Ext.apply(Ext.grid.RowEditor.prototype, {
            saveBtnText : "Guardar",
            cancelBtnText : "Cancelar",
            errorsText : "Errores",
            dirtyText : "Debe guardar o cancelar sus cambios"
        });
    }
grid.on('beforeedit', function(e) {
    if (e.record.get('phone') == "555-111-1224")
        grid.getPlugin('qqrowEditingqq').editor.form.findField('name').disable();
    else
        grid.getPlugin('qqrowEditingqq').editor.form.findField('name').enable();
});

Now are the sample C# code for locating elements:

(Please note that locators are chained to simplify the CssSelector, start using WebDriver.FindElement, then PanelSimpsons.FindElement, then GridRowEditor.FindElement)

public IWebElement PanelSimpsons {
    get { return WebDriver.FindElement(By.CssSelector(".panel-simpsons")); }
}

public IWebElement ColumnHeaderName {
    get { return PanelSimpsons.FindElement(By.CssSelector(".header-name")); }
}

public IList<IWebElement> ColumnName {
    get { return PanelSimpsons.FindElements(By.CssSelector(".col-name")); }
}

#region Row editor
public IWebElement GridRowEditor {
    get { return PanelSimpsons.FindElement(By.CssSelector(".x-grid-row-editor")); }
}

public IWebElement InputName {
    get { return GridRowEditor.FindElement(By.CssSelector("input[name='name']")); }
}

public IWebElement InputEmail {
    get { return GridRowEditor.FindElement(By.CssSelector("input[name='email']")); }
}

public IList<IWebElement> RowEditorButtons {
    get { return GridRowEditor.FindElements(By.CssSelector("div.x-grid-row-editor-buttons button")); }
}

public IWebElement BtnUpdate {
    get { return RowEditorButtons[0]; }
}

public IWebElement BtnCancel {
    get { return RowEditorButtons[1]; }
}
#endregion

ext js 4 rowediting how to add custom attributes for selenium testing id purposes in a grid

1 Answers