Streamlining Automation Testing in Mobile with Playwright and TypeScript

Playwright is a versatile tool capable of handling both mobile and web applications, providing support for all major browsers. This flexibility allows developers and testers to gain insights into how a web application will look and behave across various screen sizes and under different lighting conditions.

It is important to note that while mobile device emulation in Playwright significantly extends test coverage, it does not replace the need for testing on real devices. Emulation offers a convenient way to perform preliminary checks and ensure that the application adapts well to different device configurations. However, for comprehensive testing, particularly for performance and specific hardware interactions, real device testing remains essential.

By leveraging Playwright’s capabilities, development and QA teams can ensure a more robust and user-friendly experience across a diverse range of devices, ultimately leading to higher quality web applications.

↪️Key Capabilities

Viewport Emulation:

Playwright provides developers with the ability to emulate the viewport sizes of various mobile devices, including both smartphones and tablets. This feature ensures that web applications are responsive and adapt seamlessly to different screen dimensions. By using Playwright’s viewport emulation, developers can catch and address potential issues related to layout and functionality on various devices, ensuring a consistent user experience across all platforms.

Color Scheme Validation:

With the increasing popularity of dark mode and other user-specific color preferences, Playwright’s mobile device emulation capabilities enable testers to validate how a web application’s design performs under different color schemes. This includes checking the consistency and accessibility of the application’s appearance in both light and dark modes. By doing so, developers can ensure that their applications provide a visually pleasing and user-friendly experience regardless of the user’s color scheme preference.

Geolocation, Time Zones, and Locales:

Playwright includes robust features to simulate geolocation, time zones, and locales, facilitating comprehensive testing scenarios. This capability allows developers to test how their web applications function across different geographic regions and time zones, ensuring correct behavior for users worldwide. For instance, by simulating different locales, testers can verify that date and time formats, language settings, and other region-specific features operate as expected. This comprehensive testing helps ensure that the application provides a seamless and accurate experience for users in different parts of the world.

Overall, Playwright’s extensive range of emulation capabilities significantly enhances the testing process, providing developers and testers with powerful tools to ensure their web applications deliver high-quality performance and user experiences across a variety of devices and settings.

Prerequisite Steps

Let’s create a Playwright script in TypeScript to automate the login process on the provided website using mobile device emulation (e.g., iPhone 11).

Initialize the Project:

• npm init -y
• npm install playwright typescript ts-node @types/node
• `npm` : Node Package Manager, a utility for managing JavaScript packages.
• `init` : This initializes a new Node.js project and generates a `package.json` file.

• `-y` : This option automatically responds “yes” to all prompts, accepting the default configurations.
• `npm install` : This command installs the listed packages and includes them as dependencies in your `package.json` file.

Create tsconfig.json:

Here’s a detailed explanation of each line of the above code:

• compilerOptions:

1. Contains various settings that tell the TypeScript compiler how to compile the code.

• target:

1. Specifies the version of JavaScript to output.

• Module:

1. Defines the module system to use in the output.

• outDir:

1. Directory where the compiled files will be placed.

• rootDir:

1. Directory containing the source TypeScript files.

• Strict:

1. Enables all strict type-checking options.

• esModuleInterop:

1. Ensures compatibility between CommonJS and ES modules.

• Include:

1. Specifies which files or directories to include in the compilation.

Test case Creation & Result:

Create the TypeScript Script:

Create a src directory and add a file named mobileTest.ts inside it with the following content:

Here’s a detailed explanation of each line of the above code:

• Import Modules

1. import { chromium, devices } from ‘playwright’;
2. chromium: This imports the Chromium browser from Playwright.devices: This imports predefined device descriptors (e.g., mobile devices) from Playwright.

• Define the Mobile Device

1. const iPhone11 = devices[‘iPhone 11’];iPhone11: This line assigns the predefined device descriptor for iPhone 11 to the variable iPhone11. The device descriptor includes information such as the viewport size, user agent, and other settings that emulate the device.

• Asynchronous Function

1. (async () => {
2. This starts an asynchronous function. The async keyword allows the use of await within the function, enabling asynchronous operations to be performed in a synchronous-looking manner.

• Launch Browser

1. const browser = await chromium.launch({ headless: false });
2. chromium.launch(): This launches an instance of the Chromium browser.
3. { headless: false }: The browser is launched in non-headless mode, meaning the browser window will be visible.

TO READ FULL BLOG

CLICK HERE