I am writing a basic playwright project using typescript. I am trying to introduce a logger.ts that should handle creation of log files and logging any logger.info messages in the log file.

I tried below commands to generate the project and create playwright skeleton projects and using the example.spec.ts

npm install --save-dev playwright
npm install --save-dev @playwright/test
npm install --save-dev typescript@latest
npm init playwright@latest --force

When I try to import the logger file in example.spec.ts, it highlights below error in vscode.

Error: ENOENT: no such file or directory, stat '...\POC\logger-example\tests\logger'playwright

The directory structure is given below

I am providing the required code snippets, can anyone please help find a solution, where I can import custom utilities and use it in my playwright tests?

Package.json

    {
    "devDependencies": {
        "@playwright/test": "^1.40.1",
        "@types/node": "^20.10.1",
        "playwright": "^1.40.1",
        "typescript": "^5.3.2"
    },
    "scripts": {},
    "dependencies": {
        "winston": "^3.11.0"
    }
    }

tests/logger.ts

    
    import winston from "winston";
    import * as path from "path";
    import * as fs from "fs";

    // Logger START
    const logDir = "logs";
    const logFileName = "playwright-logger-test.log";

    if (!fs.existsSync(logDir)) {
    fs.mkdirSync(logDir);
    }
    const logger = winston.createLogger({
    transports: [
        new winston.transports.File({
        level: "error",
        filename: path.join(logDir, logFileName),
        format: winston.format.combine(
            winston.format.timestamp(),
            winston.format.json()
        ),
        handleExceptions: true,
        }),
        new winston.transports.File({
        level: "info",
        filename: path.join(logDir, logFileName),
        format: winston.format.combine(
            winston.format.timestamp(),
            winston.format.json()
        ),
        handleExceptions: true,
        }),
        new winston.transports.File({
        level: "warn",
        filename: path.join(logDir, logFileName),
        format: winston.format.combine(
            winston.format.timestamp(),
            winston.format.json()
        ),
        handleExceptions: true,
        }),
    ],
    });

    export default logger;
    // Logger END

tests/example.spec.ts

    import { test, expect } from '@playwright/test';
    import logger from './logger';

    test('has title', async ({ page }) => {
    logger.info(`Start "has title" test`);
    await page.goto('https://playwright.dev/');

    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);
    logger.info(`End "has title" test`);
    });

    test('get started link', async ({ page }) => {
    logger.info(`Start "get started link" test`);

    await page.goto('https://playwright.dev/');

    // Click the get started link.
    await page.getByRole('link', { name: 'Get started' }).click();

    // Expects page to have a heading with the name of Installation.
    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
    logger.info(`End "get started link" test`);
    });

Using node v14.15.0 and npx v7.5.4

Update It is an import error

It seems there is a bug with npx related to caching.

Reference: https://github.com/microsoft/playwright/issues/23387#issuecomment-1806309390

Here is how I fixed my issue.

1. Upgraded node version to 16.12.2

nvm use 16.12.2

2. Used below commands to regenerate the playwright example project

yarn add --dev playwright
yarn add --dev @playwright/test
yarn add --dev typescript@latest
yarn init playwright@latest --force

That's it, now it is able to import the tests\logger.ts and the log file is created as expected.