Merge pull request #165 from devoxa/console-messages

kodiakhq[bot] · web-flow · commit fde5d4c1ecf2 · 2024-05-08T19:28:37.000Z
Add captureConsoleMessages helper
diff --git a/README.md b/README.md
@@ -120,6 +120,17 @@ await removeLocalStorageItem(page, key)
 
 Remove a local storage item.
 
+### Console Messages
+
+```ts
+const getConsoleMessages = captureConsoleMessages(page)
+// ... do things here ...
+expect(getConsoleMessages()).toEqual([])
+expect(getConsoleMessages(['warning', 'error'])).toEqual([])
+```
+
+Capture the console messages of the page for later assertions.
+
 ### Matchers
 
 > **Note:** These functions escape special regular expression characters, so they are safe to use
@@ -213,6 +224,9 @@ WaitForNetworkIdleDefaultOptions.minIdleTime = 500
 
 Set the global default options for all `*waitForNetworkIdle` functions.
 
+Keep in mind that test files run independently from the setup, so you have to call this in a helper,
+that is imported into all test files.
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
diff --git a/src/captureConsoleMessages.ts b/src/captureConsoleMessages.ts
@@ -0,0 +1,36 @@
+import { ConsoleMessage, Page } from '@playwright/test'
+
+const CAPTURED_TYPES = ['debug', 'log', 'info', 'warning', 'error'] as const
+type CapturedConsoleMessageType = (typeof CAPTURED_TYPES)[number]
+
+export interface CapturedConsoleMessage {
+  /** The type of the captured console message (e.g. "info" or "warning"). */
+  type: CapturedConsoleMessageType
+
+  /** The list of arguments passed to the console function call. */
+  args: Array<unknown>
+}
+
+/** Capture the console messages of the page for later assertions. */
+export function captureConsoleMessages(page: Page) {
+  const messages: Array<CapturedConsoleMessage> = []
+
+  async function onConsole(message: ConsoleMessage) {
+    const type = message.type() as CapturedConsoleMessageType
+    if (!CAPTURED_TYPES.includes(type)) return
+
+    const args = []
+    for (const arg of message.args()) {
+      args.push(await arg.jsonValue())
+    }
+
+    messages.push({ type, args })
+  }
+
+  page.on('console', onConsole)
+
+  return (types?: Array<CapturedConsoleMessageType>) => {
+    if (!types) return messages
+    return messages.filter((message) => types.includes(message.type))
+  }
+}
diff --git a/src/index.ts b/src/index.ts
@@ -7,3 +7,4 @@ export * from './matchers'
 export * from './performanceMetrics'
 export * from './retryOnError'
 export * from './waitForNetworkIdle'
+export * from './captureConsoleMessages'
diff --git a/test-examples/static/accessible.html b/test-examples/static/accessible.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html lang="en">
   <head>
     <title>Hello world</title>
diff --git a/test-examples/static/async-render.html b/test-examples/static/async-render.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <div id="foo">Bar</div>
diff --git a/test-examples/static/copy-to-clipboard.html b/test-examples/static/copy-to-clipboard.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <button onclick="copyToClipboard('Hello World')">Copy</button>
diff --git a/test-examples/static/de54bb36-b1c1-4028-8cbe-57fa24f99622/edit.html b/test-examples/static/de54bb36-b1c1-4028-8cbe-57fa24f99622/edit.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <h1>This is an example for testing.</h1>
diff --git a/test-examples/static/delayed-console.html b/test-examples/static/delayed-console.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+  <body>
+    <script>
+      function sleep(ms) {
+        return new Promise((resolve) => setTimeout(resolve, ms))
+      }
+
+      async function main() {
+        console.log('0')
+
+        await sleep(500)
+
+        console.log('1')
+        console.warn('2')
+        console.error('3')
+        console.debug('4', { foo: { bar: 'baz', boz: 12 } })
+
+        document.body.innerHTML = '<h1>Done</h1>'
+      }
+
+      main()
+    </script>
+  </body>
+</html>
diff --git a/test-examples/static/delayed-fast-requests.html b/test-examples/static/delayed-fast-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/test-examples/static/delayed-slow-requests.html b/test-examples/static/delayed-slow-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/test-examples/static/fast-requests.html b/test-examples/static/fast-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/test-examples/static/hello-world.html b/test-examples/static/hello-world.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <h1>Hello World!</h1>
diff --git a/test-examples/static/immediate-console.html b/test-examples/static/immediate-console.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <body>
+    <script>
+      async function main() {
+        console.log('1')
+        console.warn('2')
+        console.error('3')
+        console.debug('4', { foo: { bar: 'baz', boz: 12 } })
+
+        document.body.innerHTML = '<h1>Done</h1>'
+      }
+
+      main()
+    </script>
+  </body>
+</html>
diff --git a/test-examples/static/multi-stage-fast-requests.html b/test-examples/static/multi-stage-fast-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/test-examples/static/no-requests.html b/test-examples/static/no-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/test-examples/static/slow-requests.html b/test-examples/static/slow-requests.html
@@ -1,3 +1,4 @@
+<!doctype html>
 <html>
   <body>
     <script>
diff --git a/tests/captureConsoleMessages.spec.ts b/tests/captureConsoleMessages.spec.ts
@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'
+import { captureConsoleMessages } from '../src/index'
+import { sleep } from '@devoxa/flocky'
+
+test.describe('captureConsoleMessages', () => {
+  test('can capture immediate console messages', async ({ page }) => {
+    const getConsoleMessages = captureConsoleMessages(page)
+
+    await page.goto('/immediate-console.html')
+
+    await expect(page.locator('h1')).toHaveText('Done')
+
+    expect(getConsoleMessages()).toEqual([
+      { type: 'log', args: ['1'] },
+      { type: 'warning', args: ['2'] },
+      { type: 'error', args: ['3'] },
+      { type: 'debug', args: ['4', { foo: { bar: 'baz', boz: 12 } }] },
+    ])
+  })
+
+  test('can capture delayed console messages', async ({ page }) => {
+    await page.goto('/delayed-console.html')
+    await sleep(100)
+
+    const getConsoleMessages = captureConsoleMessages(page)
+
+    await expect(page.locator('h1')).toHaveText('Done')
+
+    expect(getConsoleMessages(['log', 'error'])).toEqual([
+      // Initial log is ignored because it was right after page load
+      { type: 'log', args: ['1'] },
+      { type: 'error', args: ['3'] },
+    ])
+  })
+})

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!doctype html>`
`1`	`2`	`<html lang="en">`
`2`	`3`	`<head>`
`3`	`4`	`<title>Hello world</title>`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+<!doctype html>`
`1`	`2`	`<html>`
`2`	`3`	`<body>`
`3`	`4`	`<div id="foo">Bar</div>`