Provides device emulation via -d/--device flag using playwright by MildMax · Pull Request #80 · cloudflare/telescope

MildMax · 2026-01-09T14:44:02Z

Provides new flag -d/--device to allow device emulation
Users are allowed to provide custom viewports that override device defaults via --width and --height CLI args

__tests__/browsers.test.js

index.js

lib/browsers.js

lib/config.js

sergeychernyshev

Not sure why, but npm test prog has some outstanding promises.

…t via CLI

…failed test

mjkozicki · 2026-02-09T22:30:18Z

__tests__/emulation.test.js

+import { launchTest } from '../index.js';
+import fs from 'fs';
+import { devices } from 'playwright/test';
+
+import { BrowserConfig } from '../lib/browsers.js';
+import { normalizeCLIConfig } from '../lib/config.js';
+const browsers = BrowserConfig.getBrowsers();
+
+const device = 'Nexus 10'
+const browser = 'chrome'
+
+
+
+test('Setting device emulation updates the config', async () => {
+    let options = {
+        browser: 'chrome',
+        device: device,
+        url: 'https://www.example.com',
+    };
+    var config = normalizeCLIConfig(options);
+
+    const result = await launchTest(config);
+
+    expect(result).toHaveProperty('success');
+    expect(result).toHaveProperty('testId');
+    expect(result).toHaveProperty('resultsPath');
+    expect(result.success).toBe(true);
+    expect(fs.existsSync(result.resultsPath)).toBe(true);
+});
+
+
+// describe.each(browsers)('Programmatic API (%s)', browser => {
+//   describe.each(Object.keys(devices))(
+//       'launchTest executes and returns result object when emulating device: %s',
+//       device => {
+//         test('Setting device emulation updates the config', async () => {
+//             console.log(devices)
+//             let options = {
+//                 browser,
+//                 device: device,
+//                 url: '../tests/sandbox/index.html',
+//             };
+//             options = normalizeCLIConfig(options);
+//             let config = new BrowserConfig().getBrowserConfig(browser, options);
+//             expect(config && typeof config === 'object').toBe(true);
+//                 // test collecting device data for desktop devices
+//                 if (device.toLowerCase().includes('desktop')) {
+//                     expect(config.isMobile).toBe(false);
+//                     expect(config.hasTouch).toBe(false);
+//                 }
+//                 // test collecting device data for non-desktop devices
+//                 else {
+//                     expect(config.isMobile).toBe(true);
+//                     expect(config.hasTouch).toBe(true);
+//                     expect(config.deviceScaleFactor).toBeDefined();
+//                 }
+
+//             const result = await launchTest(options);
+
+//             expect(result).toHaveProperty('success');
+//             expect(result).toHaveProperty('testId');
+//             expect(result).toHaveProperty('resultsPath');
+//             expect(result.success).toBe(true);
+//             expect(fs.existsSync(result.resultsPath)).toBe(true);
+//         });
+//       },
+//     );
+// });


Suggested change

import { launchTest } from '../index.js';

import fs from 'fs';

import { devices } from 'playwright/test';

import { BrowserConfig } from '../lib/browsers.js';

import { normalizeCLIConfig } from '../lib/config.js';

const browsers = BrowserConfig.getBrowsers();

const device = 'Nexus 10'

const browser = 'chrome'

test('Setting device emulation updates the config', async () => {

let options = {

browser: 'chrome',

device: device,

url: 'https://www.example.com',

};

var config = normalizeCLIConfig(options);

const result = await launchTest(config);

expect(result).toHaveProperty('success');

expect(result).toHaveProperty('testId');

expect(result).toHaveProperty('resultsPath');

expect(result.success).toBe(true);

expect(fs.existsSync(result.resultsPath)).toBe(true);

});

// describe.each(browsers)('Programmatic API (%s)', browser => {

// describe.each(Object.keys(devices))(

// 'launchTest executes and returns result object when emulating device: %s',

// device => {

// test('Setting device emulation updates the config', async () => {

// console.log(devices)

// let options = {

// browser,

// device: device,

// url: '../tests/sandbox/index.html',

// };

// options = normalizeCLIConfig(options);

// let config = new BrowserConfig().getBrowserConfig(browser, options);

// expect(config && typeof config === 'object').toBe(true);

// // test collecting device data for desktop devices

// if (device.toLowerCase().includes('desktop')) {

// expect(config.isMobile).toBe(false);

// expect(config.hasTouch).toBe(false);

// }

// // test collecting device data for non-desktop devices

// else {

// expect(config.isMobile).toBe(true);

// expect(config.hasTouch).toBe(true);

// expect(config.deviceScaleFactor).toBeDefined();

// }

// const result = await launchTest(options);

// expect(result).toHaveProperty('success');

// expect(result).toHaveProperty('testId');

// expect(result).toHaveProperty('resultsPath');

// expect(result.success).toBe(true);

// expect(fs.existsSync(result.resultsPath)).toBe(true);

// });

// },

// );

// });

import { launchTest } from '../index.js';

import { BrowserConfig } from '../lib/browsers.js';

import { devices } from 'playwright/test';

import { normalizeCLIConfig } from '../lib/config.js';

const browsers = BrowserConfig.getBrowsers();

const availableDevices = devices.filter(device => browsers.contains(device.defaultBrowserType));

describe.each(availableDevices)('Setting device emulation updates the config: %s', device => {

test('Setting device emulation updates the config', () => {

let options = {

browser: device.defaultBrowserType,

device: device.name,

url: '../tests/sandbox/index.html',

};

options = normalizeCLIConfig(options);

let config = new BrowserConfig().getBrowserConfig(device.defaultBrowserType, options);

expect(config && typeof config === 'object').toBe(true);

expect(config.isMobile).toBe(device.isMobile);

expect(config.hasTouch).toBe(device.hasTouch);

expect(config.width).toBe(device.viewport.width);

expect(config.height).toBe(device.viewport.height);

expect(config.deviceScaleFactor).toBeDefined();

});

});

describe.each(availableDevices)('Setting device emulation with overrides updates the config: %s', device => {

test('Setting device emulation updates the config', () => {

let options = {

browser: device.defaultBrowserType,

device: device.name,

width: 9999,

height: 9999,

url: '../tests/sandbox/index.html',

};

options = normalizeCLIConfig(options);

let config = new BrowserConfig().getBrowserConfig(device.defaultBrowserType, options);

expect(config && typeof config === 'object').toBe(true);

expect(config.isMobile).toBe(device.isMobile);

expect(config.hasTouch).toBe(device.hasTouch);

expect(config.width).toBe(9999);

expect(config.height).toBe(9999);

});

});

describe.each(availableDevices)('Device emulation: %s', device => {

test('Device emulation successfully runs tests', async () => {

let options = {

browser: device.defaultBrowserType,

device: device.name,

url: '../tests/sandbox/index.html',

};

options = normalizeCLIConfig(options);

let config = new BrowserConfig().getBrowserConfig(device.defaultBrowserType, options);

const result = await launchTest(config);

expect(result).toHaveProperty('success');

expect(result).toHaveProperty('testId');

expect(result).toHaveProperty('resultsPath');

expect(result.success).toBe(true);

expect(fs.existsSync(result.resultsPath)).toBe(true);

});

});

mjkozicki · 2026-02-09T22:31:55Z

__tests__/browsers.test.js

+  describe.each(Object.keys(devices))(
+    'Setting device emulation updates the config for device: %s',
+    device => {
+      test('Setting device emulation updates the config', () => {
+        let options = {
+          browser,
+          device: device,
+          url: '../tests/sandbox/index.html',
+        };
+        options = normalizeCLIConfig(options);
+        let config = new BrowserConfig().getBrowserConfig(browser, options);
+        expect(config && typeof config === 'object').toBe(true);
+        // test collecting device data for desktop devices
+        if (device.toLowerCase().includes('desktop')) {
+          expect(config.isMobile).toBe(false);
+          expect(config.hasTouch).toBe(false);
+        }
+        // test collecting device data for non-desktop devices
+        else {
+          expect(config.isMobile).toBe(true);
+          expect(config.hasTouch).toBe(true);
+          expect(config.deviceScaleFactor).toBeDefined();
+        }
+      });
+    },
+  );


emulation.test.js can cover launchTest

Suggested change

describe.each(Object.keys(devices))(

'Setting device emulation updates the config for device: %s',

device => {

test('Setting device emulation updates the config', () => {

let options = {

browser,

device: device,

url: '../tests/sandbox/index.html',

};

options = normalizeCLIConfig(options);

let config = new BrowserConfig().getBrowserConfig(browser, options);

expect(config && typeof config === 'object').toBe(true);

// test collecting device data for desktop devices

if (device.toLowerCase().includes('desktop')) {

expect(config.isMobile).toBe(false);

expect(config.hasTouch).toBe(false);

}

// test collecting device data for non-desktop devices

else {

expect(config.isMobile).toBe(true);

expect(config.hasTouch).toBe(true);

expect(config.deviceScaleFactor).toBeDefined();

}

});

},

);

mjkozicki · 2026-02-09T22:34:38Z

index.js

+  // `npm test emlation` fails to finish
+  browserConfig.isMobile = true
+
+  // `npm test emulation` succeeds and finishes
+  // browserConfig.isMobile = false
+


This needed?

mjkozicki · 2026-02-09T22:35:53Z

index.js

-        String(DEFAULT_OPTIONS.height),
-      ),
-    )
+    .addOption(new Option('--width <int>', 'Viewport width, in pixels'))


Suggested change

.addOption(new Option('--width <int>', 'Viewport width, in pixels'))

.addOption(new Option('--width <int>', 'Viewport width, in pixels. If both width and device are provided, the width value will override device emulation viewport width.')).default(

String(DEFAULT_OPTIONS.width),

),

mjkozicki · 2026-02-09T22:36:21Z

index.js

-      ),
-    )
+    .addOption(new Option('--width <int>', 'Viewport width, in pixels'))
+    .addOption(new Option('--height <int>', 'Viewport height, in pixels'))


Suggested change

.addOption(new Option('--height <int>', 'Viewport height, in pixels'))

.addOption(new Option('--height <int>', 'Viewport height, in pixels. If both height and device are provided, the height value will override device emulation viewport height.')).default(

String(DEFAULT_OPTIONS.height),

),

mjkozicki · 2026-02-09T22:39:59Z

index.js

        '--dry',
        'Dry run (do not run test, just save config and cleanup)',
-      ).default(DEFAULT_OPTIONS.dry),
+      )


Readd the default option for dry.

mjkozicki · 2026-02-09T22:40:23Z

index.js

+      new Option(
+        '-d, --device <string>',
+        'Device to emulate; devices are based on the Playwright device list (see https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/server/deviceDescriptorsSource.json)',
+      )


Add default option for device.

mjkozicki · 2026-02-09T22:44:38Z

lib/config.js

+  // set width and height from options before assigning device viewport or defaults
+  if (options.width) {
+    config.width = parseInt(options.width);
+  } else if (
+    config.device &&
+    config.device.viewport &&
+    config.device.viewport.width
+  ) {
+    config.width = config.device.viewport.width;
+  } else {
+    config.width = DEFAULT_OPTIONS.width;
+  }


Does the config.width need to be set if there is no override for the config.device.viewport.width value?

Suggested change

// set width and height from options before assigning device viewport or defaults

if (options.width) {

config.width = parseInt(options.width);

} else if (

config.device &&

config.device.viewport &&

config.device.viewport.width

) {

config.width = config.device.viewport.width;

} else {

config.width = DEFAULT_OPTIONS.width;

}

// set width and height from options before assigning device viewport or defaults

if (options.width) {

config.width = parseInt(options.width);

}

mjkozicki · 2026-02-09T22:45:22Z

lib/config.js

+  if (options.height) {
+    config.height = parseInt(options.height);
+  } else if (
+    config.device &&
+    config.device.viewport &&
+    config.device.viewport.height
+  ) {
+    config.height = config.device.viewport.height;
+  } else {
+    config.height = DEFAULT_OPTIONS.height;
+  }


Does the config.height need to be set if there is no override for the config.device.viewport.height value?

Suggested change

if (options.height) {

config.height = parseInt(options.height);

} else if (

config.device &&

config.device.viewport &&

config.device.viewport.height

) {

config.height = config.device.viewport.height;

} else {

config.height = DEFAULT_OPTIONS.height;

}

if (options.height) {

config.height = parseInt(options.height);

}

mjkozicki · 2026-02-09T22:48:50Z

lib/defaultOptions.js

  // Dry run (false = no dry run)
  dry: false,
+  // Device to emulate (empty string = no emulation)
+  device: '',


It would be clearer is device defaulted to null.

sergeychernyshev reviewed Jan 9, 2026

View reviewed changes

__tests__/browsers.test.js Outdated Show resolved Hide resolved

index.js Show resolved Hide resolved

lib/browsers.js Show resolved Hide resolved

lib/config.js Show resolved Hide resolved

lib/config.js Show resolved Hide resolved

MildMax changed the title ~~Provides mobile emulation via -m/--mobile flag using playwright~~ Provides devi e emulation via -d/--device flag using playwright Jan 12, 2026

MildMax requested a review from sergeychernyshev January 12, 2026 17:28

MildMax marked this pull request as ready for review January 12, 2026 17:28

MildMax requested a review from a team January 12, 2026 17:28

sergeychernyshev requested changes Jan 15, 2026

View reviewed changes

sergeychernyshev changed the title ~~Provides devi e emulation via -d/--device flag using playwright~~ Provides device emulation via -d/--device flag using playwright Jan 16, 2026

MildMax and others added 6 commits January 23, 2026 11:28

Provides mobile emulation via -m/--mobile flag using playwright

6a05553

Updates -m arg to -d to provide device emulation offered by playwrigh…

f630f2d

…t via CLI

Adds tests ands formats changes to support device emulation

258740f

Creates additional tests for device emulation handling

8abdce8

Fixes device emulation tests to allow for continued processing after …

ad9dc80

…failed test

Format browsers test

5177303

MildMax force-pushed the mildmax/mobile-emulation branch from c92a410 to 5177303 Compare January 23, 2026 16:31

MildMax added 2 commits January 23, 2026 15:03

refactors tests to put device emulation in own file, adds debug lines

7851e2c

fixes bad ... operator

f2ed6ba

MildMax force-pushed the mildmax/mobile-emulation branch from 441c132 to f2ed6ba Compare January 23, 2026 21:07

MildMax added 3 commits January 23, 2026 16:14

fixes opton for device

43ba118

Removes results.txt and reverts package.json

9bae15a

fixes imports on browsers.test

07e2d02

MildMax force-pushed the mildmax/mobile-emulation branch from 20e81b0 to 07e2d02 Compare January 23, 2026 21:33

updates cdp client

56824d0

mjkozicki linked an issue Feb 9, 2026 that may be closed by this pull request

Feature: 📱Mobile Emulation #4

Open

mjkozicki reviewed Feb 9, 2026

View reviewed changes

-    .addOption(new Option('--width <int>', 'Viewport width, in pixels'))
+    .addOption(new Option('--width <int>', 'Viewport width, in pixels. If both width and device are provided, the width value will override device emulation viewport width.')).default(
+        String(DEFAULT_OPTIONS.width),
+      ),

Conversation

MildMax commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sergeychernyshev left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

MildMax commented Jan 9, 2026 •

edited

Loading