Question

我正在使用午睡测试大型滚动页面，除非您先向下滚动，否则部分元素不可见。 Siesta跑步者似乎认为需要点击的元素是可见的，因此当它试图点击这些元素时，它实际上错过了目标。我怎么能克服这个？

我修改了一个现有的测试用例，只是为了添加一个可以按下目标元素的大面板。

任何帮助都将不胜感激。

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');
        }    
    );
});

Answer 1

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

autoScrollElementsIntoView : true,

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

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

viewportHeight  : 1200,
viewportWidth   : 1200,

如果滚动条直接位于您的应用中，您应该可以使用Siesta功能移动它： http://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-scrollVerticallyTo

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

如何使午睡能够点击不可见的元素

1 个答案: