How to make siesta able to click elements non visible - extjs

Question

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

Answer 1

In your harness file you can configure this option:
autoScrollElementsIntoView : true,
Now Siesta should automatically scroll to that element for click.
Also you can set up size of the view-port window:
viewportHeight : 1200,
viewportWidth : 1200,
And if the scroll bar is directly in your app, you should be able to move with it using Siesta functions:
http://www.bryntum.com/docs/siesta/#!/api/Siesta.Test.Element-method-scrollVerticallyTo
Or using ExtJS functions:
http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.Component-method-setScrollX