fix(ui): ansi colours

[Skn0tt]

Closes #39484.

Details

diff for testing

diff --git a/examples/todomvc/tests/fixtures.ts b/examples/todomvc/tests/fixtures.ts
index c58c0055c5..e648e31a09 100644
--- a/examples/todomvc/tests/fixtures.ts
+++ b/examples/todomvc/tests/fixtures.ts
@@ -1,11 +1,24 @@
 /* eslint-disable notice/notice */
 
-import { test as baseTest } from '@playwright/test';
+import { test as baseTest, expect } from '@playwright/test';
 
 export { expect } from '@playwright/test';
 
+throw new Error('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+
 export const test = baseTest.extend({
   page: async ({ page }, use) => {
+    console.error('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    console.warn('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    console.log('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    
+    await page.evaluate(() => {
+      console.error('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    console.warn('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    console.log('Error: \x1B[2mexpect(\x1B[22m\x1B[31mreceived\x1B[39m\x1B[2m).\x1B[22mtoEqual\x1B[2m(\x1B[22m\x1B[32mexpected\x1B[39m\x1B[2m) // deep equality\x1B[22m\n\nExpected: \x1B[32m"2:30pm"\x1B[39m\nReceived: \x1B[31m"\x1B[7m0\x1B[27m2:30pm"\x1B[39m');
+    })
+    throw new Error('lol')
+    expect('02:30pm').toEqual('2:30pm');
     await page.goto('https://demo.playwright.dev/todomvc');
     await use(page);
   },

[Skn0tt]

without this, hovering the container makes the background stick out:

[github-actions]

Test results for "MCP"

2 failed
❌ [firefox] › mcp/sse.spec.ts:88 › sse transport browser lifecycle (isolated) @mcp-windows-latest
❌ [firefox] › mcp/sse.spec.ts:118 › sse transport browser lifecycle (isolated, multiclient) @mcp-windows-latest

6440 passed, 383 skipped

---

Merge workflow run.

[github-actions]

Test results for "tests 1"

7 flaky

⚠️ [chromium-library] › library/video.spec.ts:724 › screencast › should work with video+trace `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/popup.spec.ts:261 › should not throw when click closes popup `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/video.spec.ts:342 › screencast › should work for popups `@chromium-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/inspector/cli-codegen-1.spec.ts:1080 › cli codegen › should not throw csp directive violation errors `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-wait-for-function.spec.ts:104 › should work with strict CSP policy `@firefox-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/browsertype-connect.spec.ts:776 › launchServer › should upload a folder `@webkit-ubuntu-22.04-node20`
⚠️ [webkit-page] › page/page-click.spec.ts:1203 › should fire contextmenu event on right click in correct order `@webkit-ubuntu-22.04-node20`

39162 passed, 846 skipped

---

Merge workflow run.