Playwright Debug flag compatibility

[inancgumus]

Playwright uses a DEBUG flag for enabling and/or filtering logs in a granular fashion like this:

DEBUG=pw:protocol
DEBUG=pw:api
DEBUG=pw:browser
DEBUG=pw:channel:command
...

We use XK6_BROWSER_LOG=debug|trace|... to enable logs that are equal to or below the specified level:

• This makes it harder to filter the logs (unless using a command-line filter like awk etc.).
• It's tedious to write XK6_BROWSER_LOG, longer and with underscores.
• We can also increase the PW compatibility by specifying the flag in the same tandem like: DEBUG=k6b:protocol.

[imiric]

I'm against changing this for a few reasons:

• DEBUG is a generic environment variable that might be set for other programs. Having to specify prefixes like k6b just adds noise that can be avoided by simply using a separate env var. We don't gain much by having compatibility with Playwright at this level.
• I much prefer the ability to set log levels globally than which components to enable debug for. Unless a notation like protocol(debug):browser(info) is adopted, which increases parsing complexity. DEBUG wouldn't make sense in that case, since you might want to make some components log only at error or warning level.
• Speaking of complexity, besides parsing the env var, we'd have to ensure this is supported by each component's logger.

So I wouldn't mind being able to (optionally) specify the log level of each component with something like XK6_BROWSER_LOG=cdp:info,browser:debug, but this is a level of flexibility we just don't need for the foreseeable future.

[inancgumus]

We can have it both:

• K6B=debug to enable debug-level for all components.
• K6B=cdp:info,browser:debug to enable info-level for CDP and debug-level for browser.

PS: It doesn't have to be XK6_BROWSER_LOG; my motivation was to keep it short. But I don't mind because I set a lot of aliases :)

[inancgumus]

I find PW debug output concise and you can easily see what's going on:

DEBUG=pw:browser

[chromium] › page/locator-misc-2.spec.ts:97:4 › should take screenshot
  pw:browser <launching> /Users/inanc/Library/Caches/ms-playwright/chromium-1005/chrome-mac/Chromium.app/Contents/MacOS/Chromium ... +0ms
  pw:browser <launched> pid=16295 +2ms
  pw:browser [pid=16295][err] objc[16296]: Class WebSwapCGLLayer is implemented in both .../libANGLE-shared.dylib (0x24542b1a8) and .../Libraries/libGLESv2.dylib (0x10abf14d0). One of the two will be used. Which one is undefined. +260ms
  pw:browser [pid=16295] <gracefully close start> +264ms
  pw:browser [pid=16295] <process did exit: exitCode=0, signal=null> +5ms
  pw:browser [pid=16295] starting temporary directories cleanup +0ms
  pw:browser [pid=16295] finished temporary directories cleanup +4ms
  pw:browser [pid=16295] <gracefully close end> +0ms

DEBUG=pw:channel:command

  pw:channel:command {
  pw:channel:command   id: 1,
  pw:channel:command   guid: 'browser-type@881f9febb883a66e9200050d3ab059a4',
  pw:channel:command   method: 'launch',
  pw:channel:command   params: {
  pw:channel:command     ignoreAllDefaultArgs: false,
  pw:channel:command     handleSIGINT: false,
  pw:channel:command     timeout: 0,
  pw:channel:command     headless: true,
  pw:channel:command     devtools: false
  pw:channel:command   }
  pw:channel:command } +0ms
  pw:channel:command {
  pw:channel:command   id: 2,
  pw:channel:command   guid: 'browser@eb614704cb6493253cb1de5b64a491fe',
  pw:channel:command   method: 'newContext',
  pw:channel:command   params: {
  pw:channel:command     noDefaultViewport: false,
  pw:channel:command     viewport: { width: 1280, height: 720 },
  pw:channel:command     locale: 'en-US'
  pw:channel:command   }
  pw:channel:command } +113ms
  pw:channel:command {
  pw:channel:command   id: 3,
  pw:channel:command   guid: 'browser-context@3f29dbc6097f6955f9388c9ef44a463a',
  pw:channel:command   method: 'setDefaultTimeoutNoReply',
  pw:channel:command   params: { timeout: 0 }
  pw:channel:command } +5ms
  pw:channel:command {
  pw:channel:command   id: 4,
  pw:channel:command   guid: 'browser-context@3f29dbc6097f6955f9388c9ef44a463a',
  pw:channel:command   method: 'setDefaultNavigationTimeoutNoReply',
  pw:channel:command   params: { timeout: 0 }
  pw:channel:command } +1ms
  pw:channel:command {
  pw:channel:command   id: 7,
  pw:channel:command   guid: 'browser-context@3f29dbc6097f6955f9388c9ef44a463a',
  pw:channel:command   method: 'newPage',
  pw:channel:command   params: undefined
  pw:channel:command } +0ms
  pw:channel:command {
  pw:channel:command   id: 8,
  pw:channel:command   guid: 'page@65cae755f93eb38dac66511a5bb6a766',
  pw:channel:command   method: 'setViewportSize',
  pw:channel:command   params: { viewportSize: { width: 500, height: 500 } }
  pw:channel:command } +142ms
  pw:channel:command {
  pw:channel:command   id: 9,
  pw:channel:command   guid: 'frame@3ed64c8740f0b3ea7c8cd9270e44335c',
  pw:channel:command   method: 'goto',
  pw:channel:command   params: { url: 'http://localhost:8907/grid.html', waitUntil: 'load' }
  pw:channel:command } +3ms
  pw:channel:command {
  pw:channel:command   id: 10,
  pw:channel:command   guid: 'frame@3ed64c8740f0b3ea7c8cd9270e44335c',
  pw:channel:command   method: 'evaluateExpression',
  pw:channel:command   params: {
  pw:channel:command     expression: '() => window.scrollBy(50, 100)',
  pw:channel:command     isFunction: true,
  pw:channel:command     arg: { value: [Object], handles: [] }
  pw:channel:command   }
  pw:channel:command } +31ms
  pw:channel:command {
  pw:channel:command   id: 11,
  pw:channel:command   guid: 'frame@3ed64c8740f0b3ea7c8cd9270e44335c',
  pw:channel:command   method: 'waitForSelector',
  pw:channel:command   params: {
  pw:channel:command     selector: '.box:nth-of-type(3)',
  pw:channel:command     strict: true,
  pw:channel:command     timeout: 0,
  pw:channel:command     state: 'attached'
  pw:channel:command   }
  pw:channel:command } +5ms
  pw:channel:command {
  pw:channel:command   id: 12,
  pw:channel:command   guid: 'handle@ebc6b14278e5c773597c460da21db3b7',
  pw:channel:command   method: 'screenshot',
  pw:channel:command   params: { timeout: 0 }
  pw:channel:command } +17ms
  pw:channel:command {
  pw:channel:command   id: 13,
  pw:channel:command   guid: 'handle@ebc6b14278e5c773597c460da21db3b7',
  pw:channel:command   method: 'dispose',
  pw:channel:command   params: undefined
  pw:channel:command } +59ms
  pw:channel:command {
  pw:channel:command   id: 14,
  pw:channel:command   guid: 'browser-context@3f29dbc6097f6955f9388c9ef44a463a',
  pw:channel:command   method: 'close',
  pw:channel:command   params: undefined
  pw:channel:command } +9ms
  pw:channel:command {
  pw:channel:command   id: 15,
  pw:channel:command   guid: 'browser@eb614704cb6493253cb1de5b64a491fe',
  pw:channel:command   method: 'close',
  pw:channel:command   params: undefined
  pw:channel:command } +5ms

DEBUG=pw:channel:response

  pw:channel:response {
  pw:channel:response   id: 1,
  pw:channel:response   result: { browser: { guid: 'browser@4327049fe614083932d7aad2418de2da' } }
  pw:channel:response } +0ms
  pw:channel:response {
  pw:channel:response   id: 2,
  pw:channel:response   result: {
  pw:channel:response     context: { guid: 'browser-context@5ca890176a7a58268e8fc6735cba72ac' }
  pw:channel:response   }
  pw:channel:response } +14ms
  pw:channel:response { id: 3 } +4ms
  pw:channel:response { id: 4 } +1ms
  pw:channel:response { id: 5, result: { artifact: undefined, sourceEntries: [] } } +0ms
  pw:channel:response { id: 6 } +0ms
  pw:channel:response {
  pw:channel:response   id: 7,
  pw:channel:response   result: { page: { guid: 'page@1a0f020621f9a79cff4ed74bbafb65fe' } }
  pw:channel:response } +175ms
  pw:channel:response { id: 8 } +21ms
  pw:channel:response {
  pw:channel:response   id: 9,
  pw:channel:response   result: { response: { guid: 'response@6722dd7050b16d6c4720557fc08c62f6' } }
  pw:channel:response } +55ms
  pw:channel:response { id: 10, result: { value: { v: 'undefined' } } } +5ms
  pw:channel:response {
  pw:channel:response   id: 11,
  pw:channel:response   result: { element: { guid: 'handle@f917fdf0f6ff8377ac196ab5ce3038c2' } }
  pw:channel:response } +24ms
  pw:channel:response {
  pw:channel:response   id: 12,
  pw:channel:response   result: {
  pw:channel:response     binary: 'iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAZRJREFUaIHt2L9LAmEcx/H3hYuDBGHWVIM1ZCBEkgi1RC6B0A+QgoigCGzRSfoLIhcHwemagoYrdEhySWhqcrcpC7TAW4IWRxsCQQoauief5Puejju4z72WgzvDsqwOA5ALID7j7/dz/KrLh0eG+v0QTiUQ3RKIbglEtwSiWwLRLYHolkB0SyA/dXxxhREMYQRDzO8dUmm9qZoCFEFmt3bJZDKk02lM06TZbBKNRik9v6qYAxRArp9eqNVqFAoFMjtxDsJztCplAoEApmk6PdfNcYjb7cbn87ExPdlzPhKJOD3Vk+OQ6PgIrUr5y/lSqeT0VE9/8tZa2E9g2zapVErZhnLIYiJJtVolm82yPDqsbMel7M6Afy1OvV4nn89ztBRWOaUOYgRDABSLRdanJlTNdFMCGVtZxePx8H5/p+L23+Y45PTmFtu2AUiendNut7vXvF4vJ9ubTk8CCiCNRqN7nMvleq7FYjFADcSwLKsjP7E1SiC6JRDdEohuCUS3BKJbAtEtgeiWQHRrYCAu+PxU/O99AOYVW9j6+fWpAAAAAElFTkSuQmCC'
  pw:channel:response   }
  pw:channel:response } +68ms
  pw:channel:response { id: 13 } +1ms
  pw:channel:response { id: 14 } +13ms
  pw:channel:response { id: 15 } +11ms

DEBUG=pw:channel:event

pw: channel:event {
    pw: channel:event   guid: '',
        pw: channel:event   method: '__create__',
            pw: channel:event   params: {
                pw: channel:event     type: 'BrowserType',
                    pw: channel:event     initializer: {
                        pw: channel:event       executablePath: '/Users/inanc/Library/Caches/ms-playwright/chromium-1005/chrome-mac/Chromium.app/Contents/MacOS/Chromium',
                            pw: channel:event       name: 'chromium'
                        pw: channel: event
                    },
                pw: channel:event     guid: 'browser-type@a203ce0833da32765cfccaed98afd856'
                pw: channel: event
            }
    pw: channel: event
} +0ms
pw: channel:event {
    pw: channel:event   guid: '',
        pw: channel:event   method: '__create__',
            pw: channel:event   params: {
                pw: channel:event     type: 'BrowserType',
                    pw: channel:event     initializer: {
                        pw: channel:event       executablePath: '/Users/inanc/Library/Caches/ms-playwright/firefox-1323/firefox/Nightly.app/Contents/MacOS/firefox',
                            pw: channel:event       name: 'firefox'
                        pw: channel: event
                    },
                pw: channel:event     guid: 'browser-type@ef029105161de4508d7ec96e0ce70afa'
                pw: channel: event
            }
    pw: channel: event
} +1ms
...

DEBUG=pw:protocol

 pw:protocol SEND ► {"id":1,"method":"Browser.getVersion"} +0ms
  pw:protocol ◀ RECV {"id":1,"result":{"protocolVersion":"1.3","product":"HeadlessChrome/102.0.5005.40","revision":"@43b08a5db3a57ae8edec5df3fcf5301affeaa3f8","userAgent":"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/102.0.5005.40 Safari/537.36","jsVersion":"10.2.154.3"}} +94ms
  pw:protocol SEND ► {"id":2,"method":"Target.setAutoAttach","params":{"autoAttach":true,"waitForDebuggerOnStart":true,"flatten":true}} +0ms
  pw:protocol ◀ RECV {"id":2,"result":{}} +0ms
  pw:protocol SEND ► {"id":3,"method":"Target.createBrowserContext","params":{"disposeOnDetach":true}} +2ms
  pw:protocol ◀ RECV {"id":3,"result":{"browserContextId":"A05F5E2B1D35131C5B4E6C073D57C901"}} +0ms
  pw:protocol SEND ► {"id":4,"method":"Browser.setDownloadBehavior","params":{"behavior":"allowAndName","browserContextId":"A05F5E2B1D35131C5B4E6C073D57C901","downloadPath":"/var/folders/m4/qbbxcxxx2h3b_ydm_6j6vhr40000gn/T/playwright-artifacts-xsHDKG","eventsEnabled":true}} +1ms
  pw:protocol ◀ RECV {"id":4,"result":{}} +1ms
  pw:protocol SEND ► {"id":5,"method":"Target.createTarget","params":{"url":"about:blank","browserContextId":"A05F5E2B1D35131C5B4E6C073D57C901"}} +6ms
  pw:protocol ◀ RECV {"method":"Target.attachedToTarget","params":{"sessionId":"F1B0A0BB744B458BD7F7FAC427629405","targetInfo":{"targetId":"3AC3A51188B9A05B88DDAF704B29BC5B","type":"page","title":"","url":"","attached":true,"canAccessOpener":false,"browserContextId":"A05F5E2B1D35131C5B4E6C073D57C901"},"waitingForDebugger":true}} +7ms
...