Playwright 101: Beginner’s Guide.

Setting Up, Writing Tests and Creating a Framework.

Playwright Introduction

Playwright is an open-source testing library developed using TypeScript by Microsoft. As a robust and versatile tool, Playwright allows developers and testers to conduct end-to-end testing of web applications efficiently. Leveraging the capabilities of TypeScript, Playwright offers a seamless and user-friendly experience for creating robust test suites.

Comparison of Playwright and Cypress

Both Playwright and Cypress are well-known testing tools, yet they have differences. Here are some variations:

• Browser Support

Cypress support Chrome, Electron and Microsoft Edge by default. limited support for the browsers.

Playwright support Chrome, Firefox, WebKit (Safari) and Microsoft Edge.

• Two- Factor Authentication (2FA) Bypass

Cypress may have limitation with 2FA bypass since its run tests in its own container & handles browsers differently.

Playwright can bypass 2fa as its interacts with actual browser & can handle additional security measures.

• Browser Behavior’s

Cypress runs tests in a separate container with its own certificates and configurations.

Playwright interacts with the actual browser and provides a more realistic testing environment.

• Parallel Testing

Cypress limited bult in parallel testing support

Playwright has built in support for parallel testing across multiple browsers

• Wait and Synchronization

Cypress has basic waiting mechanism but good compare to selenium still, may require additional customization for more complex scenario.

Playwright provides more advanced wait & synchronization mechanism.

e.g., waiting network for idle

Advantages of Playwright

1. Cross-Browser Support: Playwright supports multiple browsers, including Chrome, Firefox, WebKit (Safari), and Microsoft Edge. This allows you to run tests on different browsers easily, ensuring your web application works consistently across various environments.
2. Automating Complex Scenarios: Playwright can handle more complex web application scenarios, such as file downloads, handling browser dialogs, and interacting with web components like iframes and shadow DOM elements.
3. Speed and Performance: Playwright is designed for speed and improved performance. It can execute tests faster, making the testing process more efficient.
4. Parallel Testing: Playwright has built-in support for parallel testing, allowing you to run tests concurrently across multiple browser instances, which can significantly reduce test execution time.
5. Headless and Headful Mode: Playwright supports both headless (no GUI) and headful (with GUI) modes, giving you the flexibility to choose the appropriate mode based on your testing needs.
6. Mobile Device Emulation: Playwright allows you to emulate mobile devices and test your web application’s responsiveness and behavior on different screen sizes.
7. Support for Multiple Programming Languages: Playwright offers bindings for various programming languages, including JavaScript, TypeScript, Python, and C#, making it accessible to developers from different tech stacks.
8. Robust Wait and Synchronization Mechanisms: Playwright provides advanced wait and synchronization mechanisms, ensuring that your tests interact with the web application at the right moments, improving test reliability.
9. Community and Support: Playwright has an active community and is actively maintained by Microsoft, which means you can find resources, documentation, and community support to help you get started and resolve any issues you encounter.

Setting up the Playwright Environment

Setting up a Playwright environment is easy. Here are the steps:

1.Install Node.js and set “NODE_HOME” environmental variable.
2.Create a new Playwright working directory.
3.Navigate to the working directory in the terminal.
4.Run “npm init playwright@latest” to initialize the project.

Here’s an example of a Playwright Script:

import { test, expect } from "@playwright/test";
import commons from "../supports/commons";

test.beforeEach(async ({ page }) => {
  const common = new commons(page);
  await common.login()
})

test("Search System Users", async ({ page }) => {
  const common = new commons(page);
  await common.searchSystemUsers();
});

Few Playwright Commands:

• Running the Tests

1. npx playwright test - run all tests
2. npx playwright test Login.spec.ts - run a specific test
3. npx playwright test Login.spec.ts --project chromium --headed - run a specific test with UI with specific browser

• Report Generation

1. npx playwright show-report - to view the report

Page Object Model in Playwright

The Page Object Model (POM) is a design pattern for organizing test code in a way that makes it easier to maintain and reuse. In Playwright, the POM can be implemented using custom commands and page objects. Here’s an example of how to implement the POM in Playwright:

1. Create a new folder called “supports” in the root of your project.
2. Create a new file in the “supports” folder called “commons.ts”.
3. In “commons.ts”, create a new class called “commons”.
4. Add methods to the “commons” class for locating and interacting with the elements.
5. Under “test” folder create a script “Login.spec.ts”
6. In “Login.spec.ts” here u can create an object of commons page and access methods to the script.

Here’s an example of how the “commons.ts” file might look:

const { test, expect } = require("@playwright/test");
import { Page } from "@playwright/test";
const data = require("../fixtures/testData.json");

class commons {
    page: Page;

    constructor(page: Page) {
        this.page = page;
    }

    public async login() {
        await this.page.goto("/");//baseUrl defined under playwright.config.ts
        await this.page.getByPlaceholder('Username').click();
        await this.page.getByPlaceholder('Username').fill(data.Username);
        await this.page.getByPlaceholder('Password').click();
        await this.page.getByPlaceholder('Password').fill(data.Password);
        await this.page.getByRole('button', { name: 'Login' }).click();
        await expect(this.page).toHaveTitle(/OrangeHRM/);
    }
}
export default commons;

And here’s an example of how the “Login.spec.ts” file might look:

import { test, expect } from "@playwright/test";
import commons from "../supports/commons";


test("Login to HRM Dashboard", async ({ page }) => {
    const common = new commons(page);
    await common.login()
})

Creating a Framework

Creating a Playwright framework involves organizing your test code, defining reusable functions, and structuring the project to facilitate easy maintenance and scalability.

Beginner-level Framework

Create a folder structure to organize your tests, page objects, utilities, and other resources. A common structure could be,

├── tests (to store your test scripts)
│   ├── login.spec.ts
│   ├── dashboard.spec.ts
│   └── ...
├── pages (to store your web elements and methods relevent to your scripts)
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
│   └── ...
├── supports (to store Utill files, and common files)
│   ├── commons.ts
│   └── ...
├── fixtures (to store test data files)
│   ├── testData.json
│   ├── Excel.xls
│   └── ...
└── playwright.config.ts
└── tsconfig.json
└── package-lock.json
└── package.json

This is a basic outline for creating a beginner-level Playwright framework. Depending on your project’s requirements, you can add more advanced features like test reporting, data-driven testing, parallel execution, etc.

https://playwright.dev/docs/intro — Playwright Documentation

e2e testing with Playwright | OD111 by Microsoft Developer

Conclusion

In Summary, Playwright is a powerful end-to-end testing framework developed by Microsoft. It offers developers a simple and effective approach to creating and executing tests. With its distinctive features like automated waiting, real-time reloads, and powerful debugging tools, Playwright has become a popular choice among engineers for web application testing.

You’ve reached the end of the article. Here’s a sample project to begin your journey with Playwright. Try cloning this repository to your machine, learn, and contribute to the open-source community.

https://github.com/Malitthh/Hacktoberfest-Playwright-Automation.git