Playwright: Missing a few device defs for landscape variants

Created on 23 Jan 2020 · 3Comments · Source: microsoft/playwright

Randomly noticed that a few items didn't specify a "landscape" device:

Missing device for "iPhone 11 landscape"
Missing device for "iPhone 11 Pro landscape"
Missing device for "iPhone 11 Pro Max landscape"
Missing device for "Microsoft Lumia 550 landscape"

... So I hacked a quick linter to verify:

const devices = require("playwright").devices;

const deviceMap = new Map();
for (const device of devices) {
  deviceMap.set(device.name, device);
}

for (const name of deviceMap.keys()) {
  if (name.endsWith(" landscape")) continue;
  const landscapeName = `${name} landscape`;
  if (!deviceMap.has(landscapeName)) {
    const landscapeDevice = deviceMap.get(name);
    const {width, height} = landscapeDevice.viewport;
    landscapeDevice.name = landscapeName;
    landscapeDevice.viewport.width = height;
    landscapeDevice.viewport.height = width;
    console.log(`Missing device for "${landscapeName}", expected: ${JSON.stringify(landscapeDevice, null, 2)}`);
  } else {
    const portrait = deviceMap.get(name);
    const landscape = deviceMap.get(landscapeName);
    if (!(portrait.width === landscape.height && portrait.height === landscape.width)) {
      console.log(`${name} viewport ({width:${portrait.viewport.width},height:${portrait.viewport.height}}) does not match ${landscapeName} viewport ({width:${landscape.viewport.width},height=${landscape.viewport.height}})`);
    }
  }
}

OUTPUT

Missing device for "iPhone 11 landscape", expected:
{
  "name": "iPhone 11 landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 896,
    "height": 414,
    "deviceScaleFactor": 2,
    "isMobile": true
  }
}

Missing device for "iPhone 11 Pro landscape", expected:
{
  "name": "iPhone 11 Pro landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 812,
    "height": 375,
    "deviceScaleFactor": 3,
    "isMobile": true
  }
}

Missing device for "iPhone 11 Pro Max landscape", expected:
{
  "name": "iPhone 11 Pro Max landscape",
  "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1",
  "viewport": {
    "width": 896,
    "height": 414,
    "deviceScaleFactor": 3,
    "isMobile": true
  }
}

Missing device for "Microsoft Lumia 550 landscape", expected:
{
  "name": "Microsoft Lumia 550 landscape",
  "userAgent": "Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 550) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263",
  "viewport": {
    "width": 360,
    "height": 640,
    "deviceScaleFactor": 2,
    "isMobile": true
  }
}

Although, that "Lumia 550" definition looks possibly suspicious.
https://github.com/microsoft/playwright/blob/b4209e9dc80e6226f6b173ab77f0390a809964a2/src/deviceDescriptors.ts#L491-L500

It looks like the width > height, so it's possibly already the landscape definition, but incorrectly labeled (and we're missing the portrait definition).

good-first-issue

Source