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

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

Date and Time in .NET: DateTime, DateTimeOffset, TimeZoneInfo, DateOnly, TimeOnly, and TimeSpan

What is UTC UTC (Coordinated Universal Time) is the world’s primary time standard used to regulate clocks and time zones. It serves as the reference point for civil time worldwide, ensuring that all local times are defined by their offset from UTC. DateTime The DateTime class provides a way to work with dates and times without including an offset. This approach can reduce a certain level of accuracy when dealing with time zones. For example, calling DateTime.Now returns the current date and time based on your computer’s local time zone. DateTime.Now gives you the local time, while DateTime.UtcNow returns the universal coordinated time (UTC). You typically use DateTime when you only need to track the date and time itself, without worrying about time zones. This is suitable for scenarios such as birthdays, deadlines, or local schedules, especially when your application is used primarily within a single time zone. The DateTime class also includes a Kind property, which provides limited in...
Post a Comment
Read more