npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

indent-list-reporter

v1.1.1

Published

Playwright list reporter for terminal with colors and indentation'

Downloads

321

Readme

indent-list-reporter

Playwright list reporter with colorful terminal output and indentation

IMPORTANT NOTE:

Version 1.0.8 is with commonjs module system. Version 1.0.9 with es2017 module, and jest unit tests were migrated to vitest

Purpose:

  • I wanted to have a reporter that displays the tests in a hierarchical format with indentation and colorful terminal output, so that I could see right away the hierarchy of the tests without having to scroll horizontally and strain my eyes.
  • From the colors we can distinguish the different test states (passed, failed, skipped, etc.), and also by the indentation level, we can see all the tests inside a suite.
  • I also wanted to learn how to build a custom reporter for Playwright, and this was a good opportunity to do so.

Information:

Indent List Reporter is a reporter for Playwright that displays the list of tests in a hierarchical format with indentation. Colors are configurable by passing some options to the reporter. It is based on the list reporter but with a twist. It is a list reporter with indentation and colorful terminal output. It is build using the custom reporter API of Playwright.
Read more on how to set/build a custom reporter with Playwright here.

Getting Started

Installation

npm install indent-list-reporter --save-dev

Usage

With default options

The default options are:

{
  ignoreColors: false, 
  baseColors: {
    specFileNameColor: "cyan",
    suiteDescriptionColor: "cyan",
    testCaseTitleColor: "white"
  }
  environment: 'dev'
}

The available colors are:

export type ColorsAvailable = "black" | "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray";

Add the customer reporter to your playwright.config.ts file in the reporter array, like in the example below:

    export default defaultConfig({
      //...
      reporter: [['indent-list-reporter']],
      //...
    });

With custom color options

Example #1: If you want to ignore all colors, you can pass the ignoreColors: true option to the reporter. This will show the tests with white foreground color.

    export default defaultConfig({
      //...
      reporter: [['indent-list-reporter'], {
        ignoreColors: true,
      }],
      //...
    });

Example #2: If you want to change the colors of the reporter, you can pass the baseColors option to the reporter. This will change the colors of the reporter to the ones you specify. The background color is not yet configurable. For now the default background color of your terminal will be used.

    export default defaultConfig({
      //...
      reporter: [[
          "indent-list-reporter",
          {
            ignoreColors: false,
            baseColors: {
              specFileNameColor: "cyan",
              suiteDescriptionColor: "cyan",
              testCaseTitleColor: "white",
            },
            environment: "dev",
          },
        ],
      ],
      //...
    });

See how it looks

alt text

ISSUES

If you find any issues, please report them here Feel free to open any issues or feature requests, and I will try to address them as soon as possible.

NOTE

This is my first open-source project, and it might miss a lot of feature or have a lot of bugs(definitely). You can find here the list of issues and features that I am currently working on. I am open to any suggestions on how to improve this project, your input is very valuable to me. I am also open to any suggestions on how to improve the code, as I am still learning TypeScript and NodeJS. Also, open to any suggestion on best practices on open-source projects, documentation, etc.

LICENSE

This project is licensed under the MIT License.

ACKNOWLEDGEMENTS

CONTACT