Hanson.xyz Dev
85 lines
3.5 KiB
JavaScript
Executable File
85 lines
3.5 KiB
JavaScript
Executable File
const { chromium } = require('playwright');
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch();
|
|
const context = await browser.newContext({ viewport: { width: 1400, height: 800 } });
|
|
const page = await context.newPage();
|
|
|
|
await page.goto('https://homeproz.dev.hanson.xyz/properties/', { timeout: 60000 });
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Get document structure
|
|
const docInfo = await page.evaluate(() => {
|
|
const mapLayout = document.querySelector('.property-map-layout');
|
|
const mapContainer = document.querySelector('.property-map-container');
|
|
const footer = document.querySelector('footer.site-footer');
|
|
|
|
const getDocPosition = el => {
|
|
const rect = el.getBoundingClientRect();
|
|
return {
|
|
top: rect.top + window.scrollY,
|
|
bottom: rect.top + rect.height + window.scrollY,
|
|
height: rect.height
|
|
};
|
|
};
|
|
|
|
return {
|
|
mapLayout: mapLayout ? getDocPosition(mapLayout) : null,
|
|
footer: footer ? getDocPosition(footer) : null,
|
|
scrollHeight: document.documentElement.scrollHeight,
|
|
viewportHeight: window.innerHeight,
|
|
maxScroll: document.documentElement.scrollHeight - window.innerHeight,
|
|
mapContentHeight: mapContainer ? mapContainer.getBoundingClientRect().height : null
|
|
};
|
|
});
|
|
|
|
console.log('Document positions:', JSON.stringify(docInfo, null, 2));
|
|
|
|
// Calculate when CSS sticky would stop the map
|
|
// Sticky stops when: elementTop + elementHeight >= parentBottom
|
|
// For sticky at top:100 -> when scrollY + 100 + mapHeight >= mapLayout.bottom
|
|
const stickyStopScroll = docInfo.mapLayout.bottom - 100 - docInfo.mapContentHeight;
|
|
console.log('\nCSS sticky should stop at scrollY:', stickyStopScroll);
|
|
console.log('Max scroll possible:', docInfo.maxScroll);
|
|
|
|
if (stickyStopScroll <= docInfo.maxScroll) {
|
|
console.log('\nSticky WILL naturally stop before footer. Testing...');
|
|
|
|
// Scroll past the sticky stop point
|
|
const testScroll = Math.min(stickyStopScroll + 200, docInfo.maxScroll);
|
|
await page.evaluate(y => window.scrollTo(0, y), testScroll);
|
|
await page.waitForTimeout(500);
|
|
|
|
const afterScroll = await page.evaluate(() => {
|
|
const mapContainer = document.querySelector('.property-map-container');
|
|
const footer = document.querySelector('footer.site-footer');
|
|
|
|
return {
|
|
actualScrollY: window.scrollY,
|
|
mapViewportTop: mapContainer ? mapContainer.getBoundingClientRect().top : null,
|
|
mapViewportBottom: mapContainer ? mapContainer.getBoundingClientRect().bottom : null,
|
|
footerViewportTop: footer ? footer.getBoundingClientRect().top : null
|
|
};
|
|
});
|
|
|
|
console.log('After scrolling to', testScroll);
|
|
console.log('Actual scrollY:', afterScroll.actualScrollY);
|
|
console.log('Map viewport position:', afterScroll.mapViewportTop, 'to', afterScroll.mapViewportBottom);
|
|
console.log('Footer viewport top:', afterScroll.footerViewportTop);
|
|
|
|
// Check if map extended past footer
|
|
if (afterScroll.mapViewportBottom > afterScroll.footerViewportTop) {
|
|
console.log('\n*** OVERLAP DETECTED! Map extends into footer by',
|
|
afterScroll.mapViewportBottom - afterScroll.footerViewportTop, 'px');
|
|
} else {
|
|
console.log('\nNo overlap. Gap:', afterScroll.footerViewportTop - afterScroll.mapViewportBottom, 'px');
|
|
}
|
|
|
|
await page.screenshot({ path: '/tmp/max-scroll-test.png' });
|
|
} else {
|
|
console.log('\nCannot scroll far enough to trigger sticky stop');
|
|
}
|
|
|
|
await browser.close();
|
|
})();
|