Mobile Device Emulation | Bondar Academy

Lesson Summary

In this lesson, we explore how to use Playwright for testing web applications with mobile browser emulation. It's important to note that Playwright cannot test mobile applications directly; it only supports web applications through mobile browser emulation. Setting Up Mobile Emulation To set up mobile emulation, follow these steps: Create a new spec file named testmobile.spec.ts . Import necessary Playwright modules and navigate to the home page. Set up your test environment by creating a new project called MobileTest . Specify the device you want to emulate. Playwright provides a long list of devices, such as iPhone 17 Pro . Running the Test After setting up, run the test. You may encounter issues if the application layout collapses in mobile view. For instance, if a form cannot be clicked due to a collapsed menu, you'll need to adjust your test: Use the await page.locator() method to interact with elements. Implement a toggle function to expand the menu before interacting with forms. Making Tests Compatible If you want your existing tests to work for both desktop and mobile views, you can use the test info object to conditionally execute code based on the project name: if (testInfo.projectName === 'MobileTest') { // Execute mobile-specific code } By following these steps, you can effectively run and adapt your tests for mobile emulation in Playwright.