Playwright Custom HTML Report - Build & Release NPM package

playwright, npm

Created byKoushik Chatterjee

Last updated 3/2025

English

What you'll learn

Build and Publish an NPM Package – Learn how to create, configure, and release an npm package using TypeScript and tsup.
Leverage Playwright for Custom HTML Reports – Utilize Playwright’s reporting features to generate detailed HTML test reports.
Design and Enhance Test Reports with Handlebars.js – Build a dynamic UI to display test results using Handlebars and vanilla JavaScript.
Automate and Streamline the Release Process – Understand versioning, packaging, and publishing best practices for a smooth npm release.

Course content

5 sections • 14 lectures • 4h 8m total length

Introduction11:18
Understanding npm Packages:
A Beginner's Guide In this video, we dive into the basics of npm packages, the building blocks of modern JavaScript development. Whether you're new to web development or just getting started with Node.js, this guide will help you understand what npm packages are, how they work, and why they're essential for your projects.
? Topics Covered:
What is an npm package?
The key components of an npm package (package.json, source code, dependencies, README, etc.)
Different types of npm packages (public, private, and local)
How to install and use npm packages in your projects
Versioning and publishing your own npm packages

? By the end of this video, you'll have a solid understanding of npm packages and how to leverage them to speed up your development process.
Project setup with tsup21:12
In this tutorial, I dive into the world of TypeScript bundling using tsup.
Learn how to configure tsup for your TypeScript projects, including generating .d.ts declaration files to provide robust type definitions for TypeScript consumers.
This video covers everything from setting up your tsup config file to understanding the significance of the dts option. Whether you're building a library or a standalone project, this guide will help you ensure compatibility across different environments with both CommonJS and ESM formats. Perfect for developers looking to enhance their TypeScript workflows!
How to utilize Playwright Reporter?18:42

How to get test results24:12
In this video, we'll learn how to get the test results and store it in an array.
Playwright custom reporter provides all the necessary information, we just have to figure it to store and display in the HTML format.
Generate HTML report18:44
In this tutorial, I'll walk you through how to use Handlebars (HBS) templates to create dynamic and customizable reports for your Playwright tests. Learn how to pass test statuses directly into your report, making it easier to visualize and track your test results. Whether you're building detailed test reports for your team or just want to improve your reporting workflow, this video will guide you step-by-step.
How to create dashboard18:41
In this tutorial, we'll walk through the process of building a custom dashboard using Handlebars.js (HBS) and Bulma CSS. Whether you're a beginner or looking to enhance your web development skills, this video covers everything you need to know to get started.

Set user info to the report17:42
In this video, we'll guide you through the process of integrating user data into a report using TypeScript. From setting up constructors and type definitions to adding dynamic elements to your report, this tutorial will help you master the fundamentals of TypeScript and report customization.
How to group tests & suites16:15
In this video, we'll explore how to effectively group test results in your reports. You'll learn how to understand the data flow and organize test suites, projects, and file paths for better readability and management of your test results.

Build UI to show suites & tests17:28
In this tutorial, we'll focus on building and enhancing the UI for grouped test results. Learn how to design an intuitive and organized user interface that displays your test specifications clearly, and see how to add titles and enhance the UI using content classes.
Display test list22:35
In this video, we'll learn how to display the test list in a beautiful way and we'll also learn how to add a few meta data to the test list.
Handlebar JSON helper18:37
In this video, we'll learn how to extrace the data and convert it into a json data with the hejp of handle bar json helper.
Design test details14:01
In this video, we'll learn how to use the JS string literal and design the test detail section.

Prepare for release19:24
In this video, we’ll guide you step-by-step through the process of preparing your TypeScript project for release. From setting up configurations to testing and fixing issues, this tutorial will help you confidently release your project into production.
Release NPM Package10:08
In this video, I’ll guide you how to build a node package using tsup and then publishing it to the npm js site.

Requirements

Basic JS/TS knowledge
familiarity with Playwright (Optional)

Description

Master NPM Package Development and Playwright Custom Reports

Are you a Test Automation Engineer or a JavaScript/TypeScript Developer looking to build and publish your own npm package? Do you want to customize Playwright test reports and make them visually insightful? If so, this course is for you!

In this hands-on course, you’ll learn how to build, package, and release an npm library while using Playwright’s custom HTML reporting as a real-world example. Whether you're an automation tester looking to enhance your reports or a developer aiming to publish your first npm package, this course provides practical, step-by-step guidance.

What You Will Learn

Create and set up an npm package using TypeScript and tsup
Leverage Playwright's reporting API to extract and format test results
Use Handlebars.js to dynamically generate and customize HTML reports
Design a dashboard to display test suites, cases, and execution details
Group and filter test results to improve report clarity
Prepare and publish your package to npm, following best practices
Automate versioning and releases for a seamless workflow

Who Should Take This Course?

Test Automation Engineers looking to enhance Playwright reports
JavaScript/TypeScript Developers interested in publishing npm packages
QA Engineers who want to build custom reporting solutions
Open-source enthusiasts eager to contribute to the npm ecosystem

This course is beginner-friendly, but some knowledge of JavaScript/TypeScript and Playwright will be helpful.

By the end of this course, you'll have a fully functional npm package that generates beautiful, customizable HTML reports—and you'll be ready to publish your own libraries to the world!

Who this course is for:

Test Automation Engineers
JS/TS Developers

Playwright Custom HTML Report - Build & Release NPM package

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 51min

Building the UI3 lectures • 1hr 2min

How to get user custom data?2 lectures • 34min

Designing the HTML reporter4 lectures • 1hr 13min

Publishing npm package2 lectures • 30min

Requirements

Description

Who this course is for: