Playwright UI – Part 1

Playwright team recently released a new version of the Playwright framework – version 1.32. This new release comes with a new feature – Playwright UI. Wonder what that is? Let’s talk about it a bit.

If you’ve worked with Cypress before, you’d know that once Cypress starts, there is a nice UI, where you can see the execution happening – even if the headless mode is enabled. This allows user to time-travel back to the execution,

This time-travel feature is really really helpful in case of any failure – user can go back to the execution flow and see where the failure happened and what failure happened.

How to enable Playwright UI

Since Playwright UI is available with v1.32, first of all make sure that your Playwright is updated to that version. It would be good to check in the package.json file that you’ve to check the version.

npm install @playwright/test

Once done, if you already have a sample script you can use that or, use this script

import { chromium, expect, test } from "@playwright/test";

test.use({ viewport: { width: 1400, height: 1000 } });
test("Launch the Selectors hub test page", async () => {
  const browser = await chromium.launch({
    headless: true,
  });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto("https://selectorshub.com/xpath-practice-page/");
  await page.waitForSelector(".dropbtn", {
    state: "visible",
  });

    // validate background-color
    
  const btn = await page.locator(".dropbtn");
  await page.waitForTimeout(2000);

  const color = await btn.evaluate((element) =>
    window.getComputedStyle(element).getPropertyValue("background-color")
  );

  await console.log(`${color}`);

  await expect(btn).toHaveCSS('background-color',color);

  // validate font-size

  const text = await page.locator("a[href='https://www.youtube.com/c/SelectorsHub?sub_confirmation=1'] >> nth=0");
  const textprop = await text.evaluate((element) =>
    window.getComputedStyle(element).getPropertyValue("font-size")
  );

  await console.log(`${textprop}`);

await expect(text).toHaveCSS('font-size',textprop);

  
  
});

To enable the UI for this script run this

npx playwright test <filename> --ui

For e.g, if you saved this with demo.spec.ts, then you can do

npx playwright test demo.spec.ts --ui

You can see the video – how the UI comes up and how you can use this to time travel back to the executions.

Now let’s go over the options for the UI that have been given

Toggle Options

At the top bar we have three options

1. Toggle Color Mode – The first option lets you select the mode – since my system is defaulted to dark, you can see the dark theme being applied. If you click on that, then the dark mode goes away and the normal white background will come.
2. Reload : Will reload all the test cases – if you add more tests to current script, then you can reload and it will add those in the run.
3. Toggle Output – If you click on this, then you will see the console output of the tests.

Filtering

Then below that pane, there is the filter option that allows you to filter tests from the pane using text or @tag. Below that search bar, you can see two options

1. Status – You can also filter the tests by their pass, fail or skipped status, Just select the checkbox that you want.
2. Projects – Basically which browser you want to select – you can choose from chromium, firefox or webkit. Not sure if this supports chrome as of now.

Run Tests

Now then you get the options to select for running the tests – there are three options

1. Run all tests
2. Stop tests
3. Watch all tests.

Actions and Metadata

If you see the left hand side of the panel, you will see two tabs – Actions and Metadata. Let’s see what information they hold.

Actions shows each and every step in the test that we have written – like when we create a new context, load the url and wait for something etc.

Metadata on the other hand – as its name suggests holds information about the metadata regarding the tests – total duration of tests, browser engine, user agent, platform where the tests are run, viewport information etc.

That’s enough for the first part. If you are someone who are not a reader, want a detailed breakdown in a video, this video by Koushik (Letcode by Koushik), will be good for you