Dfyjkt

I have an onReady script that works as expected (selects first element):

module.exports = async (page, scenario, vp) => 
 console.log('SCENARIO > ' + scenario.label);
 await require('./../clickAndHoverHelper')(page, scenario);

 //custom code here
 await page.hover('.column-box.has-link .column-box-wrapper');

 //wait for css transitions
 await page.waitFor(1000);
;

However, if I want instead to select the last element, it hovers on the fifth element instead of 14th (last):

module.exports = async (page, scenario, vp) => 
 await require('./../clickAndHoverHelper')(page, scenario);

 // custom code here

 await page.evaluate('window.scrollTo(0, document.body.scrollHeight)'); //scroll to end

 const boxid = await page.$$eval('.column-box.has-link', boxes => 
 return boxes.pop().id;
 );

 const lastColumnBoxSelector = '#' + boxid + ' .column-box-wrapper';
 console.log("selector: " + lastColumnBoxSelector);
 const promiseResult = await page.hover(lastColumnBoxSelector);
 console.log(JSON.stringify(promiseResult));

 //wait for css transitions
 await page.waitFor(15000);
;

the log is showing me the correct/desired result for the selector variable and the hover function isn't throwing any errors. The promise result is returning undefined however. Is there an issue when mixing ids and classes?

Also, when I set debugWindow to true, the chrome window doesn't scroll down to the element.

Edit: Answer, my viewport.height in the config.js was too small.