Emulate device type (UA String and Viewport)

[paulb-elastic]

As a user of Elastic Synthetic Monitoring
I want to be able to emulate a different device types
So that I can see how well my site performs from when loading the site that is optimised for that device (e.g. a mobile site)

ACs:

• The ability to configure the UA String used by a specific monitor (the same UA String will be used throughout all steps of the user journey)
• The ability to configure the viewport (width and height) properties used by a specific monitor
  • The UI reporting will be able to represent these different viewports, both for the thumbnail and full size screenshots
• The ability to configure the orientation of the screen (if this is possible in Playwright)
• It is possible to determine the device type/emulation used when looking at a test result

We need to consider where these properties are set, for example as parameters to the journey object? When integrated with Fleet with a curated UI for configuring monitors, perhaps this could be extended to have a list of common device types to choose from, which sets both the UA string and viewport accordingly (whilst manual configuration of the monitor still allows for these parameters to be set independently).

Whilst most monitors will have the same viewport throughout the whole user journey (and as such, is convenient to set as a parameter for the journey object), there may be a future requirement to be able to set this and the orientation on a step by step level (e.g. where a user journey may need to flip between portrait and horizontal for some kind of behaviour). In these cases, it may also be useful to have these defined as step parameters (which may be a future enhancement, not necessarily required for this initial version). This seems to be possible in the Playwright implementation.

As in the ACs, outside of any Fleet/Integration curated UI to configure these, there is a @elastic/observability-design requirement to consider where this is shown in the results. Although the UA String can be determined from the request headers, that’s quite deep in the report hierarchy to discover. The viewport/orientation isn’t shown anywhere right now. It should be possible to see what emulation was set against each monitor (bearing in mind it could change over time).