test: unflake some web socket tests (microsoft#4673)

Tests were waiting for `framesent` event after awaiting `page.evaluate`.
Sometimes, `page.evaluate` took long enough and finished after
the `framesent`.

Drive-by: small fixes for mode=service test fixture.

Author: dgozman

test/fixtures.ts

@@ -131,6 +131,7 @@ fixtures.playwright.override(async ({ browserName, testWorkerIndex, platform, mo
     const spawnedProcess = childProcess.fork(path.join(__dirname, '..', 'lib', 'service.js'), [String(port)], {
       stdio: 'pipe'
     });
+    spawnedProcess.stderr.pipe(process.stderr);
     await new Promise(f => {
       spawnedProcess.stdout.on('data', data => {
         if (data.toString().includes('Listening on'))
@@ -144,9 +145,11 @@ fixtures.playwright.override(async ({ browserName, testWorkerIndex, platform, mo
     spawnedProcess.on('exit', onExit);
     const client = await PlaywrightClient.connect(`ws://localhost:${port}/ws`);
     await run(client.playwright());
-    spawnedProcess.removeListener('exit', onExit);
     await client.close();
+    spawnedProcess.removeListener('exit', onExit);
+    const processExited = new Promise(f => spawnedProcess.on('exit', f));
     spawnedProcess.kill();
+    await processExited;
     await teardownCoverage();
   } else {
     const playwright = require('../index');

test/web-socket.spec.ts

@@ -108,41 +108,47 @@ it('should emit error', async ({page, server, isFirefox}) => {
     expect(message).toContain(': 400');
 });
 
-it('should not have stray error events', async ({page, server, isFirefox}) => {
-  const [ws] = await Promise.all([
-    page.waitForEvent('websocket'),
+it('should not have stray error events', async ({page, server}) => {
+  let error;
+  page.on('websocket', ws => ws.on('socketerror', e => error = e));
+  await Promise.all([
+    page.waitForEvent('websocket').then(async ws => {
+      await ws.waitForEvent('framereceived');
+      return ws;
+    }),
     page.evaluate(port => {
       (window as any).ws = new WebSocket('ws://localhost:' + port + '/ws');
     }, server.PORT)
   ]);
-  let error;
-  ws.on('socketerror', e => error = e);
-  await ws.waitForEvent('framereceived');
   await page.evaluate('window.ws.close()');
   expect(error).toBeFalsy();
 });
 
-it('should reject waitForEvent on socket close', async ({page, server, isFirefox}) => {
+it('should reject waitForEvent on socket close', async ({page, server}) => {
   const [ws] = await Promise.all([
-    page.waitForEvent('websocket'),
+    page.waitForEvent('websocket').then(async ws => {
+      await ws.waitForEvent('framereceived');
+      return ws;
+    }),
     page.evaluate(port => {
       (window as any).ws = new WebSocket('ws://localhost:' + port + '/ws');
     }, server.PORT)
   ]);
-  await ws.waitForEvent('framereceived');
   const error = ws.waitForEvent('framesent').catch(e => e);
   await page.evaluate('window.ws.close()');
   expect((await error).message).toContain('Socket closed');
 });
 
-it('should reject waitForEvent on page close', async ({page, server, isFirefox}) => {
+it('should reject waitForEvent on page close', async ({page, server}) => {
   const [ws] = await Promise.all([
-    page.waitForEvent('websocket'),
+    page.waitForEvent('websocket').then(async ws => {
+      await ws.waitForEvent('framereceived');
+      return ws;
+    }),
     page.evaluate(port => {
       (window as any).ws = new WebSocket('ws://localhost:' + port + '/ws');
     }, server.PORT)
   ]);
-  await ws.waitForEvent('framereceived');
   const error = ws.waitForEvent('framesent').catch(e => e);
   await page.close();
   expect((await error).message).toContain('Page closed');