0

I'm using siesta to test a large scrolling page, and some of the elements are not visible unless you scroll down first. Siesta runner seems to assume that the elements that need to be clicked are visible, so when it tries to click those elements, it actually misses the target by far. How can I overcome this?

I have modified an existing testcase just to add a large panel that would push down the target elements.

Any help would be appreciated.

StartTest(function (t) {
    var fp = Ext.create('Ext.FormPanel', {
        title: 'Check/Radio Groups Example',
        frame: true,
        fieldDefaults: {
            labelWidth: 110
        },
        width: 700,
        height: 1700,
        renderTo:Ext.getBody(),
        bodyPadding: 10,
        items: [
        {
            xtype: 'panel',
            title: 'a LARGE panel',
            height: 1500
        },
        {
            xtype: 'fieldset',
            title: 'Checkbox Groups (initially collapsed)',
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                labelStyle: 'padding-left:4px;'
            },
            items: [{
                xtype: 'checkboxgroup',
                fieldLabel: 'Favorite browser',
                // Put all controls in a single column with width 100%
                columns: 1,
                items: [
                    {id : 'cb-chrome', boxLabel: 'Chrome', name: 'cb-col-1'},
                    {id : 'cb-ff', boxLabel: 'Firefox', name: 'cb-col-2'},
                    {id : 'cb-safari', boxLabel: 'Safari', name: 'cb-col-3'}
                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: 'Random questions',
                allowBlank: false,
                msgTarget: 'side',
                autoFitErrors: false,
                anchor: '-18',
                layout: 'column',
                defaultType: 'container',
                items: [{
                    columnWidth: .33,
                    items: [
                        {xtype: 'component', html: 'IE 6 is:', cls:'x-form-check-group-label'},
                        {xtype: 'checkboxfield', boxLabel: 'Awesome', name: 'cb-cust-1'},
                        {xtype: 'checkboxfield', boxLabel: 'Not so awesome', name: 'ie6-not-awesome'}
                    ]
                },{
                columnWidth: .33,
                    items: [
                         {xtype: 'component', html: 'Chrome is', cls:'x-form-check-group-label'},
                        {xtype: 'checkboxfield', boxLabel: 'Fast', name: 'cb-cust-3'},
                        {xtype: 'checkboxfield', boxLabel: 'Not so fast', name: 'cb-cust-3'}
                    ]
                },{
                    columnWidth: .34,
                    items: [
                        {xtype: 'component', html: 'This demo is powered by', cls:'x-form-check-group-label'},
                        {xtype: 'checkboxfield', boxLabel: 'ActiveX', name: 'cb-cust-4'},
                        {xtype: 'checkboxfield', boxLabel: 'Ext JS', name: 'cb-cust-5'}
                ]
               }]
            }]
        }]
    });

    // Making use of Ext.ComponentQuery
    t.chain(
        { action : 'click', target : '>>[id="cb-chrome"]' },
        { action : 'click', target : '>>[name="ie6-not-awesome]' },
        { action : 'click', target : '>>[boxLabel="Fast"]' },
        { action : 'click', target : '>>[boxLabel="Ext JS"]' },

        function() {
            t.pass('All boxes could be clicked ok');
        }    
    );
});
4

1 回答 1

0

在您的线束文件中，您可以配置此选项：

autoScrollElementsIntoView : true,

现在 Siesta 应该会自动滚动到该元素以进行点击。

您还可以设置视口窗口的大小：

viewportHeight  : 1200,
viewportWidth   : 1200,

如果滚动条直接在您的应用程序中，您应该能够使用 Siesta 功能移动它： http ://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-垂直滚动到

或使用 ExtJS 函数： http ://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-method-setScrollX

于 2014-10-31T11:11:34.827 回答