Refs: #317831
Complexity: 5
The integrated browser has a new toolbar / support for emulating different devices.
Setup
Open the integrated browser to any page and activate the toolbar via the overflow menu:
The toolbar can also be triggered in the "empty" / blank state, but shouldn't do anything until a page is opened.
Scenarios
This is largely an "exploration" TPI -- please try all the functionality and provide feedback if it's not what you expect.
As you test, try refreshing the page or navigating and ensure the settings persist.
Below are the major functionalities as a reference for what to cover.
Screen sizes
When the toolbar is opened, drag handles should appear on the right / bottom sides and bottom-right corner of the browser view.
Dragging these handles should resize the view. Double-clicking them should reset that dimension to always fill the available space.
You can also manually enter dimensions within the toolbar, or clear them to fill available space.
Scaling
When "Scale" is set to "Auto (x%)", if at least one dimension is set, the view should automatically shrink to fully fit within the available space.
Try resizing the window or editor pane to make sure it scales appropriately.
Selecting a scale % other than "Auto" will not automatically shrink to fit, nor will it allow scrolling to see all content. This is expected and the same behavior as Edge.
Device pixel ratio (DPR)
This can be checked by opening the page DevTools console and running window.devicePixelRatio.
Mobile
When the "Mobile Emulation" toggle is enabled, scrollbars should only be visible when swiping to scroll, and the cursor should appear as a "touch" circle. Events dispatched to the page should be touchevents, not mouseevents (you can check using a site like this).
User-Agent
A custom user-agent can be set and will be sent with subsequent requests (can be verified by inspecting request headers via DevTools). Clearing it resets the override and uses the default again, which is something like Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.122.0-insider Chrome/142.0.7444.265 Electron/39.8.8 Safari/537.36
Presets
Presets are premade configurations that emulate common devices. We currently only have 4, but plan to add more / make them customizable. Check that they get applied correctly and behavior seems reasonable.
Agentic interaction
Agents can use Playwright code to perform some types of emulation; e.g. changing the screen size. When this happens, the emulation toolbar should appear and reflect the parameters applied by the code.
Emulation is not currently exposed directly in tools -- only indirectly via Playwright code. Ideally agents should infer that they can run Playwright code for this -- e.g. if you specify "test this site's mobile responsiveness" they should figure out to use the run code tool. But feedback is welcome if this isn't happening. We may end up exposing a tool explicitly for this.
Misc.
- Closing the toolbar should undo all emulation features
- Reopening the toolbar should restore the last applied settings for the current VS Code session (not persisted between sessions)
- A few commands are available via
F1, such as emulating a device. These should apply to the current focused browser and enable the toolbar if necessary
Refs: #317831
Complexity: 5
The integrated browser has a new toolbar / support for emulating different devices.
Setup
Open the integrated browser to any page and activate the toolbar via the overflow menu:
The toolbar can also be triggered in the "empty" / blank state, but shouldn't do anything until a page is opened.
Scenarios
This is largely an "exploration" TPI -- please try all the functionality and provide feedback if it's not what you expect.
As you test, try refreshing the page or navigating and ensure the settings persist.
Below are the major functionalities as a reference for what to cover.
Screen sizes
When the toolbar is opened, drag handles should appear on the right / bottom sides and bottom-right corner of the browser view.
Dragging these handles should resize the view. Double-clicking them should reset that dimension to always fill the available space.
You can also manually enter dimensions within the toolbar, or clear them to fill available space.
Scaling
When "Scale" is set to "Auto (x%)", if at least one dimension is set, the view should automatically shrink to fully fit within the available space.
Try resizing the window or editor pane to make sure it scales appropriately.
Selecting a scale % other than "Auto" will not automatically shrink to fit, nor will it allow scrolling to see all content. This is expected and the same behavior as Edge.
Device pixel ratio (DPR)
This can be checked by opening the page DevTools console and running
window.devicePixelRatio.Mobile
When the "Mobile Emulation" toggle is enabled, scrollbars should only be visible when swiping to scroll, and the cursor should appear as a "touch" circle. Events dispatched to the page should be
touchevents, notmouseevents (you can check using a site like this).User-Agent
A custom user-agent can be set and will be sent with subsequent requests (can be verified by inspecting request headers via DevTools). Clearing it resets the override and uses the default again, which is something like
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.122.0-insider Chrome/142.0.7444.265 Electron/39.8.8 Safari/537.36Presets
Presets are premade configurations that emulate common devices. We currently only have 4, but plan to add more / make them customizable. Check that they get applied correctly and behavior seems reasonable.
Agentic interaction
Agents can use Playwright code to perform some types of emulation; e.g. changing the screen size. When this happens, the emulation toolbar should appear and reflect the parameters applied by the code.
Emulation is not currently exposed directly in tools -- only indirectly via Playwright code. Ideally agents should infer that they can run Playwright code for this -- e.g. if you specify "test this site's mobile responsiveness" they should figure out to use the run code tool. But feedback is welcome if this isn't happening. We may end up exposing a tool explicitly for this.
Misc.
F1, such as emulating a device. These should apply to the current focused browser and enable the toolbar if necessary