From 4d2a503c44281eb5c961976abbaff348d6efb306 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Thu, 9 Jan 2020 17:06:06 -0800 Subject: [PATCH] feat(webkit): rebaseline Joel's pass all viewport tests PR (#440) --- src/page.ts | 4 +++- src/webkit/wkPage.ts | 11 ++++++++--- test/click.spec.js | 2 +- test/emulation.spec.js | 21 +++++++++++---------- 4 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/page.ts b/src/page.ts index e5eba7d8b0..6eecf2d823 100644 --- a/src/page.ts +++ b/src/page.ts @@ -82,6 +82,7 @@ type PageState = { interceptNetwork: boolean | null; offlineMode: boolean | null; credentials: types.Credentials | null; + hasTouch: boolean | null; }; export type FileChooser = { @@ -124,7 +125,8 @@ export class Page extends platform.EventEmitter { cacheEnabled: null, interceptNetwork: null, offlineMode: null, - credentials: null + credentials: null, + hasTouch: null }; this.accessibility = new accessibility.Accessibility(delegate.getAccessibilityTree.bind(delegate)); this.keyboard = new input.Keyboard(delegate.rawKeyboard); diff --git a/src/webkit/wkPage.ts b/src/webkit/wkPage.ts index d07f7293c8..340e83e74e 100644 --- a/src/webkit/wkPage.ts +++ b/src/webkit/wkPage.ts @@ -114,6 +114,8 @@ export class WKPage implements PageDelegate { promises.push(session.send('Page.setBypassCSP', { enabled: true })); if (this._page._state.extraHTTPHeaders !== null) promises.push(this._setExtraHTTPHeaders(session, this._page._state.extraHTTPHeaders)); + if (this._page._state.hasTouch) + promises.push(session.send('Page.setTouchEmulationEnabled', { enabled: true })); await Promise.all(promises).catch(e => { if (session.isDisposed()) return; @@ -318,12 +320,15 @@ export class WKPage implements PageDelegate { } async setViewport(viewport: types.Viewport): Promise { - if (viewport.isLandscape || viewport.hasTouch) - throw new Error('Not implemented'); const width = viewport.width; const height = viewport.height; const fixedLayout = !!viewport.isMobile; - await this._pageProxySession.send('Emulation.setDeviceMetricsOverride', {width, height, fixedLayout, deviceScaleFactor: viewport.deviceScaleFactor || 1 }); + const deviceScaleFactor = viewport.deviceScaleFactor || 1; + this._page._state.hasTouch = !!viewport.hasTouch; + await Promise.all([ + this._pageProxySession.send('Emulation.setDeviceMetricsOverride', {width, height, fixedLayout, deviceScaleFactor }), + this._session.send('Page.setTouchEmulationEnabled', { enabled: !!viewport.hasTouch }), + ]); } setCacheEnabled(enabled: boolean): Promise { diff --git a/test/click.spec.js b/test/click.spec.js index 42aa318f3a..fdb8934e59 100644 --- a/test/click.spec.js +++ b/test/click.spec.js @@ -219,7 +219,7 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROME expect(error.message).toBe('No node found for selector: button.does-not-exist'); }); // @see https://github.com/GoogleChrome/puppeteer/issues/161 - it.skip(WEBKIT)('should not hang with touch-enabled viewports', async({page, server}) => { + it('should not hang with touch-enabled viewports', async({page, server}) => { await page.setViewport(playwright.devices['iPhone 6'].viewport); await page.mouse.down(); await page.mouse.move(100, 10); diff --git a/test/emulation.spec.js b/test/emulation.spec.js index 0c26ed3167..f2a8733903 100644 --- a/test/emulation.spec.js +++ b/test/emulation.spec.js @@ -28,7 +28,7 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROME await page.setViewport({width: 123, height: 456}); expect(page.viewport()).toEqual({width: 123, height: 456}); }); - it.skip(WEBKIT)('should support mobile emulation', async({page, server}) => { + it('should support mobile emulation', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.innerWidth)).toBe(800); await page.setViewport(iPhone.viewport); @@ -36,7 +36,7 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROME await page.setViewport({width: 400, height: 300}); expect(await page.evaluate(() => window.innerWidth)).toBe(400); }); - it.skip(WEBKIT)('should support touch emulation', async({page, server}) => { + it('should support touch emulation', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false); await page.setViewport(iPhone.viewport); @@ -58,25 +58,26 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROME return promise; } }); - it.skip(WEBKIT)('should be detectable by Modernizr', async({page, server}) => { + it('should be detectable by Modernizr', async({page, server}) => { await page.goto(server.PREFIX + '/detect-touch.html'); expect(await page.evaluate(() => document.body.textContent.trim())).toBe('NO'); await page.setViewport(iPhone.viewport); await page.goto(server.PREFIX + '/detect-touch.html'); expect(await page.evaluate(() => document.body.textContent.trim())).toBe('YES'); }); - it.skip(WEBKIT)('should detect touch when applying viewport with touches', async({page, server}) => { + it('should detect touch when applying viewport with touches', async({page, server}) => { await page.setViewport({ width: 800, height: 600, hasTouch: true }); await page.addScriptTag({url: server.PREFIX + '/modernizr.js'}); expect(await page.evaluate(() => Modernizr.touchevents)).toBe(true); }); - it.skip(FFOX || WEBKIT)('should support landscape emulation', async({page, server}) => { + it.skip(FFOX)('should support landscape emulation', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html'); - expect(await page.evaluate(() => screen.orientation.type)).toBe('portrait-primary'); + await page.setViewport(iPhone.viewport); + expect(await page.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(false); await page.setViewport(iPhoneLandscape.viewport); - expect(await page.evaluate(() => screen.orientation.type)).toBe('landscape-primary'); + expect(await page.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(true) await page.setViewport({width: 100, height: 100}); - expect(await page.evaluate(() => screen.orientation.type)).toBe('portrait-primary'); + expect(await page.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(false); }); it.skip(FFOX || WEBKIT)('should fire orientationchange event', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html'); @@ -107,13 +108,13 @@ module.exports.describe = function({testRunner, expect, playwright, FFOX, CHROME }); describe('Page.emulate', function() { - it.skip(WEBKIT)('should work', async({newPage, server}) => { + it('should work', async({newPage, server}) => { const page = await newPage({ viewport: iPhone.viewport, userAgent: iPhone.userAgent }); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.innerWidth)).toBe(375); expect(await page.evaluate(() => navigator.userAgent)).toContain('iPhone'); }); - it.skip(WEBKIT)('should support clicking', async({newPage, server}) => { + it('should support clicking', async({newPage, server}) => { const page = await newPage({ viewport: iPhone.viewport, userAgent: iPhone.userAgent }); await page.goto(server.PREFIX + '/input/button.html'); const button = await page.$('button');