Question

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

请参阅小提琴demo ..如果有人能告诉我如何欣赏它（新手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();
});

我不想为此做xpath。

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

Answer 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，然后PanelSimpsons.FindElement，然后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如何在网格中为selenium测试id目的添加自定义属性

1 个答案: