Skip to main content

What is Playwright testing and some of its key features?

Playwright is a modern end‑to‑end testing framework developed by Microsoft. It supports multiple programming languages, including TypeScript, JavaScript, C#, and Java, and can run tests across all major modern browsers. Its flexibility and developer‑friendly features make it a compelling choice for UI automation.

Here is some core features that I find very useful when working with e2e test with Playwright:

1. Automatic test generation

Using the VS Code extension, you can start a recording session where a browser window opens and captures your interactions. As you click, type, and navigate, Playwright automatically writes the corresponding test code for you. After recording, all you need to do is refine the assertions. 

This feature dramatically speeds up test creation, especially for complex user flows.

2. Pick locator

When running your test in the browser, you can activate Pick Locator to visually select any element on the page. Playwright will instantly generate the correct locator for that element so that you can use in your code. This eliminates manual work finding right locators yourself  and helps ensure your selectors are stable and reliable.

3. Action and trace views

When executing tests, Playwright provides an Action tab that shows each step of the test. You can click on any action to inspect what happened at that moment. The Before and After views let you see the state of the page immediately before and after each step, making it easier to understand failures or unexpected behavior.

4. Set breakpoints for debugging

You can set breakpoints directly in your code, then run the test in debug mode. This allows you to pause execution, inspect variables, and step through the test just like you would with any other application code.

5. Headless vs. Headed Mode

Headless mode is typically used in CI pipelines, where the browser runs without a visible UI. 

Headed mode is ideal for debugging because you can watch the browser interact with the application in real time.

6. Trace Viewer for Deep Analysis

It provides a timeline of actions, snapshots, network logs, and more which give you a complete picture of what happened during the test run.


For more visual implementation you can check out Playwright quick start https://playwright.dev/docs/getting-started-vscode

Comments

Post a Comment

Popular posts from this blog

Declarative Programming in Angular with Async Pipe and shareReplay

A declarative approach is a way that focuses on writing code that specifies what the application should do, rather than detailing how it should be done. For example, with the async pipe in Angular, we don’t need to write code to manually subscribe to an Observable, handle its data, and update the view. Instead, we simply specify in the template that we want the data from the Observable using the async pipe. Angular handles all the underlying processes to retrieve and display the data It's often used in reactive programming with RxJS and Angular's built-in features, such as the async pipe. export class ProductComponent { product$ = this.productService.getProduct(); constructor(private productService: ProductService) {} } The product observable will hold the product data and the async pipe in the template will automatically subscribe and unsubscribe observable <div *ngIf="product$ | async as product"> <h1>{{ product.name }}</h1> <p>{{...
Post a Comment
Read more

Ensuring Data Integrity: The Role of Database Transactions

 1. What is database translation Database transactions are activities transferring, changing data from one consistent state to another consistent state for example in everyday life we make different kind of business transactions from buying products, changing or cancelling orders, buying tickets, etc. And all these activities involve the movement/transaction of data in the database. For example, consider a simple transaction of moving an amount of 5000 from one bank account to another. This transaction includes several steps: decrease the account balance by 5000, and then increase the other account balance by 50003. Each of these steps is a part of the transaction, and if any step fails, the entire transaction fails 2. Why it is crucial in reliable software systems? When it comes to business, whether it is personal or financial data, it is crucial to ensure the reliability and stability of data management. In our daily lives, we may frequently encounter errors related to database t...
Post a Comment
Read more

The Developer’s Guide to Clean Code: Tips and Techniques

What is clean code? Clean code is a term used to describe code that is easy to read, understand, and maintain. It is written in a way that makes it simple, concise, and expressive. Clean code follows a set of conventions, standards, and practices that make it easy to read and follow. Here are some signs indicating that the code is not clean: 1. Poor names The name is not clear to understand, meaningless, or misleading . It doesn't reveal the intention of what it want to achieve. Consider the following examples: SqlDataReader drl; int od; void Button1_Click(); Class Pages1 In the examples above, it’s challenging to get the purpose of drl, od, or what Button1_Click() does. To enhance clarity, we can rename these identifiers as follows: SqlDataReader dataReader/reader; int overdueDays; void CheckAvailability_Click(); Class ViewCustomerPage {} Ambiguous names int? incidentNameId for instance. incidentNameId lacks clarity because if it represents the ID of an incident, then the inclu...
Post a Comment
Read more