Mobile View Testing with Playwright and Python

In today's fast-paced digital world, optimizing your website for mobile users is essential. Playwright, a comprehensive browser automation tool, offers powerful capabilities for mobile view testing. In this blog, we'll delve into using Playwright with Python to ensure your web applications are accessible and perform excellently on mobile devices.
Let's get started with some key aspects and examples!

Key Sections:

1.    Understanding Playwright and Its Advantages
2.    Setting Up Your Environment
3.    Writing Your First Mobile View Test
4.    Advanced Testing Techniques
5.    Best Practices for Mobile Testing
6.    Troubleshooting Common Issues

1. Understanding Playwright 

Before diving into mobile view testing, let’s first understand what Playwright is and why it is a powerful tool for web automation.

What is Playwright? 

Playwright is a modern browser automation framework developed by Microsoft. It allows you to control Chromium, Firefox, and WebKit browsers, and perform tests or automate tasks in these browsers using a single API. Playwright is known for its speed, reliability, and rich features, making it an excellent tool for both desktop and mobile web testing.
In the next sections, we’ll walk through how to set up Playwright with Python, write your first mobile view test, and explore more advanced features.

2. Setting Up Your Environment

Before we start writing tests, we need to set up our environment. Let’s walk through the necessary steps to install Playwright and configure your Python environment for testing.

Installation Steps:

Install Python: Make sure Python is installed on your system. You can download the latest version from python.org.

Install Playwright: To get started with Playwright, you need to install the necessary Python package, pytest-playwright. This package allows you to use Playwright with the pytest testing framework. To install it, open your terminal and run the following commands:

pip install pytest-playwright
playwright install

The playwright install command installs the necessary browser binaries that Playwright uses to perform tests (Chromium, Firefox, and WebKit).

Creating a Test File:

Once the installation is complete, you can start writing your tests. For this, create a Python file (e.g., test_mobile_view.py) and import Playwright:

import pytest
from playwright.sync_api import sync_playwright

Now you’re ready to start writing mobile view tests!

3. Writing Your First Mobile View Test

Playwright provides an easy way to emulate mobile devices. In this section, we'll walk through creating a simple test that opens a webpage on a mobile device.

Basic Mobile View Test Example:

Let’s say you want to test how your website looks on an iPhone 6/7/8 in portrait mode. The following code demonstrates how to launch the browser, set the device viewport to match the iPhone 6/7/8, and navigate to a website.

def test_open_mobile_view():
   with sync_playwright() as p:
       browser = p.chromium.launch()
       context = browser.new_context(
           viewport={"width": 375, "height": 667},  # iPhone 6/7/8 dimensions
           is_mobile=True,  # Emulating a mobile device
           user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'  # iPhone user agent
       )
       page = context.new_page()
       page.goto('https://example.com')  # Replace with your website's URL
       assert page.title() == "Example Domain"  # Verify the page title
       browser.close()

Explanation of Code:

sync_playwright(): This function opens the Playwright environment. It's used to control the browser.
browser.new_context(): Creates a new browser context. In this case, we specify the viewport dimensions to emulate an iPhone 6/7/8 and set is_mobile=True to tell Playwright to simulate a mobile device.
page.goto(): This navigates to the URL you want to test. You can replace https://example.com with the URL of your website.
assert page.title() == "Example Domain": This is an assertion to check that the title of the page matches what we expect. You can modify this check based on your needs.

4. Advanced Testing Techniques

In this section, we will look at some advanced testing techniques that you can use with Playwright to enhance your mobile view tests.

Simulating Touch Events:

Since mobile devices rely heavily on touch interactions, you may need to simulate touch events like tapping on buttons. Playwright makes this easy. For example:

def test_tap_button():
   with sync_playwright() as p:
       browser = p.chromium.launch()
       context = browser.new_context(
           viewport={"width": 375, "height": 667},
           is_mobile=True
       )
       page = context.new_page()
       page.goto('https://example.com')
       
       # Simulate tapping a button
       page.tap('#buttonId')  # Replace with your button's ID
       
       # Check if the button action works (e.g., check for a success message)
       assert page.text_content('#successMessage') == "Action Successful!"
       browser.close()

Network Conditions:

Playwright allows you to simulate different network conditions, such as 3G, slow 4G, or even offline. This is important for testing how your website performs under various network speeds.

For example, to simulate a slow network (like 3G):

def test_slow_network():
   with sync_playwright() as p:
       browser = p.chromium.launch()
       context = browser.new_context(
           viewport={"width": 375, "height": 667},
           is_mobile=True
       )
       
       # Set the network speed to slow 3G
       context.set_network_conditions(
           download=750,  # 750 kbps
           upload=750,    # 750 kbps
           latency=400     # 400 ms latency
       )
       
       page = context.new_page()
       page.goto('https://example.com')
       
       # Perform actions or assertions
       assert page.title() == "Example Domain"
       browser.close()

Geolocation Simulation:

Playwright also allows you to simulate geolocation (GPS) data for testing purposes. For example, to test how your website behaves when the user is in a specific location:

def test_geolocation():
   with sync_playwright() as p:
       browser = p.chromium.launch()
       context = browser.new_context(
           viewport={"width": 375, "height": 667},
           is_mobile=True
       )
       
       # Set geolocation to New York City (latitude, longitude)
       context.set_geolocation({"latitude": 40.7128, "longitude": -74.0060})
       
       page = context.new_page()
       page.goto('https://example.com')
       
       # Perform tests based on geolocation (e.g., check if location-based content appears)
       browser.close()

5. Best Practices for Mobile Testing

When testing your website on mobile devices, following best practices can help ensure you cover all important aspects of mobile user experience.

Use Realistic Device : 

Always choose device profiles that closely match the actual devices your users use. Playwright offers built-in device profiles for various popular phones (e.g., iPhone, Android).

Test Responsively: 

Test your website across various screen sizes. It's essential to verify that the layout adjusts correctly for small, medium, and large screens.

Performance Monitoring: 

Mobile users tend to have slower network speeds and more limited resources. Use Playwright to simulate network conditions and monitor performance to ensure your website performs well in all scenarios.

Test on Real Devices (if possible):

 While Playwright offers excellent emulation, it's always a good idea to test on real devices occasionally to ensure accuracy.

6. Troubleshooting Common Issues

Testing on mobile views using Playwright can sometimes come with challenges. Here are a few common problems testers may encounter, along with suggested solutions.

Flaky Tests:

Flaky tests are tests that sometimes pass and sometimes fail, often due to timing issues. This is a common problem when testing websites that rely on network requests, animations, or delayed loading of resources.

Solution: To address flaky tests, you can add explicit waiting mechanisms in your test code. Playwright offers methods like wait_for_load_state() and wait_for_selector() to ensure the elements you are interacting with are fully loaded and ready.

page.goto('https://example.com')
page.wait_for_load_state('networkidle')  # Wait until the page is fully loaded

This method will wait until there are no more than two network connections for at least 500 ms, which can help avoid interactions with elements before the page is fully loaded.

Viewport and Device Emulation Issues:

Sometimes, mobile view tests might not look as expected due to incorrect device emulation or viewport settings. Issues can arise if you forget to set the correct dimensions for the device or if the website is designed to detect emulation.

Solution: Ensure that you are using realistic viewport sizes for mobile emulation. Playwright supports pre-configured device profiles (like iPhone, Pixel, etc.), so you can use these profiles to ensure a more accurate representation of different mobile devices.

context = browser.new_context(
   viewport={"width": 375, "height": 667},  # iPhone 6/7/8 size
   is_mobile=True,
   user_agent='Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)'
)

Alternatively, you can use Playwright's built-in device profiles:

device = p.devices['iPhone 12']
context = browser.new_context(**device)

Using Playwright’s built-in device profiles ensures that all relevant parameters such as screen resolution, user agent, and device orientation are set correctly.

Browser Not Launching:

If the browser fails to launch, it could be due to a missing or corrupted browser installation. Ensure that you’ve run playwright install to download the necessary browser binaries.

Solution: If the problem persists, try reinstalling the Playwright package or running playwright install again to ensure all the required browsers are installed correctly.

pip uninstall pytest-playwright
pip install pytest-playwright
playwright install

Conclusion

Mobile view testing is an essential part of ensuring a seamless user experience across devices. With Playwright and Python, you can automate mobile testing and ensure your website works perfectly on a variety of devices. Whether you're just starting out or are an experienced tester, Playwright's powerful features—such as mobile emulation, network simulation, and cross-browser support—make it an excellent choice for mobile testing.

In this guide, we’ve covered everything from setting up Playwright in Python, writing your first mobile view test, to troubleshooting common issues you may face along the way. By following best practices, you can ensure your website performs smoothly on all mobile devices, providing a better experience for your users.

FAQs

What is Playwright?

Playwright is an open-source automation library developed by Microsoft. It enables developers and testers to automate browsers (Chromium, Firefox, WebKit) for various tasks, including web scraping, UI testing, and mobile view testing. It’s particularly useful for testing web applications on different browsers and mobile devices.

Why use Playwright over other tools?

Playwright offers several advantages over other testing tools like Selenium:
Cross-browser testing: Playwright supports multiple browsers (Chromium, Firefox, and WebKit), while Selenium primarily supports WebDriver-based browsers like Chrome and Firefox.
Mobile emulation: Playwright allows you to easily simulate mobile devices and test responsive layouts, something that’s more complex to achieve with other tools.
Faster execution: Playwright can run tests in headless mode, speeding up test execution and making it ideal for CI/CD pipelines.

What languages does Playwright support?

Playwright supports multiple programming languages, including JavaScript, Python, C#, and Java. This makes it versatile and easy to integrate into your existing development and testing workflows.

How do you emulate devices with Playwright?

Playwright allows you to emulate mobile devices by specifying the viewport size and user agent string. You can either manually set these parameters or use Playwright’s built-in device profiles for popular devices (like iPhone or Pixel phones). This emulation helps you test how your website behaves on different screen sizes and resolutions.

Can Playwright test multiple browsers simultaneously?

Yes, Playwright supports parallel testing across multiple browsers. You can run tests concurrently in different browsers (Chromium, Firefox, WebKit) or in different contexts within a single browser. This helps ensure cross-browser compatibility and saves time during testing.

How does Playwright handle animations or pop-ups?

Playwright can interact with pop-ups, modals, and animations just like regular elements on the page. For animations, you may need to wait for them to finish before interacting with elements. Playwright provides various waiting mechanisms like wait_for_selector() and wait_for_load_state() to ensure the element is ready before performing actions.

What are some common issues in mobile view testing?

Common issues in mobile view testing include flaky tests (often due to timing problems), viewport size mismatches, or problems with device emulation. To address these issues, ensure that you are using accurate device profiles or manually setting the correct viewport sizes, and utilize Playwright’s waiting functions to handle timing issues.