Device emulation using playwright options flag in synthetics cli

Elastic Observability Synthetics
1

Hi,

Firstly, apologies if I did not include everything I should have as it’s my first time posting.

Elasticsearch, Kibana, Fleet + Elastic Agent versions are all 8.15.1.
It is on-prem version of Elasticstack.

My issue is that I need help on how exactly –playwright-options should be used in the synthetics CLI. Currently, I am trying to use the –playwright-options flag in the synthetics cli to dynamically set device emulation. I would like to set the …device option to a mobile or desktop configuration.

Below is my current command that I am running in my terminal (powershell):

$deviceName="Galaxy A55";`$device='{"...devices["' + $deviceName + '"]}';npx  /synthetics . --playwright-options $device

This current command throws an error “SyntaxError: Expected ':' after property name in JSON at position 15 (line 1 column 16)”.

I have also tried this version as my JSON and my tests run but the device doesn’t change to mobile.

$deviceName="Galaxy A55"; $device='{ "device":"' + $deviceName + '"}'; npx  /synthetics . --playwright-options $device

I have looked at the docs, in particular this: Configure a Synthetics project | Elastic Docs but it only shows how to set the device emulation in the config file and not in the CLI.

I would appreciate any help or pointers on what I am doing wrong.
Thank you.

2

Turns out I needed to specify the entire device descriptor, found in: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json

my json needed to be something like this:

$device = '{\"userAgent\":\"Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1\", \"viewport\":{\"width\":393,\"height\":852}, \"screen\":{\"width\":393,\"height\":659}, \"deviceScaleFactor\":3, \"isMobile\":true, \"hasTouch\":true, \"defaultBrowserType\":\"webkit\"}'
3

@nikki i think we do export devices constant from the lib, it can be used like this

import type { SyntheticsConfig } from '@elastic/synthetics';
import { devices } from '@elastic/synthetics';

export default env => {
  const config: SyntheticsConfig = {
    params: {
      url: 'https://elastic.github.io/synthetics-demo/',
    },
    playwrightOptions: {
      ignoreHTTPSErrors: false,
      ...devices['Desktop Chrome'],
    },
4

Hi @shahzad31,

I did try that in the beginning, but in my case I want to dynamically push one test with different configurations without creating multiple config files . So like this I have one test and one config file but I can push different monitors that test against different devices (i.e. mobile and desktop).

5

well you can specify the same playwrightOptions within a journey as well, via monitor.use hook