[Feature]: if user select test.only testcase then it should be display test.only testcase in UI mode

[bhushantbn]

🚀 Feature Request

if the user selects test. only test spec file and then execute a particular spec file then it should be a display test. only test case in UI mode.

Example

For example if the user selects test. only test cases and execute UI mode using the command line should display only selected cases the user selects. as per the mentioned code block below:

import { test, expect } from "@playwright/test";
import { globalSetup } from "../utils/globalSetup.js";

const webUrl = process.env.WEB_URL?.split(",")[1];

test.beforeEach(async ({ page }) => {
  await page.goto(webUrl);
  const password = page.locator("#password");
  await password.fill(process.env.SITE_PWD);
  await page.getByRole("button", { name: "Enter" }).click();
});
test.afterEach(async ({ page }) => {
  await page.close();
});

test.describe("CSS Testcases for whatsapp contact app", () => {
  test("Check WhatsAPP ICON is visible in desktop view", async ({ page }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const whatsAppLocator = page.locator("#mainiconbtn");
    await expect(whatsAppLocator).toBeVisible();
  });
  test("Check WhatsAPP ICON is visible in mobile view", async ({ page }) => {
    page.setViewportSize({ width: 360, height: 640 });
    const whatsAppLocator = page.locator("#mainiconbtn");
    const textlocator = page.locator("#whatsappText");
    await expect(whatsAppLocator).toBeInViewport();
    await expect(textlocator).toBeHidden();
  });

  test("Check WhatsAPP ICON Hover Text", async ({ page }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const textlocator = page.locator("#whatsappText");
    const whatsAppLocator = page.locator("#mainiconbtn");
    await whatsAppLocator.hover();
    await expect(textlocator).toBeVisible();
    expect(await textlocator.textContent()).toBe("Get In Touch");
  });
  test("Check WhatsAPP ICON background color in desktop view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    let rgbColor = convertHexToRGB("#4cc759");
    const selector = await page.waitForSelector("#mainiconbtn");
    const computedStyle = await selector.evaluate(() => {
      const element = document.querySelector("#mainiconbtn");
      return getComputedStyle(element).backgroundColor;
    });
    expect(computedStyle).toBe(rgbColor);
  });
  test("Check WhatsAPP ICON background color in Mobile view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 360, height: 640 });
    let rgbColor = convertHexToRGB("#4cc759");
    const selector = await page.waitForSelector("#mainiconbtn");
    const computedStyle = await selector.evaluate(() => {
      const element = document.querySelector("#mainiconbtn");
      return getComputedStyle(element).backgroundColor;
    });
    expect(computedStyle).toBe(rgbColor);
  });
  test("Check WhatsAPP Icon color in desktop view", async ({ page }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    let rgbColor = convertHexToRGB("#f03838");
    const selector = await page.waitForSelector("i.fa.fa-whatsapp");
    const computedStyle = await selector.evaluate(() => {
      const element = document.querySelector("i.fa.fa-whatsapp");
      return getComputedStyle(element).color;
    });
    expect(computedStyle).toBe(rgbColor);
  });
  test("Check WhatsAPP Icon color in Mobile view", async ({ page }) => {
    page.setViewportSize({ width: 360, height: 640 });
    let rgbColor = convertHexToRGB("#f03838");
    const selector = await page.waitForSelector("i.fa.fa-whatsapp");
    const computedStyle = await selector.evaluate(() => {
      const element = document.querySelector("i.fa.fa-whatsapp");
      return getComputedStyle(element).color;
    });
    expect(computedStyle).toBe(rgbColor);
  });
  test("Check Close button ICON visible or not in desktop view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const selector = page.locator("i.fa.fa-close");
    await expect(selector).toBeVisible();
  });
  test("Check Close button ICON visible or not in Mobile view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 360, height: 640 });
    const selector = page.locator("i.fa.fa-close");
    await expect(selector).toBeVisible();
  });
  test("Check Close button ICON Click in desktop view", async ({ page }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const selector = page.locator("i.fa.fa-close");
    await expect(selector).toBeVisible();
  });
  test("Check Close button ICON Click in Mobile view", async ({ page }) => {
    page.setViewportSize({ width: 360, height: 640 });
    const selector = page.locator("i.fa.fa-close");
    await expect(selector).toBeVisible();
  });
  test.only("Check Whatsapp Box Visible or not in desktop view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const selector = page.locator("#btnbox");
    await expect(selector).toBeVisible();
  });
  test.only("Check Whatsapp Box Visible or not in Mobile view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 360, height: 640 });
    const selector = page.locator("#btnbox");
    await expect(selector).toBeVisible();
  });
  test.only("Check Whatsapp Box close button is Clickable or not in desktop view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 1920, height: 1080 });
    const selector = page.locator("#btnbox");
    await selector.click()
  });
  test.only("Check Whatsapp Box close button is Clickable or not in Mobile view", async ({
    page,
  }) => {
    page.setViewportSize({ width: 360, height: 640 });
    const selector = page.locator("#btnbox");
    await selector.click()
  });
});

npx playwright test example.spec.ts --ui

Motivation

It would be helpful for better understanding because the user only runs those tests that are selected by her/him.

This is my suggestion. I want to contribute more to the playwright community in the Future.

Happy Playwright Testing !!!

Thanks!!!

[bhushantbn]

Currently all test cases are visible in UI Mode

[bhushantbn]

test.describe.only('focused group', () => {
  test('in the focused group', async ({ page }) => {
    // This test will run
  });
});
test('not in the focused group', async ({ page }) => {
  // This test will not run
});

I have also suggest UI mode should work with test.describe.only function group test as well. when user switching on UI mode for group test. If feasible.