api(devices): extract isMobile/hasTouch from viewport (#1415)

This commit is contained in:
Pavel Feldman 2020-03-17 18:21:02 -07:00 committed by GitHub
parent 39e5eb7eda
commit 049b336800
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 422 additions and 340 deletions

View file

@ -197,9 +197,10 @@ Indicates that the browser is connected.
- `viewport` <[Object]> Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport.
- `width` <[number]> page width in pixels.
- `height` <[number]> page height in pixels.
- `userAgent` <[string]> Specific user agent to use in this context.
- `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`.
- `isMobile` <[boolean]> Whether the `meta viewport` tag is taken into account and touch events are enabled. Defaults to `false`. Not supported in Firefox.
- `userAgent` <[string]> Specific user agent to use in this context.
- `hasTouch` <[boolean]> Specifies if viewport supports touch events. Defaults to false.
- `javaScriptEnabled` <[boolean]> Whether or not to enable or disable JavaScript in the context. Defaults to true.
- `timezoneId` <?[string]> Changes the timezone of the context. See [ICUs `metaZones.txt`](https://cs.chromium.org/chromium/src/third_party/icu/source/data/misc/metaZones.txt?rcl=faee8bc70570192d82d2978a71e2a615788597d1) for a list of supported timezone IDs.
- `geolocation` <[Object]>
@ -232,12 +233,13 @@ Creates a new browser context. It won't share cookies/cache with other browser c
- `options` <[Object]>
- `ignoreHTTPSErrors` <?[boolean]> Whether to ignore HTTPS errors during navigation. Defaults to `false`.
- `bypassCSP` <?[boolean]> Toggles bypassing page's Content-Security-Policy.
- `viewport` <?[Object]> Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport.
- `viewport` <[Object]> Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport.
- `width` <[number]> page width in pixels.
- `height` <[number]> page height in pixels.
- `userAgent` <[string]> Specific user agent to use in this context.
- `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`.
- `isMobile` <[boolean]> Whether the `meta viewport` tag is taken into account and touch events are enabled. Defaults to `false`. Not supported in Firefox.
- `userAgent` <?[string]> Specific user agent to use in this context.
- `hasTouch` <[boolean]> Specifies if viewport supports touch events. Defaults to false.
- `javaScriptEnabled` <?[boolean]> Whether or not to enable or disable JavaScript in the context. Defaults to true.
- `timezoneId` <?[string]> Changes the timezone of the context. See [ICUs `metaZones.txt`](https://cs.chromium.org/chromium/src/third_party/icu/source/data/misc/metaZones.txt?rcl=faee8bc70570192d82d2978a71e2a615788597d1) for a list of supported timezone IDs.
- `geolocation` <[Object]>

View file

@ -24,7 +24,7 @@ import * as types from './types';
import { Events } from './events';
export type BrowserContextOptions = {
viewport?: types.Viewport | null,
viewport?: types.Size | null,
ignoreHTTPSErrors?: boolean,
javaScriptEnabled?: boolean,
bypassCSP?: boolean,
@ -36,6 +36,9 @@ export type BrowserContextOptions = {
extraHTTPHeaders?: network.Headers,
offline?: boolean,
httpCredentials?: types.Credentials,
deviceScaleFactor?: number,
isMobile?: boolean,
hasTouch?: boolean
};
export interface BrowserContext {

View file

@ -350,24 +350,25 @@ export class CRPage implements PageDelegate {
}
async _updateViewport(updateTouch: boolean): Promise<void> {
let viewport = this._browserContext._options.viewport || { width: 0, height: 0 };
const options = this._browserContext._options;
let viewport = options.viewport || { width: 0, height: 0 };
const viewportSize = this._page._state.viewportSize;
if (viewportSize)
viewport = { ...viewport, ...viewportSize };
const isLandscape = viewport.width > viewport.height;
const promises = [
this._client.send('Emulation.setDeviceMetricsOverride', {
mobile: !!viewport.isMobile,
mobile: !!options.isMobile,
width: viewport.width,
height: viewport.height,
screenWidth: viewport.width,
screenHeight: viewport.height,
deviceScaleFactor: viewport.deviceScaleFactor || 1,
deviceScaleFactor: options.deviceScaleFactor || 1,
screenOrientation: isLandscape ? { angle: 90, type: 'landscapePrimary' } : { angle: 0, type: 'portraitPrimary' },
}),
];
if (updateTouch)
promises.push(this._client.send('Emulation.setTouchEmulationEnabled', { enabled: !!viewport.isMobile }));
promises.push(this._client.send('Emulation.setTouchEmulationEnabled', { enabled: !!options.hasTouch }));
await Promise.all(promises);
}

View file

@ -22,684 +22,760 @@ export const DeviceDescriptors: types.Devices = {
'userAgent': 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+',
'viewport': {
'width': 600,
'height': 1024,
'height': 1024
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Blackberry PlayBook landscape': {
'userAgent': 'Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML like Gecko) Version/7.2.1.0 Safari/536.2+',
'viewport': {
'width': 1024,
'height': 600,
'height': 600
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'BlackBerry Z30': {
'userAgent': 'Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'BlackBerry Z30 landscape': {
'userAgent': 'Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, like Gecko) Version/10.0.9.2372 Mobile Safari/537.10+',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy Note 3': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy Note 3 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.3; en-us; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy Note II': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy Note II landscape': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.1; en-us; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy S III': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy S III landscape': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy S5': {
'userAgent': 'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Galaxy S5 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad (gen 6)': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 768,
'height': 1024,
'height': 1024
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad (gen 6) landscape': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 1024,
'height': 768,
'height': 768
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad (gen 7)': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 810,
'height': 1080,
'height': 1080
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad (gen 7) landscape': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 1080,
'height': 810,
'height': 810
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad Mini': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 768,
'height': 1024,
'height': 1024
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad Mini landscape': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 1024,
'height': 768,
'height': 768
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad Pro 11': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 834,
'height': 1194,
'height': 1194
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPad Pro 11 landscape': {
'userAgent': 'Mozilla/5.0 (iPad; CPU OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 1194,
'height': 834,
'height': 834
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 6': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 375,
'height': 667,
'height': 667
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 6 landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 667,
'height': 375,
'height': 375
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 6 Plus': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 414,
'height': 736,
'height': 736
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 6 Plus landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 736,
'height': 414,
'height': 414
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 7': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 375,
'height': 667,
'height': 667
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 7 landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 667,
'height': 375,
'height': 375
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 7 Plus': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 414,
'height': 736,
'height': 736
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 7 Plus landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 736,
'height': 414,
'height': 414
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 8': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 375,
'height': 667,
'height': 667
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 8 landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 667,
'height': 375,
'height': 375
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 8 Plus': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 414,
'height': 736,
'height': 736
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 8 Plus landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 736,
'height': 414,
'height': 414
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone SE': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
'viewport': {
'width': 320,
'height': 568,
'height': 568
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone SE landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1',
'viewport': {
'width': 568,
'height': 320,
'height': 320
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone X': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 375,
'height': 812,
'height': 812
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone X landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
'viewport': {
'width': 812,
'height': 375,
'height': 375
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone XR': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 414,
'height': 896,
'height': 896
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone XR landscape': {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 896,
'height': 414,
'height': 414
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 11': {
'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': 414,
'height': 896,
'height': 896
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'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,
'height': 414
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 11 Pro': {
'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': 375,
'height': 812,
'height': 812
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'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,
'height': 375
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'iPhone 11 Pro Max': {
'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': 414,
'height': 896,
'height': 896
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'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,
'height': 414
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'JioPhone 2': {
'userAgent': 'Mozilla/5.0 (Mobile; LYF/F300B/LYF-F300B-001-01-15-130718-i;Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5',
'viewport': {
'width': 240,
'height': 320,
'height': 320
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'JioPhone 2 landscape': {
'userAgent': 'Mozilla/5.0 (Mobile; LYF/F300B/LYF-F300B-001-01-15-130718-i;Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5',
'viewport': {
'width': 320,
'height': 240,
'height': 240
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Kindle Fire HDX': {
'userAgent': 'Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true',
'viewport': {
'width': 800,
'height': 1280,
'height': 1280
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Kindle Fire HDX landscape': {
'userAgent': 'Mozilla/5.0 (Linux; U; en-us; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true',
'viewport': {
'width': 1280,
'height': 800,
'height': 800
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'LG Optimus L70': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 384,
'height': 640,
'height': 640
},
'deviceScaleFactor': 1.25,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'LG Optimus L70 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; U; Android 4.4.2; en-us; LGMS323 Build/KOT49I.MS32310c) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 640,
'height': 384,
'height': 384
},
'deviceScaleFactor': 1.25,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Microsoft Lumia 550': {
'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': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'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,
'height': 640
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Microsoft Lumia 950': {
'userAgent': 'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 4,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Microsoft Lumia 950 landscape': {
'userAgent': 'Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 950) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/14.14263',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 4,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 10': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 10 Build/MOB31T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Safari/537.36',
'viewport': {
'width': 800,
'height': 1280,
'height': 1280
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 10 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 10 Build/MOB31T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Safari/537.36',
'viewport': {
'width': 1280,
'height': 800,
'height': 800
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 4': {
'userAgent': 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 384,
'height': 640,
'height': 640
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 4 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 4.4.2; Nexus 4 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 640,
'height': 384,
'height': 384
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 5': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 360,
'height': 640,
'height': 640
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 5 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 640,
'height': 360,
'height': 360
},
'deviceScaleFactor': 3,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 5X': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 5X Build/OPR4.170623.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 412,
'height': 732,
'height': 732
},
'deviceScaleFactor': 2.625,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 5X landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 5X Build/OPR4.170623.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 732,
'height': 412,
'height': 412
},
'deviceScaleFactor': 2.625,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 6': {
'userAgent': 'Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 412,
'height': 732,
'height': 732
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 6 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 7.1.1; Nexus 6 Build/N6F26U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 732,
'height': 412,
'height': 412
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 6P': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 412,
'height': 732,
'height': 732
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 6P landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Nexus 6P Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 732,
'height': 412,
'height': 412
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 7': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Safari/537.36',
'viewport': {
'width': 600,
'height': 960,
'height': 960
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nexus 7 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 7 Build/MOB30X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Safari/537.36',
'viewport': {
'width': 960,
'height': 600,
'height': 600
},
'deviceScaleFactor': 2,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nokia Lumia 520': {
'userAgent': 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)',
'viewport': {
'width': 320,
'height': 533,
'height': 533
},
'deviceScaleFactor': 1.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nokia Lumia 520 landscape': {
'userAgent': 'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; NOKIA; Lumia 520)',
'viewport': {
'width': 533,
'height': 320,
'height': 320
},
'deviceScaleFactor': 1.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nokia N9': {
'userAgent': 'Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13',
'viewport': {
'width': 480,
'height': 854,
'height': 854
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Nokia N9 landscape': {
'userAgent': 'Mozilla/5.0 (MeeGo; NokiaN9) AppleWebKit/534.13 (KHTML, like Gecko) NokiaBrowser/8.5.0 Mobile Safari/534.13',
'viewport': {
'width': 854,
'height': 480,
'height': 480
},
'deviceScaleFactor': 1,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Pixel 2': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 411,
'height': 731,
'height': 731
},
'deviceScaleFactor': 2.625,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Pixel 2 landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 731,
'height': 411,
'height': 411
},
'deviceScaleFactor': 2.625,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Pixel 2 XL': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 411,
'height': 823,
'height': 823
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
},
'Pixel 2 XL landscape': {
'userAgent': 'Mozilla/5.0 (Linux; Android 8.0.0; Pixel 2 XL Build/OPD1.170816.004) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36',
'viewport': {
'width': 823,
'height': 411,
'height': 411
},
'deviceScaleFactor': 3.5,
'isMobile': true
}
'isMobile': true,
'hasTouch': true
}
};

View file

@ -73,11 +73,13 @@ export class FFBrowser extends platform.EventEmitter implements Browser {
let viewport;
if (options.viewport) {
// TODO: remove isMobile/hasTouch from the protocol?
if (options.viewport.isMobile)
throw new Error('viewport.isMobile is not supported in Firefox');
if (options.isMobile)
throw new Error('options.isMobile is not supported in Firefox');
if (options.hasTouch)
throw new Error('options.hasTouch is not supported in Firefox');
viewport = {
viewportSize: { width: options.viewport.width, height: options.viewport.height },
deviceScaleFactor: options.viewport.deviceScaleFactor || 1,
deviceScaleFactor: options.deviceScaleFactor || 1,
isMobile: false,
hasTouch: false,
};

View file

@ -77,13 +77,6 @@ export type ScreenshotOptions = ElementScreenshotOptions & {
clip?: Rect,
};
export type Viewport = {
width: number;
height: number;
deviceScaleFactor?: number;
isMobile?: boolean;
};
export type URLMatch = string | RegExp | ((url: URL) => boolean);
export type Credentials = {
@ -117,7 +110,10 @@ export const colorSchemes: Set<ColorScheme> = new Set(['dark', 'light', 'no-pref
export type DeviceDescriptor = {
userAgent: string,
viewport: Viewport,
viewport: Size,
deviceScaleFactor: number,
isMobile: boolean,
hasTouch: boolean
};
export type Devices = { [name: string]: DeviceDescriptor };

View file

@ -155,7 +155,7 @@ export class WKPage implements PageDelegate {
promises.push(session.send('Network.setExtraHTTPHeaders', { headers: this._calculateExtraHTTPHeaders() }));
if (contextOptions.offline)
promises.push(session.send('Network.setEmulateOfflineState', { offline: true }));
promises.push(session.send('Page.setTouchEmulationEnabled', { enabled: contextOptions.viewport ? !!contextOptions.viewport.isMobile : false }));
promises.push(session.send('Page.setTouchEmulationEnabled', { enabled: !!contextOptions.hasTouch }));
if (contextOptions.timezoneId) {
promises.push(session.send('Page.setTimeZone', { timeZone: contextOptions.timezoneId }).
catch(e => { throw new Error(`Invalid timezone ID: ${contextOptions.timezoneId}`); }));
@ -485,7 +485,8 @@ export class WKPage implements PageDelegate {
}
async _updateViewport(): Promise<void> {
let viewport = this._browserContext._options.viewport || { width: 0, height: 0 };
const options = this._browserContext._options;
let viewport = options.viewport || { width: 0, height: 0 };
const viewportSize = this._page._state.viewportSize;
if (viewportSize)
viewport = { ...viewport, ...viewportSize };
@ -493,8 +494,8 @@ export class WKPage implements PageDelegate {
this._pageProxySession.send('Emulation.setDeviceMetricsOverride', {
width: viewport.width,
height: viewport.height,
fixedLayout: !!viewport.isMobile,
deviceScaleFactor: viewport.deviceScaleFactor || 1
fixedLayout: !!options.isMobile,
deviceScaleFactor: options.deviceScaleFactor || 1
}),
this._session.send('Page.setScreenSizeOverride', {
width: viewport.width,

View file

@ -307,7 +307,7 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
expect(await frame.evaluate(() => window.result)).toBe('Clicked');
});
it('should click the button with deviceScaleFactor set', async({browser, server}) => {
const context = await browser.newContext({ viewport: {width: 400, height: 400, deviceScaleFactor: 5} });
const context = await browser.newContext({ viewport: { width: 400, height: 400 }, deviceScaleFactor: 5 });
const page = await context.newPage();
expect(await page.evaluate(() => window.devicePixelRatio)).toBe(5);
await page.setContent('<div style="width:100px;height:100px">spacer</div>');
@ -367,7 +367,7 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROMI
expect(await page.evaluate(() => offsetY)).toBe(WEBKIT ? 1910 + 8 : 1910);
});
it.skip(FFOX)('should click the button with offset with page scale', async({browser, server}) => {
const context = await browser.newContext({ viewport: { width: 400, height: 400, isMobile: true} });
const context = await browser.newContext({ viewport: { width: 400, height: 400 }, isMobile: true });
const page = await context.newPage();
await page.goto(server.PREFIX + '/input/button.html');
await page.$eval('button', button => {

View file

@ -120,7 +120,7 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF
await context.close();
});
it('should detect touch when applying viewport with touches', async({browser, server}) => {
const context = await browser.newContext({ viewport: { width: 800, height: 600, isMobile: true } });
const context = await browser.newContext({ viewport: { width: 800, height: 600 }, hasTouch: true });
const page = await context.newPage();
await page.goto(server.EMPTY_PAGE);
await page.addScriptTag({url: server.PREFIX + '/modernizr.js'});
@ -139,7 +139,7 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF
await context2.close();
});
it.fail(WEBKIT)('should fire orientationchange event', async({browser, server}) => {
const context = await browser.newContext({ viewport: { width: 300, height: 400, isMobile: true } });
const context = await browser.newContext({ viewport: { width: 300, height: 400 }, isMobile: true });
const page = await context.newPage();
await page.goto(server.PREFIX + '/mobile.html');
await page.evaluate(() => {
@ -157,14 +157,14 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF
await context.close();
});
it('default mobile viewports to 980 width', async({browser, server}) => {
const context = await browser.newContext({ viewport: {width: 320, height: 480, isMobile: true} });
const context = await browser.newContext({ viewport: {width: 320, height: 480 }, isMobile: true });
const page = await context.newPage();
await page.goto(server.PREFIX + '/empty.html');
expect(await page.evaluate(() => window.innerWidth)).toBe(980);
await context.close();
});
it('respect meta viewport tag', async({browser, server}) => {
const context = await browser.newContext({ viewport: {width: 320, height: 480, isMobile: true} });
const context = await browser.newContext({ viewport: {width: 320, height: 480 }, isMobile: true });
const page = await context.newPage();
await page.goto(server.PREFIX + '/mobile.html');
expect(await page.evaluate(() => window.innerWidth)).toBe(320);

View file

@ -114,7 +114,8 @@ module.exports.describe = function({testRunner, expect, playwright, CHROMIUM, WE
});
it.skip(FFOX)('should inherit touch support from browser context', async function({browser, server}) {
const context = await browser.newContext({
viewport: { width: 400, height: 500, isMobile: true }
viewport: { width: 400, height: 500 },
hasTouch: true
});
const page = await context.newPage();
await page.goto(server.EMPTY_PAGE);

View file

@ -164,7 +164,7 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM,
expect(screenshot).toBeGolden('screenshot-clip-odd-size.png');
});
it.skip(FFOX)('should work with a mobile viewport', async({browser, server}) => {
const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }});
const context = await browser.newContext({ viewport: { width: 320, height: 480 }, isMobile: true });
const page = await context.newPage();
await page.goto(server.PREFIX + '/overflow.html');
const screenshot = await page.screenshot();
@ -172,7 +172,7 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM,
await context.close();
});
it.skip(FFOX)('should work with a mobile viewport and clip', async({browser, server}) => {
const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }});
const context = await browser.newContext({viewport: { width: 320, height: 480 }, isMobile: true});
const page = await context.newPage();
await page.goto(server.PREFIX + '/overflow.html');
const screenshot = await page.screenshot({ clip: { x: 10, y: 10, width: 100, height: 150 } });
@ -180,7 +180,7 @@ module.exports.describe = function({testRunner, expect, product, FFOX, CHROMIUM,
await context.close();
});
it.skip(FFOX)('should work with a mobile viewport and fullPage', async({browser, server}) => {
const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }});
const context = await browser.newContext({viewport: { width: 320, height: 480 }, isMobile: true});
const page = await context.newPage();
await page.goto(server.PREFIX + '/overflow-large.html');
const screenshot = await page.screenshot({ fullPage: true });