[Feature]: Make UI Mode compatible with subpath proxying

[bockstaller]

🚀 Feature Request

UI-Mode supports test execution via docker and codespaces by starting it with the following command:

npx playwright test --ui-port=8080 --ui-host=0.0.0.0

The trace viewer is launched and a websocket connection to the test runner is established.

This breaks as soon as the port opened by playwright is proxied via a subpath instead of a subdomain because the websocket is only taking the domain, port and guid into account.

This mode isn't supported by codespaces, but other deployment methods for remote code instances support this https://coder.com/docs/code-server/latest/guide#using-a-subdomain this way of proxying.

Example

Following the relative URI resolution should allow a different way of creating the Websocket connection URL.

Ap possible implementation replacing this line could be.

const wsURL = URL(`../${guid}`, document.location))
wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:')
const ws = new WebSocket(wsURL)

This should keep backward compatibility while allowing subpath proxying.

Motivation

This change would make playwrights ui mode usable in situations where the devs influence on larger infrastructure is limited.
Especially whenever it isn't possible to proxy via subdomains.

[bockstaller]

@yury-s I created a PR making the suggested changes. Happy to iterate on it

[bockstaller]

There is a small bug in the original implementation I am addressing in this PR:

#29924