/** * Copyright 2018 Google Inc. All rights reserved. * Modifications copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ const utils = require('./utils'); const {FFOX, CHROMIUM, WEBKIT, LINUX} = utils.testOptions(browserType); describe('BrowserContext({viewport})', function() { it('should get the proper default viewport size', async({page, server}) => { await utils.verifyViewport(page, 1280, 720); }); it('should set the proper viewport size', async({page, server}) => { await utils.verifyViewport(page, 1280, 720); await page.setViewportSize({width: 123, height: 456}); await utils.verifyViewport(page, 123, 456); }); it('should emulate device width', async({page, server}) => { expect(page.viewportSize()).toEqual({width: 1280, height: 720}); await page.setViewportSize({width: 200, height: 200}); expect(await page.evaluate(() => window.screen.width)).toBe(200); expect(await page.evaluate(() => matchMedia('(min-device-width: 100px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-width: 300px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-width: 100px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-width: 300px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(true); await page.setViewportSize({width: 500, height: 500}); expect(await page.evaluate(() => window.screen.width)).toBe(500); expect(await page.evaluate(() => matchMedia('(min-device-width: 400px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-width: 600px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-width: 400px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-width: 600px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(device-width: 200px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(device-width: 500px)').matches)).toBe(true); }); it('should emulate device height', async({page, server}) => { expect(page.viewportSize()).toEqual({width: 1280, height: 720}); await page.setViewportSize({width: 200, height: 200}); expect(await page.evaluate(() => window.screen.height)).toBe(200); expect(await page.evaluate(() => matchMedia('(min-device-height: 100px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-height: 300px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-height: 100px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-height: 300px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(device-height: 500px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(device-height: 200px)').matches)).toBe(true); await page.setViewportSize({width: 500, height: 500}); expect(await page.evaluate(() => window.screen.height)).toBe(500); expect(await page.evaluate(() => matchMedia('(min-device-height: 400px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(min-device-height: 600px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-height: 400px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(max-device-height: 600px)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(device-height: 200px)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(device-height: 500px)').matches)).toBe(true); }); it('should not have touch by default', async({page, server}) => { await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false); await page.goto(server.PREFIX + '/detect-touch.html'); expect(await page.evaluate(() => document.body.textContent.trim())).toBe('NO'); }); it('should support touch with null viewport', async({browser, server}) => { const context = await browser.newContext({ viewport: null, hasTouch: true }); const page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(true); await context.close(); }); }); describe.skip(FFOX)('viewport.isMobile', () => { // Firefox does not support isMobile. it('should support mobile emulation', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.innerWidth)).toBe(375); await page.setViewportSize({width: 400, height: 300}); expect(await page.evaluate(() => window.innerWidth)).toBe(400); await context.close(); }); it('should support touch emulation', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(true); expect(await page.evaluate(dispatchTouch)).toBe('Received touch'); await context.close(); function dispatchTouch() { let fulfill; const promise = new Promise(x => fulfill = x); window.ontouchstart = function(e) { fulfill('Received touch'); }; window.dispatchEvent(new Event('touchstart')); fulfill('Did not receive touch'); return promise; } }); it('should be detectable by Modernizr', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto(server.PREFIX + '/detect-touch.html'); expect(await page.evaluate(() => document.body.textContent.trim())).toBe('YES'); 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 }, hasTouch: true }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); await page.addScriptTag({url: server.PREFIX + '/modernizr.js'}); expect(await page.evaluate(() => Modernizr.touchevents)).toBe(true); await context.close(); }); it('should support landscape emulation', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const iPhoneLandscape = playwright.devices['iPhone 6 landscape']; const context1 = await browser.newContext({ ...iPhone }); const page1 = await context1.newPage(); await page1.goto(server.PREFIX + '/mobile.html'); expect(await page1.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(false); const context2 = await browser.newContext({ ...iPhoneLandscape }); const page2 = await context2.newPage(); expect(await page2.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(true); await context1.close(); await context2.close(); }); it('should support window.orientation emulation', async({browser, server}) => { const context = await browser.newContext({ viewport: { width: 300, height: 400 }, isMobile: true }); const page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.orientation)).toBe(0); await page.setViewportSize({width: 400, height: 300}); expect(await page.evaluate(() => window.orientation)).toBe(90); await context.close(); }); it('should fire orientationchange event', async({browser, server}) => { 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(() => { window.counter = 0; window.addEventListener('orientationchange', () => console.log(++window.counter)); }); const event1 = page.waitForEvent('console'); await page.setViewportSize({width: 400, height: 300}); expect((await event1).text()).toBe('1'); const event2 = page.waitForEvent('console'); await page.setViewportSize({width: 300, height: 400}); expect((await event2).text()).toBe('2'); 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 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 page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.innerWidth)).toBe(320); await context.close(); }); }); describe.skip(FFOX)('Page.emulate', function() { it('should work', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto(server.PREFIX + '/mobile.html'); expect(await page.evaluate(() => window.innerWidth)).toBe(375); expect(await page.evaluate(() => navigator.userAgent)).toContain('iPhone'); await context.close(); }); it('should support clicking', async({playwright, browser, server}) => { const iPhone = playwright.devices['iPhone 6']; const context = await browser.newContext({ ...iPhone }); const page = await context.newPage(); await page.goto(server.PREFIX + '/input/button.html'); const button = await page.$('button'); await page.evaluate(button => button.style.marginTop = '200px', button); await button.click(); expect(await page.evaluate(() => result)).toBe('Clicked'); await context.close(); }); it('should scroll to click', async({browser, server}) => { const context = await browser.newContext({ viewport: { width: 400, height: 400, }, deviceScaleFactor: 1, isMobile: true }); const page = await context.newPage(); await page.goto(server.PREFIX + '/input/scrollable.html'); const element = await page.$('#button-91'); await element.click(); expect(await element.textContent()).toBe('clicked'); await context.close(); }); }); describe('Page.emulateMedia type', function() { it('should work', async({page, server}) => { expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false); await page.emulateMedia({ media: 'print' }); expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true); await page.emulateMedia({}); expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true); await page.emulateMedia({ media: '' }); expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false); }); it('should throw in case of bad type argument', async({page, server}) => { let error = null; await page.emulateMedia({ media: 'bad' }).catch(e => error = e); expect(error.message).toBe('Unsupported media: bad'); }); }); describe('Page.emulateMedia colorScheme', function() { it('should work', async({page, server}) => { await page.emulateMedia({ colorScheme: 'light' }); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false); await page.emulateMedia({ colorScheme: 'dark' }); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false); }); it('should default to light', async({page, server}) => { expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false); await page.emulateMedia({ colorScheme: 'dark' }); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false); await page.emulateMedia({ colorScheme: null }); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true); }); it('should throw in case of bad argument', async({page, server}) => { let error = null; await page.emulateMedia({ colorScheme: 'bad' }).catch(e => error = e); expect(error.message).toBe('Unsupported color scheme: bad'); }); it('should work during navigation', async({page, server}) => { await page.emulateMedia({ colorScheme: 'light' }); const navigated = page.goto(server.EMPTY_PAGE); for (let i = 0; i < 9; i++) { await Promise.all([ page.emulateMedia({ colorScheme: ['dark', 'light'][i & 1] }), new Promise(f => setTimeout(f, 1)), ]); } await navigated; expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); }); it('should work in popup', async({browser, server}) => { { const context = await browser.newContext({ colorScheme: 'dark' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); expect(await popup.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false); expect(await popup.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); await context.close(); } { const page = await browser.newPage({ colorScheme: 'light' }); await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); expect(await popup.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true); expect(await popup.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false); await page.close(); } }); it('should work in cross-process iframe', async({browser, server}) => { const page = await browser.newPage({ colorScheme: 'dark' }); await page.goto(server.EMPTY_PAGE); await utils.attachFrame(page, 'frame1', server.CROSS_PROCESS_PREFIX + '/empty.html'); const frame = page.frames()[1]; expect(await frame.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); await page.close(); }); }); describe('BrowserContext({timezoneId})', function() { it('should work', async ({ browser }) => { const func = () => new Date(1479579154987).toString(); { const context = await browser.newContext({ timezoneId: 'America/Jamaica' }); const page = await context.newPage(); expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)'); await context.close(); } { const context = await browser.newContext({ timezoneId: 'Pacific/Honolulu' }); const page = await context.newPage(); expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 08:12:34 GMT-1000 (Hawaii-Aleutian Standard Time)'); await context.close(); } { const context = await browser.newContext({ timezoneId: 'America/Buenos_Aires' }); const page = await context.newPage(); expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 15:12:34 GMT-0300 (Argentina Standard Time)'); await context.close(); } { const context = await browser.newContext({ timezoneId: 'Europe/Berlin' }); const page = await context.newPage(); expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 19:12:34 GMT+0100 (Central European Standard Time)'); await context.close(); } }); it('should throw for invalid timezone IDs when creating pages', async({browser}) => { for (const timezoneId of ['Foo/Bar', 'Baz/Qux']) { let error = null; const context = await browser.newContext({ timezoneId }); const page = await context.newPage().catch(e => error = e); expect(error.message).toBe(`Invalid timezone ID: ${timezoneId}`); await context.close(); } }); it('should work for multiple pages sharing same process', async({browser, server}) => { const context = await browser.newContext({ timezoneId: 'Europe/Moscow' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); let [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); [popup] = await Promise.all([ popup.waitForEvent('popup'), popup.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); await context.close(); }); }); describe('BrowserContext({locale})', function() { it('should affect accept-language header', async({browser, server}) => { const context = await browser.newContext({ locale: 'fr-CH' }); const page = await context.newPage(); const [request] = await Promise.all([ server.waitForRequest('/empty.html'), page.goto(server.EMPTY_PAGE), ]); expect(request.headers['accept-language'].substr(0, 5)).toBe('fr-CH'); await context.close(); }); it('should affect navigator.language', async({browser, server}) => { const context = await browser.newContext({ locale: 'fr-CH' }); const page = await context.newPage(); expect(await page.evaluate(() => navigator.language)).toBe('fr-CH'); await context.close(); }); it('should format number', async({browser, server}) => { { const context = await browser.newContext({ locale: 'en-US' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); expect(await page.evaluate(() => (1000000.50).toLocaleString())).toBe('1,000,000.5'); await context.close(); } { const context = await browser.newContext({ locale: 'fr-CH' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); expect(await page.evaluate(() => (1000000.50).toLocaleString().replace(/\s/g, ' '))).toBe('1 000 000,5'); await context.close(); } }); it('should format date', async({browser, server}) => { { const context = await browser.newContext({ locale: 'en-US', timezoneId: 'America/Los_Angeles' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); const formatted = 'Sat Nov 19 2016 10:12:34 GMT-0800 (Pacific Standard Time)'; expect(await page.evaluate(() => new Date(1479579154987).toString())).toBe(formatted); await context.close(); } { const context = await browser.newContext({ locale: 'de-DE', timezoneId: 'Europe/Berlin' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); expect(await page.evaluate(() => new Date(1479579154987).toString())).toBe( 'Sat Nov 19 2016 19:12:34 GMT+0100 (Mitteleuropäische Normalzeit)'); await context.close(); } }); it('should format number in popups', async({browser, server}) => { const context = await browser.newContext({ locale: 'fr-CH' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => window._popup = window.open(url), server.PREFIX + '/formatted-number.html'), ]); await popup.waitForLoadState('domcontentloaded'); const result = await popup.evaluate(() => window.result); expect(result).toBe('1 000 000,5'); await context.close(); }); it('should affect navigator.language in popups', async({browser, server}) => { const context = await browser.newContext({ locale: 'fr-CH' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => window._popup = window.open(url), server.PREFIX + '/formatted-number.html'), ]); await popup.waitForLoadState('domcontentloaded'); const result = await popup.evaluate(() => window.initialNavigatorLanguage); expect(result).toBe('fr-CH'); await context.close(); }); it('should work for multiple pages sharing same process', async({browser, server}) => { const context = await browser.newContext({ locale: 'ru-RU' }); const page = await context.newPage(); await page.goto(server.EMPTY_PAGE); let [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); [popup] = await Promise.all([ popup.waitForEvent('popup'), popup.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); await context.close(); }); it('should be isolated between contexts', async({browser, server}) => { const context1 = await browser.newContext({ locale: 'en-US' }); const promises = []; // By default firefox limits number of child web processes to 8. for (let i = 0; i< 8; i++) promises.push(context1.newPage()); await Promise.all(promises); const context2 = await browser.newContext({ locale: 'ru-RU' }); const page2 = await context2.newPage(); const localeNumber = () => (1000000.50).toLocaleString(); const numbers = await Promise.all(context1.pages().map(page => page.evaluate(localeNumber))); numbers.forEach(value => expect(value).toBe('1,000,000.5')); expect(await page2.evaluate(localeNumber)).toBe('1 000 000,5'); await Promise.all([ context1.close(), context2.close() ]); }); }); describe('focus', function() { it('should think that it is focused by default', async({page}) => { expect(await page.evaluate('document.hasFocus()')).toBe(true); }); it('should think that all pages are focused', async({page}) => { const page2 = await page.context().newPage(); expect(await page.evaluate('document.hasFocus()')).toBe(true); expect(await page2.evaluate('document.hasFocus()')).toBe(true); await page2.close(); }); it('should focus popups by default', async({page, server}) => { await page.goto(server.EMPTY_PAGE); const [popup] = await Promise.all([ page.waitForEvent('popup'), page.evaluate(url => { window.open(url); }, server.EMPTY_PAGE), ]); expect(await popup.evaluate('document.hasFocus()')).toBe(true); expect(await page.evaluate('document.hasFocus()')).toBe(true); }); it('should provide target for keyboard events', async({page, server}) => { const page2 = await page.context().newPage(); await Promise.all([ page.goto(server.PREFIX + '/input/textarea.html'), page2.goto(server.PREFIX + '/input/textarea.html'), ]); await Promise.all([ page.focus('input'), page2.focus('input'), ]); const text = 'first'; const text2 = 'second'; await Promise.all([ page.keyboard.type(text), page2.keyboard.type(text2), ]); const results = await Promise.all([ page.evaluate('result'), page2.evaluate('result'), ]); expect(results).toEqual([text, text2]); }); it('should not affect mouse event target page', async({page, server}) => { const page2 = await page.context().newPage(); function clickCounter() { document.onclick = () => window.clickCount = (window.clickCount || 0) + 1; } await Promise.all([ page.evaluate(clickCounter), page2.evaluate(clickCounter), page.focus('body'), page2.focus('body'), ]); await Promise.all([ page.mouse.click(1, 1), page2.mouse.click(1, 1), ]); const counters = await Promise.all([ page.evaluate('window.clickCount'), page2.evaluate('window.clickCount'), ]); expect(counters ).toEqual([1,1]); }); it('should change document.activeElement', async({page, server}) => { const page2 = await page.context().newPage(); await Promise.all([ page.goto(server.PREFIX + '/input/textarea.html'), page2.goto(server.PREFIX + '/input/textarea.html'), ]); await Promise.all([ page.focus('input'), page2.focus('textarea'), ]); const active = await Promise.all([ page.evaluate('document.activeElement.tagName'), page2.evaluate('document.activeElement.tagName'), ]); expect(active).toEqual(['INPUT', 'TEXTAREA']); }); it.skip(FFOX && !HEADLESS)('should not affect screenshots', async({page, server, golden}) => { // Firefox headful produces a different image. const page2 = await page.context().newPage(); await Promise.all([ page.setViewportSize({width: 500, height: 500}), page.goto(server.PREFIX + '/grid.html'), page2.setViewportSize({width: 50, height: 50}), page2.goto(server.PREFIX + '/grid.html'), ]); await Promise.all([ page.focus('body'), page2.focus('body'), ]); const screenshots = await Promise.all([ page.screenshot(), page2.screenshot(), ]); expect(screenshots[0]).toBeGolden(golden('screenshot-sanity.png')); expect(screenshots[1]).toBeGolden(golden('grid-cell-0.png')); }); it('should change focused iframe', async({page, server}) => { await page.goto(server.EMPTY_PAGE); const [frame1, frame2] = await Promise.all([ utils.attachFrame(page, 'frame1', server.PREFIX + '/input/textarea.html'), utils.attachFrame(page, 'frame2', server.PREFIX + '/input/textarea.html'), ]); function logger() { self._events = []; const element = document.querySelector('input'); element.onfocus = element.onblur = (e) => self._events.push(e.type); } await Promise.all([ frame1.evaluate(logger), frame2.evaluate(logger), ]); const focused = await Promise.all([ frame1.evaluate('document.hasFocus()'), frame2.evaluate('document.hasFocus()'), ]); expect(focused).toEqual([false, false]); { await frame1.focus('input'); const events = await Promise.all([ frame1.evaluate('self._events'), frame2.evaluate('self._events'), ]); expect(events).toEqual([['focus'], []]); const focused = await Promise.all([ frame1.evaluate('document.hasFocus()'), frame2.evaluate('document.hasFocus()'), ]); expect(focused).toEqual([true, false]); } { await frame2.focus('input'); const events = await Promise.all([ frame1.evaluate('self._events'), frame2.evaluate('self._events'), ]); expect(events).toEqual([['focus', 'blur'], ['focus']]); const focused = await Promise.all([ frame1.evaluate('document.hasFocus()'), frame2.evaluate('document.hasFocus()'), ]); expect(focused).toEqual([false, true]); } }); });