Skip to main content
This guide shows how to test mobile browser experiences with device emulation. Perfect for testing responsive designs and mobile-specific functionality.

Use Cases

  • Test mobile responsive layouts
  • Validate touch interactions
  • Check mobile performance
  • Test different device sizes

Simple Implementation

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)

Setup Instructions

  1. Ensure Playwright is configured in LoadForge
  2. Test with real mobile device dimensions
  3. Focus on common mobile interaction patterns
  4. Check responsive breakpoints

What This Tests

  • Mobile Layout: Responsive design at different screen sizes
  • Touch Interactions: Tap, swipe, and touch-specific gestures
  • Mobile Navigation: Hamburger menus and mobile-specific UI
  • Form Usability: Input field behavior on mobile devices

Mobile Testing Tips

  • Viewport Sizes: Test common device resolutions
  • Touch Targets: Ensure buttons are large enough (44px minimum)
  • Text Size: Check readability on small screens
  • Loading Speed: Mobile users expect fast loading

Common Mobile Issues

  • Horizontal Scrolling: Content wider than screen
  • Small Touch Targets: Buttons too small to tap easily
  • Slow Loading: Large images or resources
  • Broken Navigation: Mobile menus not working

Device Dimensions

Common mobile device sizes to test:
  • iPhone SE: 375x667
  • iPhone 12: 390x844
  • Samsung Galaxy: 360x640
  • iPad: 768x1024
I