Browser Swarm Docs
  • ๐Ÿš€Welcome
    • What is Browser Swarm?
  • Understanding Headless Browsers
  • Quickstart Guide
  • Framework Compatibility
  • ๐ŸŒŸ Core Concepts
    • Starting a Browser Task
  • Interacting with Browser Tasks
  • Task Lifecycle Management
  • โš™๏ธAdvanced Features
    • Stealth Automation
  • Proxy Integration
  • Real-Time Monitoring
  • Responsive Viewports
  • Session Debugging & Replay
  • File Handling (Downloads & Uploads)
  • Capturing Screenshots & PDFs
  • Persistent Contexts
  • Extension Support
  • Session Tagging & Metadata
  • ๐ŸŽฏPractical Examples
    • Automating Form Interactions
  • Efficient Data Scraping
  • Automated Web Testing
  • Cost Optimization Strategies
  • Handling Extended Tasks
  • Selecting Execution Regions
  • Monitoring Resource Usage
  • Leveraging Task Metadata
  • Pricing and Subscription
  • Account and Team Management
  • Managing Limits and Concurrency
  • Authentication Automation
  • Security Best Practices
  • ๐Ÿ”ŒEcosystem Integrations
    • Integration Overview
  • ๐Ÿ’ปDeveloper Resources
    • APIs and SDKs Overview
  • Node.js Integration
  • Python Integration
  • Browser Task API
  • Project Management API
  • Context Management API
  • Browser Extensions API
  • ๐Ÿ™‹โ€โ™‚๏ธSupport & Resources
    • Getting Help
  • Dashboard Overview
  • FAQs & Troubleshooting
Powered by GitBook
On this page
  • ๐ŸŽฏ Why Viewport Control Matters
  • โš™๏ธ Configuring Viewports in Browser Swarm
  • ๐Ÿ“ Common Device Viewport Dimensions
  • ๐Ÿงช Testing Responsive Designs
  • ๐Ÿ–ผ๏ธ Visual Regression Testing
  • ๐Ÿ’ก Best Practices

Responsive Viewports

Browser Swarm enables precise control over browser viewport dimensions, allowing you to simulate various devices and screen sizes. This is essential for testing responsive designs, ensuring consistent user experiences across desktops, tablets, and mobile devices.


๐ŸŽฏ Why Viewport Control Matters

Modern web applications must adapt seamlessly to a multitude of devices. By customizing viewport settings, you can:

  • Test Responsive Layouts: Validate how your application renders on different screen sizes.

  • Simulate Specific Devices: Emulate devices like iPhones, iPads, or Android phones by matching their screen dimensions.

  • Ensure UI Consistency: Detect and fix layout issues that may arise on varying viewports.

Proper viewport configuration is crucial for delivering a polished and accessible user interface.


โš™๏ธ Configuring Viewports in Browser Swarm

You can set custom viewport dimensions when creating a browser session using the SDKs.

Example

import { BrowserSwarm } from 'browser-swarm-sdk';

const bs = new BrowserSwarm({ apiKey: process.env.BROWSER_SWARM_API_KEY });

const session = await bs.sessions.create({
  projectId: process.env.BROWSER_SWARM_PROJECT_ID,
  browserSettings: {
    viewport: { width: 375, height: 667 }, // iPhone 8 dimensions
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X)...',
  },
});
from browser_swarm import BrowserSwarm
import os

bs = BrowserSwarm(api_key=os.environ["BROWSER_SWARM_API_KEY"])

session = bs.sessions.create(
    project_id=os.environ["BROWSER_SWARM_PROJECT_ID"],
    browser_settings={
        "viewport": {"width": 375, "height": 667},  # iPhone 8 dimensions
        "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X)...",
    },
)

Note: Adjust the userAgent string to match the device you're simulating for more accurate emulation.


๐Ÿ“ Common Device Viewport Dimensions

Here are some standard viewport sizes for popular devices:

Device
Width
Height

iPhone SE

375

667

iPhone 12 Pro

390

844

Pixel 5

393

851

iPad Pro 11"

834

1194

MacBook Pro 13"

1280

800

Desktop 1080p

1920

1080

Using these dimensions helps in testing how your application behaves across different devices.


๐Ÿงช Testing Responsive Designs

To ensure your application is responsive:

  1. Set the Viewport: Configure the desired viewport dimensions during session creation.

  2. Navigate to Your Application: Use automation frameworks like Playwright, Puppeteer, or Selenium to load your application.

  3. Perform Visual Checks: Capture screenshots or use visual testing tools to verify layout and design consistency.

  4. Automate Tests: Write automated tests that assert the presence and positioning of critical UI elements.

Regularly testing across multiple viewports ensures a consistent user experience.


๐Ÿ–ผ๏ธ Visual Regression Testing

Integrate visual regression testing tools to detect unintended changes in your application's appearance across different viewports. Tools like Percy or Applitools can be integrated into your CI/CD pipeline to automate this process.


๐Ÿ’ก Best Practices

  • Combine Viewport and User Agent: To accurately simulate a device, set both the viewport dimensions and the corresponding user agent string.

  • Test Critical Breakpoints: Focus on common breakpoints (e.g., 320px, 768px, 1024px, 1440px) to cover a wide range of devices.

  • Automate Testing: Incorporate viewport tests into your automated testing suite to catch issues early.

  • Use Real Devices When Possible: While emulation is helpful, testing on actual devices can reveal issues that emulators might miss.

By following these practices, you can ensure your application provides a seamless experience across all devices.

PreviousReal-Time MonitoringNextSession Debugging & Replay

Last updated 1 month ago