test: fix some flaky failures (#15314)

- Never use open shadow root for highlight. This messes up
  our selectors that accidentally match internal preview elements.
- Remove failing electron test that we do not care about.
- Skip `channels.spec.ts` in non-default mode.

packages/playwright-core/src/server/injected/highlight.ts

@@ -45,8 +45,9 @@ export class Highlight {
     this._actionPointElement = document.createElement('x-pw-action-point');
     this._actionPointElement.setAttribute('hidden', 'true');
 
-    // Use a closed shadow root to prevent selectors matching our internal previews.
-    this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: isUnderTest ? 'open' : 'closed' });
+    // NOTE: do not use an open shadow root, event for test.
+    // Closed shadow root prevents selectors matching our internal previews.
+    this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: 'closed' });
     this._glassPaneShadow.appendChild(this._actionPointElement);
     const styleElement = document.createElement('style');
     styleElement.textContent = `
@@ -158,6 +159,8 @@ export class Highlight {
         tooltipElement.style.top = '0';
         tooltipElement.style.left = '0';
         tooltipElement.style.display = 'flex';
+        if (this._isUnderTest)
+          console.error('Highlight text for test: ' + JSON.stringify(tooltipElement.textContent)); // eslint-disable-line no-console
       }
       this._highlightEntries.push({ targetElement: elements[i], tooltipElement, highlightElement });
     }

tests/config/utils.ts

@@ -120,3 +120,15 @@ export async function parseHar(file: string): Promise<Map<string, Buffer>> {
   zipFS.close();
   return resources;
 }
+
+export function waitForTestLog<T>(page: Page, prefix: string): Promise<T> {
+  return new Promise<T>(resolve => {
+    page.on('console', message => {
+      const text = message.text();
+      if (text.startsWith(prefix)) {
+        const json = text.substring(prefix.length);
+        resolve(JSON.parse(json));
+      }
+    });
+  });
+}

tests/electron/electron-app.spec.ts

@@ -191,19 +191,3 @@ test('should detach debugger on app-initiated exit', async ({ playwright }) => {
   });
   await closePromise;
 });
-
-test('should serve from HAR', async ({ playwright, asset }) => {
-  const harPath = asset('har-fulfill.har');
-  const app = await playwright._electron.launch({
-    args: [path.join(__dirname, 'electron-window-app.js')],
-  });
-  app.context().routeFromHAR(harPath);
-  const page = await app.firstWindow();
-  // await page.goto('https://playwright.dev/');
-  await page.goto('http://no.playwright/');
-  // HAR contains a redirect for the script that should be followed automatically.
-  expect(await page.evaluate('window.value')).toBe('foo');
-  // HAR contains a POST for the css file that should not be used.
-  await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(255, 0, 0)');
-  await app.close();
-});

tests/library/channels.spec.ts

@@ -34,7 +34,7 @@ const it = playwrightTest.extend<{}, { expectScopeState: (object: any, golden: a
   }, { scope: 'worker' }],
 });
 
-it.skip(({ mode }) => mode === 'service');
+it.skip(({ mode }) => mode !== 'default');
 
 it('should scope context handles', async ({ browserType, server, expectScopeState }) => {
   const browser = await browserType.launch();

tests/library/inspector/pause.spec.ts

@@ -16,6 +16,7 @@
 
 import type { Page } from 'playwright-core';
 import { test as it, expect } from './inspectorTest';
+import { waitForTestLog } from '../../config/utils';
 
 
 it('should resume when closing inspector', async ({ page, recorderPageGetter, closeRecorder, mode }) => {
@@ -395,18 +396,6 @@ async function sanitizeLog(recorderPage: Page): Promise<string[]> {
   return results;
 }
 
-function waitForTestLog<T>(page: Page, prefix: string): Promise<T> {
-  return new Promise<T>(resolve => {
-    page.on('console', message => {
-      const text = message.text();
-      if (text.startsWith(prefix)) {
-        const json = text.substring(prefix.length);
-        resolve(JSON.parse(json));
-      }
-    });
-  });
-}
-
 type Box = { x: number, y: number, width: number, height: number };
 function roundBox(box: Box): Box {
   return {

tests/page/locator-highlight.spec.ts

@@ -15,15 +15,17 @@
  */
 
 import { test as it, expect } from './pageTest';
+import { waitForTestLog } from '../config/utils';
 
 it.skip(({ mode }) => mode !== 'default', 'Highlight element has a closed shadow-root on != default');
 
 it('should highlight locator', async ({ page }) => {
   await page.setContent(`<input type='text' />`);
+  const textPromise = waitForTestLog<string>(page, 'Highlight text for test: ');
+  const boxPromise = waitForTestLog<{ x: number, y: number, width: number, height: number }>(page, 'Highlight box for test: ');
   await page.locator('input').highlight();
-  await expect(page.locator('x-pw-tooltip')).toHaveText('input');
-  await expect(page.locator('x-pw-highlight')).toBeVisible();
+  expect(await textPromise).toBe('input');
   const box1 = await page.locator('input').boundingBox();
-  const box2 = await page.locator('x-pw-highlight').boundingBox();
+  const box2 = await boxPromise;
   expect(box1).toEqual(box2);
 });