👀 Playwright Indent List Reporter

Do you ever find the need to 🌶️ up your command line interface? Well good news Syzana Bicaj, has released a npm package that allows you to customize your colors but also to indent the spec files in your terminal for easy reading!

In order to install the package with the default settings you will need to run the command from inside your playwright directory.

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

This will install the library, and from there you only need to update your playwright.config.ts file with the ["indent-list-reporter"]. My example below is using a ternary operator where I am first checking if the environment variable CI is true or undefined/false. If true the top line with the "?" gets run, if false (running the playwright command from my local machine) the "html" and "indent-list-reporter" reports will be used.

import { defineConfig } from "@playwright/test";

export default defineConfig<APIRequestOptions & TestOptions>({
  ...
  reporter: process.env.CI
    ? [["list"], ["html"], ["@currents/playwright"]]
    : [["html"], ["indent-list-reporter"]],
});

Once this is in place you can run your tests and see the beautiful results after the test run is complete. Yes, that is one drawback, the original list reporter is nice in that it will show each test as it completes, with the indent-list-reporter you will not be able to see the results of your tests (unless you leave the list reporter there as well) until after the run is complete. This is a slight tradeoff with using this reporter on its own.

You also have the option to change up the color scheme, within the list reporter array, you can add an object with new base colors. Check out the documentation for the different colors that are offered.

import { defineConfig } from "@playwright/test";

export default defineConfig<APIRequestOptions & TestOptions>({
  ...
  reporter: process.env.CI
    ? [["list"], ["html"], ["@currents/playwright"]]
    : [
        ["html"],
        [
          "indent-list-reporter",
          {
            baseColors: {
              specFileNameColor: "white",
              suiteDescriptionColor: "blue",
              testCaseTitleColor: "magenta",
            },
          },
        ],
      ],
  ...
});

The npm package can be found here

indent-list-reporter

Playwright list reporter for terminal with colors and indentation’. Latest version: 1.0.7, last published: 11 days ago. Start using indent-list-reporter in your project by running `npm i indent-list-reporter`. There are no other projects in the npm registry using indent-list-reporter.

npm

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.