How to Verify Console Log Messages Using Playwright

How to Verify Console Log Messages Using Playwright

Testing browser logs can be useful for debugging or ensuring that logging behavior works as expected. This short guide shows how to capture and assert console.info logs in a Playwright test.

Example Test Code

import { test, expect } from "@playwright/test";

test("should check if the console log is logging the correct message", async ({ page }) => {
  const logs: any[] = [];

  // Collect console messages
  page.on("console", (msg) => {
    logs.push({ msg: msg.text(), type: msg.type() });
  });

  // Visit the test page and trigger log
  await page.goto("https://practice.expandtesting.com/console-logs");
  await page.locator("button#btn-info").click();

  // Look for an info-type log that includes "console.info"
  const infosLog = logs.find(
    (log) => log.type === "info" && log.msg.includes("console.info")
  );

  expect(infosLog).toBeTruthy();
});

What This Does

• Listens for all console messages using page.on("console")
• Navigates to a page with console logs
• Clicks a button that triggers a console.info log
• Checks that a log message of type "info" contains "console.info"

Why It's Useful

• Helps you verify that certain log messages are being emitted
• Can be used to test logging behavior, debugging output, or even runtime warnings/error