how to integrate ngx-logger into playwright

Question

I'm new in TS & angular. Now I have a legacy playwright project, which I'd like to use ngx-logger for logging.

According to many ngx-logger tutorials, I know there might be 3 steps to integrate:

install ngx-logger

npm install --save ngx-logger

import the library in the root module, i.e., app.module.ts

import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';

import LoggerModule.forRoot in your application module. This is where we can configure the logger:

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    LoggerModule.forRoot({
      serverLoggingUrl: 'http://localhost:4201/', // Replace with YOUR API
      level: NgxLoggerLevel.TRACE,
      serverLogLevel: NgxLoggerLevel.ERROR,
      disableConsoleLogging: false
    })
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

So finally, we can start logging anywhere in the application:

export class AppComponent {
  constructor(private logger: NGXLogger) {
    this.logger.debug("Debug message");
    this.logger.info("Info message");
    this.logger.log("Default log message");
    this.logger.warn("Warning message");
    this.logger.error("Error message");
  }
}

However, I'm stuck in step 2&3, because I don't know where to setup these in a playwright project.

In my playwright project, I only have config files like: ~/playwright.config.ts ~/src/config/launch.config.ts ~/src/config/testrunner.config.ts

none of them contains @NgModule I could inject the codes.

Can anyone give me some hints with how to proceed?

Thank in advance.

package.json

{
  "name": "portal-test",
  "version": "0.0.0",
  "private": true,
  "description": "Portal Test Automation Suite",
  "homepage": "./",
  "dependencies": {
    "dotenv": "^16.0.0",
    "eml-parser": "^1.0.6",
    "expect-playwright": "^0.7.1",
    "moment": "^2.29.4",
    "ngx-logger": "^5.0.11",
    "npm": "^7.19.1",
    "path": "^0.12.7",
    "pdf.js-extract": "^0.1.5",
    "pdfreader": "^1.2.11",
    "playwright-core": "^1.15.2",
    "request-promise": "^4.2.6",
    "ts-node": "^10.3.0",
    "typescript": "^4.4.3",
    "yarn": "^1.22.10"
  },
  "scripts": {
    "compile": "npx tsc --incremental -p tsconfig.json",
    "test": "CI_TEST_ENV=uat npx playwright test --config=src/config/testrunner.config.ts --headed",
    "test-local": "CI_TEST_ENV=local npx playwright test --config=src/config/testrunner.config.ts --headed",
    "test-local-headless": "CI_TEST_ENV=local npx playwright test --config=src/config/testrunner.config.ts",
    "test-dev": "CI_TEST_ENV=dev npx playwright test --config=src/config/testrunner.config.ts --headed",
    "test-uat": "CI_TEST_ENV=uat npx playwright test --config=src/config/testrunner.config.ts --headed"
  },
  "devDependencies": {
    "@playwright/test": "^1.28.1",
    "playwright": "^1.15.2"
  },
  "extends": []
}

how to integrate ngx-logger into playwright

0 Answers0