Hanson.xyz Dev
77 lines
2.8 KiB
JavaScript
Executable File
77 lines
2.8 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();
|
|
|
|
page.on('console', msg => console.log('BROWSER:', msg.text()));
|
|
|
|
await page.goto('https://homeproz.dev.hanson.xyz/properties/', { timeout: 60000 });
|
|
await page.waitForTimeout(3000);
|
|
|
|
// Check JS state
|
|
const jsState = await page.evaluate(() => {
|
|
const map = document.querySelector('.property-map-container');
|
|
const footer = document.querySelector('footer.site-footer');
|
|
const results = document.querySelector('.property-results-map, .property-results-grid');
|
|
|
|
if (!map || !footer) {
|
|
return { error: 'Required elements not found', mapFound: !!map, footerFound: !!footer };
|
|
}
|
|
|
|
const scrollTop = window.scrollY;
|
|
const footerTop = footer.getBoundingClientRect().top + scrollTop;
|
|
const mapHeight = map.getBoundingClientRect().height;
|
|
const stickyTop = 100;
|
|
const mapBottomIfSticky = scrollTop + stickyTop + mapHeight;
|
|
|
|
const resultsBottom = results ?
|
|
results.getBoundingClientRect().top + scrollTop + results.getBoundingClientRect().height :
|
|
Infinity;
|
|
|
|
const stopPoint = Math.min(footerTop, resultsBottom);
|
|
|
|
return {
|
|
scrollTop,
|
|
footerTop,
|
|
mapHeight,
|
|
mapBottomIfSticky,
|
|
resultsBottom,
|
|
stopPoint,
|
|
shouldStop: mapBottomIfSticky >= stopPoint - 20,
|
|
hasStoppedClass: map.classList.contains('sticky-stopped'),
|
|
computedPosition: window.getComputedStyle(map).position
|
|
};
|
|
});
|
|
|
|
console.log('\nJS State at current scroll:', JSON.stringify(jsState, null, 2));
|
|
|
|
if (jsState.stopPoint && !jsState.error) {
|
|
const targetScroll = jsState.stopPoint - 100 - jsState.mapHeight + 50;
|
|
|
|
console.log('\nScrolling to', targetScroll, 'to trigger stop...');
|
|
await page.evaluate((y) => window.scrollTo(0, y), targetScroll);
|
|
await page.waitForTimeout(500);
|
|
|
|
const afterState = await page.evaluate(() => {
|
|
const map = document.querySelector('.property-map-container');
|
|
const footer = document.querySelector('footer.site-footer');
|
|
|
|
return {
|
|
scrollY: window.scrollY,
|
|
footerViewportY: footer ? footer.getBoundingClientRect().top : null,
|
|
mapBottom: map ? map.getBoundingClientRect().top + map.getBoundingClientRect().height : null,
|
|
hasStoppedClass: map ? map.classList.contains('sticky-stopped') : null,
|
|
computedPosition: map ? window.getComputedStyle(map).position : null
|
|
};
|
|
});
|
|
|
|
console.log('\nAfter scroll:', JSON.stringify(afterState, null, 2));
|
|
|
|
await page.screenshot({ path: '/tmp/sticky-after-scroll.png' });
|
|
}
|
|
|
|
await browser.close();
|
|
})();
|