Add Puppeteer v22 compatibility

[colinrotherham]

Summary

From the puppeteer@22 release we have two main breaking changes + docs:

1. Replace Node.js v16 with v20 in GitHub Actions
2. Document that headless: 'new' is now headless: true
3. Switch to browser.createIncognitoBrowserContext() browser.createBrowserContext()

Test plan

I've added feature detection for "createBrowserContext" in browser to maintain support for Puppeteer <= v21

[colinrotherham]

This PR includes [email protected] puppeteer@22 and might cause the ShadowFrame, ShadowPage test failures

[gregberge]

Hello @colinrotherham, thank you for this PR. Tests are failing, could you try to fix them please?

[colinrotherham]

@gregberge It's caused when upgrading the current [email protected] to [email protected] or higher

Same release that rolled to Chrome 121.0.6167.85

Any suggestions?

[colinrotherham]

Enabling launch.dumpio indicates the page being tested has closed

Might need to to update these tests to use browser.newPage() rather than the global page?

  TargetCloseError: Protocol error (Runtime.releaseObject): Target closed
      at CallbackRegistry.clear (/jest-puppeteer/node_modules/puppeteer-core/src/common/CallbackRegistry.ts:93:30)
      at CdpCDPSession._onClosed (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/CDPSession.ts:149:21)
      at Connection.onMessage (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/Connection.ts:167:17)
      at WebSocket.<anonymous> (/jest-puppeteer/node_modules/puppeteer-core/src/node/NodeWebSocketTransport.ts:45:24)
      at callListener (/jest-puppeteer/node_modules/ws/lib/event-target.js:290:14)
      at WebSocket.onMessage (/jest-puppeteer/node_modules/ws/lib/event-target.js:209:9)
      at WebSocket.emit (node:events:514:28)
      at Receiver.receiverOnMessage (/jest-puppeteer/node_modules/ws/lib/websocket.js:1209:20)
      at Receiver.emit (node:events:514:28)
      at /jest-puppeteer/node_modules/ws/lib/receiver.js:608:16
      at node:internal/process/task_queues:140:7
      at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
      at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
      at processTicksAndRejections (node:internal/process/task_queues:95:5) {
    cause: ProtocolError:
        at Callback.<instance_members_initializer> (/jest-puppeteer/node_modules/puppeteer-core/src/common/CallbackRegistry.ts:104:12)
        at new Callback (/jest-puppeteer/node_modules/puppeteer-core/src/common/CallbackRegistry.ts:109:3)
        at CallbackRegistry.create (/jest-puppeteer/node_modules/puppeteer-core/src/common/CallbackRegistry.ts:27:22)
        at Connection._rawSend (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/Connection.ts:120:22)
        at CdpCDPSession.send (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/CDPSession.ts:95:29)
        at releaseObject (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/JSHandle.ts:103:6)
        at CdpJSHandle.dispose (/jest-puppeteer/node_modules/puppeteer-core/src/cdp/JSHandle.ts:72:11)
        at WaitTask.terminate (/jest-puppeteer/node_modules/puppeteer-core/src/common/WaitTask.ts:191:30)
        at processTicksAndRejections (node:internal/process/task_queues:95:5)
  }
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"method":"Target.targetInfoChanged","params":{"targetInfo":{"targetId":"81AA279BA32A8FCE5C68347D7A513A5F","type":"page","title":"Test App","url":"http://localhost:4444/shadow.html","attached":false,"canAccessOpener":false,"browserContextId":"5583E26A9740FC1E24E60C3D4EB678BB"}}}'
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"method":"Target.targetDestroyed","params":{"targetId":"81AA279BA32A8FCE5C68347D7A513A5F"}}'
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"method":"Target.targetInfoChanged","params":{"targetInfo":{"targetId":"FD04A3633B0930ED767EC22E01F2D5D2","type":"tab","title":"","url":"","attached":false,"canAccessOpener":false,"browserContextId":"5583E26A9740FC1E24E60C3D4EB678BB"}}}'
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"method":"Target.detachedFromTarget","params":{"sessionId":"4019DE6ED77DBBE81A4330BD94EF6CBB","targetId":"FD04A3633B0930ED767EC22E01F2D5D2"}}'
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"method":"Target.targetDestroyed","params":{"targetId":"FD04A3633B0930ED767EC22E01F2D5D2"}}'
]
2024-02-09T16:35:54.720Z puppeteer:protocol:RECV ◀ [
  '{"id":29,"error":{"code":-32001,"message":"Session with given id not found."}}'
]
2024-02-09T16:35:54.721Z puppeteer:protocol:RECV ◀ [
  '{"id":30,"error":{"code":-32001,"message":"Session with given id not found."}}'
]

[colinrotherham]

Ah I hadn't noticed the shadow.html fixture uses the old shadowroot attribute (see deprecation notice)

Declarative Shadow DOM
https://developer.chrome.com/docs/css-ui/declarative-shadow-dom

Note: Declarative Shadow DOM has been available since Chrome 90 and Edge 91, but it used an older non-standard attribute called shadowroot instead of the standardized shadowrootmode attribute.

Looks like a quick fix, trying now

[colinrotherham]

Ready for review again @gregberge

These changes are still "puppeteer": ">=19" compatible so no need to drop Node.js 16 anymore