How to log detailed output log for playwright tests while running in CI

I would like to output detailed playwright tests while running in CI using github actions. Following is my playwright.yml file.

Something like this: jobSearch.spec.js:39:3 › Search functionality › Click on All Work types and click on Full time check box

Can someone please advise how can we get logs for the detailed test run in ci ?

name: Playwright e2e Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: |
        npx playwright test 2>&1 | while IFS= read -r line; do
          echo "$line"
        done
    - uses: actions/upload-artifact@v4
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Current output log for tests in CI:

Running 10 tests using 1 worker
What is the count we getting::19
·What is the count we getting::9
·Option text ::Full time
·Button text: SEEK
·Button text: Sign in
·What is the count we getting::19
·What is the count we getting::9
·Option text ::Full time
·Button text: SEEK
·Button text: Sign in

Sample test:

// SearchBoxPage class and methods

class SearchBoxPage {

    constructor(page) {
        this.page = page;
        this.moreOptionsLocator = 'button[data-automation="moreOptionsButton"] span>span';
        this.searchWorkTypesLocator = 'label[data-automation="toggleWorkTypePanel"]';
        this.searchWorkTypesOptionLocator = 'div[data-automation="refineWorkType"] ul > li > span > a span';
        this.selectedWorkTypeLocator = 'label[data-automation="toggleWorkTypePanel"] div > span > span span'
    }

  
    async getWorkTypesDropdown() {
        const workTypesDropdown = await this.page.locator(this.searchWorkTypesLocator);
        return workTypesDropdown;
    }

    async getWorkTypesOption(optiontext) {
        const element = `${this.searchWorkTypesOptionLocator}:text("${optiontext}")`;
        const option = await this.page.locator(element);
        return option;
    }

    async getMoreOptionsButton() {
        const element = `${this.moreOptionsLocator}:text("More options")`;
        const moreOptionsBtn = await this.page.locator(element);
        await moreOptionsBtn.click();
    }

    async getSelectedWorkTypeOption() {
        const workTypeOption = await this.page.locator(this.selectedWorkTypeLocator);
        const textValue = workTypeOption.textContent();
        return textValue;
    }

}

module.exports = SearchBoxPage;

//jobSearch.spec.js

 test('Click on All Work types and click on Full time check box', async ({ page }) => {
    const searchPage = new SearchBoxPage(page);
    await searchPage.getMoreOptionsButton();
    const workTypesBox = await searchPage.getWorkTypesDropdown();
    await workTypesBox.click({ force: true });
    const workTypesOption = await searchPage.getWorkTypesOption("Full time");
    await workTypesOption.click();
    const workTypeText = await searchPage.getSelectedWorkTypeOption();
    console.log("Option text ::"+workTypeText);
    expect(workTypeText).toContain("Full time");
  });

playwright.config.js

// @ts-check
const { defineConfig, devices } = require('@playwright/test');

/**
 * @see https://playwright.dev/docs/test-configuration
 */
module.exports = defineConfig({
  testDir: './tests',
  /* Run tests in files in parallel */
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: 'https://www.seek.com.au/',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
    screenshot: 'only-on-failure', // Capture screenshots only on test failure
    screenshotPath: 'tests/screenshots/',
  },

  /* Configure projects for major browsers */
  projects: [
    /* Test against branded browsers. */
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' },
    },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],
});

Your playwright.config.js is set to reporter: 'html' regardless of environment.

Change that to 'list' in CI:

module.exports = defineConfig({
  // ...

  reporter: process.env.CI ? 'list' : 'html',

  // ...
});

See the docs for CI reporting.