Extjs ext js 4行编辑如何为网格中的selenium测试id添加自定义属性

我有一个ExtJS网格，它使用插件行编辑。我需要编写selenium测试脚本，并希望为行编辑表单字段以及更新和取消按钮分配静态ID或自定义属性。。我知道如何重命名按钮文本。。但我真正需要做的是添加一个属性，这样我就可以引用selenium测试

看小提琴。。如果有人能告诉我这将是多么的感激（新手extjs）

我不想为此使用xpath

---

我们将在许多页面上进行网格和行编辑，并希望编写selenium测试脚本，用于选择对象某种属性，该属性针对网格中的一个表单字段或按钮。

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

例如，将

cls:'panel simpsons'

添加到面板，将

cls:'header name'，tdCls:'col name'

添加到每一列（此处不是您要求的，但我认为可能对其他测试有用），x-grid-row-editor可以通过cssselector

找到，这里面有两个按钮

ExtJs代码示例：

Ext.create（'Ext.data.Store'{
storeId:'SimpsonStore'，
字段：[“姓名”、“电子邮件”、“电话”]，
数据：[
{“姓名”：“丽莎”，“电子邮件”：lisa@simpsons.com，“电话”：“555-111-1224”}，
{“姓名”：“Bart”，“电子邮件”：bart@simpsons.com，“电话”：“555--222-1234”}，
{“姓名”：“荷马”，“电子邮件”：home@simpsons.com，“电话”：“555-222-1244”}，
{“姓名”：“玛姬”，“电子邮件”：marge@simpsons.com，“电话”：“555-222-1254”}
]
});
var grid=Ext.create（'Ext.grid.Panel'{
标题：《辛普森一家》，
cls:'面板辛普森'，//新！！！
存储：Ext.data.StoreManager.lookup（'SimpsonStore'），
栏目：[
{header:'Name'，dataIndex:'Name'，cls:'header Name'，tdCls:'col Name'，editor:'textfield'}，//新建！！！
{header:'Email'，dataIndex:'Email'，flex:1，cls:'header Email'，tdCls:'col Email'，//新建！！！
编辑:{
xtype:'textfield'，
allowBlank:false
}
},
{header:'Phone'，dataIndex:'Phone'，cls:'header Phone'，tdCls:'col Phone'}//新建！！！
],
selType:“行模型”，
插件：[
Ext.create（'Ext.grid.plugin.RowEditing'{
单击编辑：1，
插件ID:'qqrowEditingqq'
})
],
身高：200，
宽度：400，
renderTo:Ext.getBody（）
});
if（Ext.grid.RowEditor）{
Ext.apply（Ext.grid.rowdeditor.prototype{
saveBtnText：“瓜达尔”，
cancelBtnText:“Cancelar”，
errorsText:“错误”，
dirtyText:“Debe guardar o cancelar sus cambios”
});
}
grid.on（'beforeedit'，函数（e）{
如果（例如，记录获取（“电话”）=“555-111-1224”）
grid.getPlugin（'qqrowEditingqq'）.editor.form.findField（'name'）.disable（）；
其他的
grid.getPlugin（'qqrowEditingqq'）.editor.form.findField（'name'）.enable（）；
});

下面是用于定位元素的示例C#代码：

（请注意，定位器是链接的，以简化CSS选择器，首先使用
WebDriver.FindElement
，然后使用
PanelSimpsons.FindElement
，然后使用
GridRowEditor.FindElement
）

public IWebElement PanelSimpsons{
获取{return WebDriver.findelelement（By.CssSelector（“.panel simpsons”）；}
}
公共IWebElement列标题名称{
获取{returnpanelsimpsons.FindElement（By.CssSelector（“.header name”）；}
}
公共IList列名{
获取{returnpanelsimpsons.FindElements（By.CssSelector（“.col name”）；}
}
#区域行编辑器
公共IWebElement GridRowEditor{
获取{returnpanelsimpsons.FindElement（By.CssSelector（“.x-grid-row-editor”）；}
}
公共IWebElement输入名{
获取{return gridrowdeditor.FindElement（By.CssSelector（“input[name='name']）；}
}
公共IWebElement输入电子邮件{
获取{return gridrowdeditor.FindElement（By.CssSelector（“input[name='email']”）；}
}
公共IList行编辑器按钮{
获取{return gridrowdeditor.FindElements（By.CssSelector（“div.x-grid-row-editor-button”）；}
}
公共IWebElement BtnUpdate{
获取{返回RowEditorButtons[0]；}
}
公共IWebElement BTNCEL{
获取{return RowEditorButtons[1]；}
}
#端区
非常感谢您提供了非常有用的详细示例。当您这样说“请注意，定位器被链接以简化CSS选择器，开始使用WebDriver.FindElement，然后是PanelSimpsons.FindElement，然后是GridRowEditor.FindElement）。”您是说一个定位器依赖于另一个定位器，并且必须在单独的行上按特定顺序执行吗？你能提供一个如何链接的例子吗？再次感谢您，我上面提供的代码就是一个例子。使用
WebDriver.FindElement（）
对于
PanelSimpsons
，
ColumnHeaderName
由
PanelSimpsons.FindElement（）
找到，而不是
WebDriver.FindElement（）
。在这种情况下，
PanelSimpsons.FindElement（）
将自动调用该
public IWebElement PanelSimpsons{}
。我正在使用C#和Java应该是类似的，但不确定Ruby或其他语言。您可以完全忽略这一点，只需使用更长的css选择器，例如
.panel simpsons.x-grid-row-editor输入[name='email']
来查找
输入电子邮件
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();
});