browser-use/examples/browser/window_sizing.py

"""
Examples demonstrating browser window sizing features.

This example shows how to:
1. Set a custom window size for the browser
2. Verify the actual viewport dimensions
3. Use the no_viewport option
"""

import asyncio
from typing import Any

from dotenv import load_dotenv

load_dotenv()

from browser_use.browser import BrowserProfile, BrowserSession
from browser_use.browser.events import NavigateToUrlEvent


async def get_viewport_size_cdp(browser_session: BrowserSession) -> dict[str, int]:
	"""Get viewport size using CDP."""
	cdp_session = await browser_session.get_or_create_cdp_session()
	result = await cdp_session.cdp_client.send.Runtime.evaluate(
		params={'expression': '({width: window.innerWidth, height: window.innerHeight})', 'returnByValue': True},
		session_id=cdp_session.session_id,
	)
	return result.get('result', {}).get('value', {})


async def get_window_size_cdp(browser_session: BrowserSession) -> dict[str, int]:
	"""Get window outer size using CDP."""
	cdp_session = await browser_session.get_or_create_cdp_session()
	result = await cdp_session.cdp_client.send.Runtime.evaluate(
		params={'expression': '({width: window.outerWidth, height: window.outerHeight})', 'returnByValue': True},
		session_id=cdp_session.session_id,
	)
	return result.get('result', {}).get('value', {})


async def example_custom_window_size():
	"""Example 1: Setting a custom browser window size"""
	print('\n=== Example 1: Custom Window Size ===')

	# Create a browser profile with a specific window size
	profile = BrowserProfile(
		window_size={'width': 800, 'height': 600},  # Small size for demonstration
		# **playwright.devices['iPhone 13']         # or you can use a playwright device profile
		# device_scale_factor=1.0,                  # change to 2~3 to emulate a high-DPI display for high-res screenshots
		# viewport={'width': 800, 'height': 600},   # set the viewport (aka content size)
		# screen={'width': 800, 'height': 600},     # hardware display size to report to websites via JS
		headless=False,  # Use non-headless mode to see the window
	)

	browser_session = None

	try:
		# Initialize and start the browser session
		browser_session = BrowserSession(
			browser_profile=profile,
		)
		await browser_session.start()

		# Navigate to a test page using events
		nav_event = browser_session.event_bus.dispatch(NavigateToUrlEvent(url='https://example.com'))
		await nav_event

		# Wait a bit to see the window
		await asyncio.sleep(1)

		# Get the actual viewport size using CDP
		actual_content_size = await get_viewport_size_cdp(browser_session)

		if profile.viewport:
			expected_page_size = dict(profile.viewport)
		elif profile.window_size:
			expected_page_size = {
				'width': profile.window_size['width'],
				'height': profile.window_size['height'] - 87,
			}  # 87px is the height of the navbar, title, rim ish
		else:
			# Default expected size if neither viewport nor window_size is set
			expected_page_size = {'width': 800, 'height': 600}
		_log_size = lambda size: f'{size["width"]}x{size["height"]}px'
		print(f'Expected {_log_size(expected_page_size)} vs actual {_log_size(actual_content_size)}')

		# Validate the window size
		validate_window_size(expected_page_size, actual_content_size)

		# Wait a bit more to see the window
		await asyncio.sleep(2)

	except Exception as e:
		print(f'Error in example 1: {e}')

	finally:
		# Close resources
		if browser_session:
			await browser_session.kill()


async def example_no_viewport_option():
	"""Example 2: Testing browser window sizing with no_viewport option"""
	print('\n=== Example 2: Window Sizing with no_viewport=False ===')

	profile = BrowserProfile(window_size={'width': 1440, 'height': 900}, no_viewport=False, headless=False)

	browser_session = None

	try:
		browser_session = BrowserSession(browser_profile=profile)
		await browser_session.start()

		# Navigate using events
		nav_event = browser_session.event_bus.dispatch(NavigateToUrlEvent(url='https://example.com'))
		await nav_event
		await asyncio.sleep(1)

		# Get viewport size (inner dimensions) using CDP
		viewport = await get_viewport_size_cdp(browser_session)
		if profile.window_size:
			print(f'Configured size: width={profile.window_size["width"]}, height={profile.window_size["height"]}')
		else:
			print('No window size configured')
		print(f'Actual viewport size: {viewport}')

		# Get the actual window size (outer dimensions) using CDP
		window_size = await get_window_size_cdp(browser_session)
		print(f'Actual window size (outer): {window_size}')

		await asyncio.sleep(2)

	except Exception as e:
		print(f'Error in example 2: {e}')

	finally:
		if browser_session:
			await browser_session.kill()


def validate_window_size(configured: dict[str, Any], actual: dict[str, Any]) -> None:
	"""Compare configured window size with actual size and report differences.

	Raises:
		Exception: If the window size difference exceeds tolerance
	"""
	# Allow for small differences due to browser chrome, scrollbars, etc.
	width_diff = abs(configured['width'] - actual['width'])
	height_diff = abs(configured['height'] - actual['height'])

	# Tolerance of 5% or 20px, whichever is greater
	width_tolerance = max(configured['width'] * 0.05, 20)
	height_tolerance = max(configured['height'] * 0.05, 20)

	if width_diff > width_tolerance or height_diff > height_tolerance:
		print(f'⚠️  WARNING: Significant difference between expected and actual page size! ±{width_diff}x{height_diff}px')
		raise Exception('Window size validation failed')
	else:
		print('✅ Window size validation passed: actual size matches configured size within tolerance')

	return None


async def main():
	"""Run all window sizing examples"""
	print('Browser Window Sizing Examples')
	print('==============================')

	# Run example 1
	await example_custom_window_size()

	# Run example 2
	await example_no_viewport_option()

	print('\n✅ All examples completed!')


if __name__ == '__main__':
	asyncio.run(main())