Playwright's page.evaluate always return undefined - playwright

Question

this is my code.
very simple, I want to know if an element is in viewport.
for some reason I can't understand I keep getting undefined.
the element exists but nothing happens
in the I see the x but the q is never seen.
async function isItemInViewport( page ) {
console.log( 'x' );
await page.evaluate( () => {
console.log( 'q' );
const lastMenuItem = document.querySelectorAll( '.nav-menu--dropdown.nav-menu__container .lastitem-class-for-playwright-test' )[ 0 ].getBoundingClientRect();
console.log(lastMenuItem );
let isInViewport = false;
if (
lastMenuItem.top >= 0 &&
lastMenuItem.left >= 0 &&
lastMenuItem.bottom <= ( window.innerHeight || document.documentElement.clientHeight ) &&
lastMenuItem.right <= ( window.innerWidth || document.documentElement.clientWidth )
) {
isInViewport = true;
}
return isInViewport;
} );
}

Answer 1

This is what I end up doing:
async function isItemInViewport( page, item ) {
return await page.evaluate( ( item ) => {
let isVisible = false;
const element = document.querySelector( item );
if ( element ) {
const rect = element.getBoundingClientRect();
if ( rect.top >= 0 && rect.left >= 0 ) {
const vw = Math.max( document.documentElement.clientWidth || 0, window.innerWidth || 0 );
const vh = Math.max( document.documentElement.clientHeight || 0, window.innerHeight || 0 );
if ( rect.right <= vw && rect.bottom <= vh ) {
isVisible = true;
}
}
}
return isVisible;
}, item );
}
And this is the function call:
// Assertion
const item = '.item-css-class';
await expect( await isItemInViewport( page, item ) ).toBeTruthy();