[e2e] Add clarity to console.error failures (#5304)

- Create a separate assert for each message

- Format the `ConsoleMessage` to provide location, line, and col numbers

e2e/fixtures.js

@@ -4,15 +4,29 @@
 const base = require('@playwright/test');
 const { expect } = require('@playwright/test');
 
+/**
+ * Takes a `ConsoleMessage` and returns a formatted string
+ * @param {import('@playwright/test').ConsoleMessage} msg
+ * @returns {String} formatted string with message type, text, url, and line and column numbers
+ */
+function consoleMessageToString(msg) {
+    const { url, lineNumber, columnNumber } = msg.location();
+
+    return `[${msg.type()}] ${msg.text()}
+    at (${url} ${lineNumber}:${columnNumber})`;
+}
+
 exports.test = base.test.extend({
     page: async ({ baseURL, page }, use) => {
         const messages = [];
-        page.on('console', msg => messages.push(`[${msg.type()}] ${msg.text()}`));
+        page.on('console', (msg) => messages.push(msg));
         await use(page);
-        await expect.soft(messages.toString()).not.toContain('[error]');
+        messages.forEach(
+            msg => expect.soft(msg.type(), `Console error detected: ${consoleMessageToString(msg)}`).not.toEqual('error')
+        );
     },
     browser: async ({ playwright, browser }, use, workerInfo) => {
-    // Use browserless if configured
+        // Use browserless if configured
         if (workerInfo.project.name.match(/browserless/)) {
             const vBrowser = await playwright.chromium.connectOverCDP({
                 endpointURL: 'ws://localhost:3003'