[Feature Request] Allow VSCode extension to use "Record at cursor" functionality when in "trace mode"/"UI mode"

[D4N14L]

Context:

• Playwright Version: 1.38.1
• Operating System: Windows
• Node.js version: 18
• Visual Studio Code version: 1.83
• Playwright for VSCode extension version: 1.0.16
• Browser: All

Describe the bug
UI mode/trace viewer mode is awesome for scenarios like Codespaces, where developers don't have access to the actual browser pane. However, it doesn't allow for access to one of the most useful features that the VSCode plugin brings: "Record at Cursor" functionality. It would be great to have this support added so that developers don't need to be running using a browser on their local machine in order to use this extremely helpful feature.

This bug may be considered a duplicate of #23700. If so, feel free to close this issue out and use that issue as a tracking issue.

[pavelfeldman]

UI Mode does not show the live browser, it only operates snapshots. If you start recording, you'll be able to generate a single action only - the page will not react to your click. Or do you want a recording browser window to pop out of the UI Mode? When authoring tests, we assume you are using VS Code more than UI Mode.

[D4N14L]

@pavelfeldman hmm, is the browser session that provides the snapshots closed at the end of the run? It would be super neat if the session was left open so that Record at cursor could provide multiple actions. Once an action is provided, that action would be executed in the respective browser session, and the snapshots would continue to flow into the trace viewer window, allowing for more actions to be provided.

[D4N14L]

The main target for this feature would be devs using Codespaces. In our org, there's a big push to move most devs to Codespaces/MDB. While the browser window option works for MDB, Codespaces is largely what most devs choose to use due to low barrier of entry. Having the "Record at cursor" functionality available to them as well would be a great value-add.

[pavelfeldman]

The main target for this feature would be devs using Codespaces. In our org, there's a big push to move most devs to Codespaces/MDB.

I see. Given that we need the browser during recording, on which side of the Codespaces do you see that browser running? Locally or remotely?

[D4N14L]

When using Codespaces, we can only run the browser on the remote agent, and the agent doesn't run an xserver. For that reason, UI mode is actually the only way we have to run tests visually on a Codespace (I guess it doesn't need xserver to function). Codespaces routes the localhost URL to the remote machine, so we can open up a browser window to the UI mode URL and see the test as it executes on the remote machine.

When in Codespaces, it actually opens up a tab within the VSCode instance pointing at the URL (which is super helpful! I believe that was added over here: #23666)

[pavelfeldman]

In order to record, we need to run a browser. We can run it locally and tunnel the http, or we can run it remotely and tunnel the pixels. Either way, it does not seem to result in a reasonable UX for your use case. For you to be able to record tests visually over Codespaces, I would recommend running VNC in the container and just using a regular recorder.