64 lines
2.6 KiB
Python
64 lines
2.6 KiB
Python
"""Test navbar at different viewport widths."""
|
|
from playwright.sync_api import sync_playwright
|
|
import os
|
|
|
|
SCREENSHOT_DIR = r"c:\Users\12914\Desktop\vscode\shots"
|
|
os.makedirs(SCREENSHOT_DIR, exist_ok=True)
|
|
|
|
# Key widths to test: (width, height, label)
|
|
VIEWPORTS = [
|
|
(1920, 1080, "1920_full_hd"),
|
|
(1440, 900, "1440_qhd"),
|
|
(1280, 800, "1280_upper_boundary"),
|
|
(1226, 800, "1226_problem_width"),
|
|
(1100, 800, "1100_compact_range"),
|
|
(992, 768, "992_lower_boundary"),
|
|
(768, 1024, "768_tablet"),
|
|
]
|
|
|
|
with sync_playwright() as p:
|
|
browser = p.chromium.launch(headless=True)
|
|
|
|
for width, height, label in VIEWPORTS:
|
|
page = browser.new_page(viewport={"width": width, "height": height})
|
|
page.goto("http://localhost:5173/")
|
|
page.wait_for_load_state("networkidle")
|
|
page.wait_for_timeout(500) # Wait for resize event to fire
|
|
|
|
# Screenshot the full page (navbar is at the top)
|
|
screenshot_path = os.path.join(SCREENSHOT_DIR, f"navbar_{label}.png")
|
|
page.screenshot(path=screenshot_path)
|
|
|
|
# Also get the navbar element dimensions
|
|
nav_info = page.evaluate("""() => {
|
|
const navbar = document.querySelector('.navbar-container');
|
|
const center = document.querySelector('.navbar-center');
|
|
const compactBtn = document.querySelector('.navbar-compact-search-btn');
|
|
const searchInput = document.querySelector('.navbar-search-input');
|
|
return {
|
|
navbarExists: !!navbar,
|
|
navbarWidth: navbar ? navbar.offsetWidth : 0,
|
|
centerExists: !!center,
|
|
centerWidth: center ? center.offsetWidth : 0,
|
|
compactBtnExists: !!compactBtn,
|
|
searchInputExists: !!searchInput,
|
|
searchInputWidth: searchInput ? searchInput.offsetWidth : 0,
|
|
windowWidth: window.innerWidth,
|
|
};
|
|
}""")
|
|
|
|
print(f"\n=== {label} (viewport: {width}x{height}) ===")
|
|
print(f" window.innerWidth: {nav_info['windowWidth']}")
|
|
print(f" navbar width: {nav_info['navbarWidth']}px")
|
|
print(f" navbar-center width: {nav_info['centerWidth']}px")
|
|
print(f" compact btn exists: {nav_info['compactBtnExists']}")
|
|
print(f" search input exists: {nav_info['searchInputExists']}")
|
|
if nav_info['searchInputExists']:
|
|
print(f" search input width: {nav_info['searchInputWidth']}px")
|
|
print(f" screenshot: {screenshot_path}")
|
|
|
|
page.close()
|
|
|
|
browser.close()
|
|
print("\nDone! All screenshots saved to", SCREENSHOT_DIR)
|