0

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":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "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.

4

1 回答 1

1

您可以为面板中的所有元素添加类名。

例如，添加cls: 'panel-simpsons'到面板，添加cls: 'header-name', tdCls: 'col-name'到每一列（这里不是您要求的，但我认为可能对其他测试有用）， x-grid-row-editor 可以通过 cssselector 定位.panel-simpsons .x-grid-row-editor，那么您将有两个这里面的按钮。

示例 ExtJs 代码：

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "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();
});

现在是用于定位元素的示例 C# 代码：

（请注意，定位器被链接以简化 CssSelector，开始使用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
于 2013-04-05T23:30:20.267 回答