Basic mobile browser testing with device emulation and touch interactions using Playwright
LoadForge can record your browser, graphically build tests, scan your site with a wizard and more. Sign up now to run your first test.
This guide shows how to test mobile browser experiences with device emulation. Perfect for testing responsive designs and mobile-specific functionality.
from locust import task, HttpUser
from locust_plugins.users.playwright import PlaywrightUser, pw
class MobileBrowserUser(PlaywrightUser):
def on_start(self):
# Mobile device configurations
self.devices = [
{"name": "iPhone 12", "width": 390, "height": 844},
{"name": "Samsung Galaxy", "width": 360, "height": 640},
{"name": "iPad", "width": 768, "height": 1024}
]
# Test URLs
self.test_urls = [
"/",
"/products",
"/about",
"/contact",
"/login"
]
@task(3)
@pw
def test_mobile_navigation(self, page):
"""Test mobile navigation and menu"""
device = self.devices[0] # iPhone 12
# Set mobile viewport
page.set_viewport_size(width=device["width"], height=device["height"])
# Navigate to homepage
page.goto("/")
# Look for mobile menu button (hamburger menu)
menu_selectors = [
"[data-testid='mobile-menu']",
".mobile-menu-button",
".hamburger",
"button[aria-label*='menu']"
]
menu_button = None
for selector in menu_selectors:
if page.locator(selector).count() > 0:
menu_button = page.locator(selector)
break
if menu_button:
# Tap mobile menu
menu_button.tap()
# Wait for menu to open
page.wait_for_timeout(500)
# Check if navigation links are visible
nav_links = page.locator("nav a, .menu a").count()
print(f"Mobile menu opened with {nav_links} links")
else:
print("No mobile menu found - testing regular navigation")
# Test scrolling
page.evaluate("window.scrollTo(0, 500)")
page.wait_for_timeout(300)
@task(2)
@pw
def test_responsive_layout(self, page):
"""Test responsive layout at different screen sizes"""
url = self.random_url()
for device in self.devices:
# Set viewport for each device
page.set_viewport_size(width=device["width"], height=device["height"])
# Navigate to page
page.goto(url)
# Check if page loads properly
page.wait_for_load_state("networkidle")
# Take basic measurements
body_width = page.evaluate("document.body.scrollWidth")
viewport_width = device["width"]
# Check for horizontal scrolling (usually bad on mobile)
if body_width > viewport_width + 10: # Small tolerance
print(f"Warning: Horizontal scroll on {device['name']} - {body_width}px > {viewport_width}px")
else:
print(f"{device['name']}: Layout fits properly")
@task(2)
@pw
def test_touch_interactions(self, page):
"""Test touch-specific interactions"""
device = self.devices[0] # Use iPhone for touch testing
page.set_viewport_size(width=device["width"], height=device["height"])
page.goto("/")
# Test tap interactions on buttons
buttons = page.locator("button, .btn, [role='button']")
button_count = buttons.count()
if button_count > 0:
# Tap first button
first_button = buttons.first
if first_button.is_visible():
first_button.tap()
page.wait_for_timeout(300)
print("Touch interaction: Button tap successful")
# Test swipe gesture (if applicable)
if page.locator(".carousel, .slider").count() > 0:
carousel = page.locator(".carousel, .slider").first
# Get carousel position
box = carousel.bounding_box()
if box:
# Simulate swipe left
start_x = box["x"] + box["width"] * 0.8
end_x = box["x"] + box["width"] * 0.2
y = box["y"] + box["height"] / 2
page.mouse.move(start_x, y)
page.mouse.down()
page.mouse.move(end_x, y)
page.mouse.up()
print("Touch interaction: Swipe gesture performed")
@task(1)
@pw
def test_mobile_forms(self, page):
"""Test form interactions on mobile"""
device = self.devices[0]
page.set_viewport_size(width=device["width"], height=device["height"])
# Look for forms on common pages
form_pages = ["/contact", "/login", "/signup", "/search"]
for form_page in form_pages:
try:
page.goto(form_page)
# Look for input fields
inputs = page.locator("input[type='text'], input[type='email'], textarea")
if inputs.count() > 0:
first_input = inputs.first
# Tap to focus (important on mobile)
first_input.tap()
# Type some text
first_input.fill("Test input on mobile")
# Check if virtual keyboard doesn't break layout
page.wait_for_timeout(500)
print(f"Mobile form test completed on {form_page}")
break
except Exception as e:
# Page might not exist, continue to next
continue
def random_url(self):
"""Get a random test URL"""
import random
return random.choice(self.test_urls)
Common mobile device sizes to test: