playwright/test/chromium/oopif.spec.ts

/**
 * Copyright 2017 Google Inc. All rights reserved.
 *
 * 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.
 */

import { options } from '../playwright.fixtures';
import { registerWorkerFixture } from '../../test-runner';

registerWorkerFixture('browser', async ({browserType, defaultBrowserOptions}, test) => {
  const browser = await browserType.launch({
    ...defaultBrowserOptions,
    args: (defaultBrowserOptions.args || []).concat(['--site-per-process'])
  });
  await test(browser);
  await browser.close();
});

it.skip(!options.CHROMIUM)('should report oopif frames', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
  expect(page.frames().length).toBe(2);
  expect(await page.frames()[1].evaluate(() => '' + location.href)).toBe(server.CROSS_PROCESS_PREFIX + '/grid.html');
});

it.skip(!options.CHROMIUM)('should handle oopif detach', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
  expect(page.frames().length).toBe(2);
  const frame = page.frames()[1];
  expect(await frame.evaluate(() => '' + location.href)).toBe(server.CROSS_PROCESS_PREFIX + '/grid.html');
  const [detachedFrame] = await Promise.all([
    page.waitForEvent('framedetached'),
    page.evaluate(() => document.querySelector('iframe').remove()),
  ]);
  expect(detachedFrame).toBe(frame);
});

it.skip(!options.CHROMIUM)('should handle remote -> local -> remote transitions', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  expect(await page.frames()[1].evaluate(() => '' + location.href)).toBe(server.CROSS_PROCESS_PREFIX + '/grid.html');
  await Promise.all([
    page.frames()[1].waitForNavigation(),
    page.evaluate('goLocal()'),
  ]);
  expect(await page.frames()[1].evaluate(() => '' + location.href)).toBe(server.PREFIX + '/grid.html');
  expect(await countOOPIFs(browser)).toBe(0);
  await Promise.all([
    page.frames()[1].waitForNavigation(),
    page.evaluate('goRemote()'),
  ]);
  expect(await page.frames()[1].evaluate(() => '' + location.href)).toBe(server.CROSS_PROCESS_PREFIX + '/grid.html');
  expect(await countOOPIFs(browser)).toBe(1);
});

it.fixme(options.CHROMIUM).skip(!options.CHROMIUM)('should get the proper viewport', async({browser, page, server}) => {
  expect(page.viewportSize()).toEqual({width: 1280, height: 720});
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  const oopif = page.frames()[1];
  expect(await oopif.evaluate(() => screen.width)).toBe(1280);
  expect(await oopif.evaluate(() => screen.height)).toBe(720);
  expect(await oopif.evaluate(() => matchMedia('(device-width: 1280px)').matches)).toBe(true);
  expect(await oopif.evaluate(() => matchMedia('(device-height: 720px)').matches)).toBe(true);
  expect(await oopif.evaluate(() => 'ontouchstart' in window)).toBe(false);
  await page.setViewportSize({width: 123, height: 456});
  expect(await oopif.evaluate(() => screen.width)).toBe(123);
  expect(await oopif.evaluate(() => screen.height)).toBe(456);
  expect(await oopif.evaluate(() => matchMedia('(device-width: 123px)').matches)).toBe(true);
  expect(await oopif.evaluate(() => matchMedia('(device-height: 456px)').matches)).toBe(true);
  expect(await oopif.evaluate(() => 'ontouchstart' in window)).toBe(false);
});

it.skip(!options.CHROMIUM)('should expose function', async({browser, page, server}) => {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  const oopif = page.frames()[1];
  await page.exposeFunction('mul', (a, b) => a * b);
  const result = await oopif.evaluate(async function() {
    return await window['mul'](9, 4);
  });
  expect(result).toBe(36);
});

it.skip(!options.CHROMIUM)('should emulate media', async({browser, page, server}) => {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  const oopif = page.frames()[1];
  expect(await oopif.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
  await page.emulateMedia({ colorScheme: 'dark' });
  expect(await oopif.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
});

it.skip(!options.CHROMIUM)('should emulate offline', async({browser, page, context, server}) => {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  const oopif = page.frames()[1];
  expect(await oopif.evaluate(() => navigator.onLine)).toBe(true);
  await context.setOffline(true);
  expect(await oopif.evaluate(() => navigator.onLine)).toBe(false);
});

it.skip(!options.CHROMIUM)('should support context options', async({browser, server, playwright}) => {
  const iPhone = playwright.devices['iPhone 6']
  const context = await browser.newContext({ ...iPhone, timezoneId: 'America/Jamaica', locale: 'fr-CH', userAgent: 'UA' });
  const page = await context.newPage();

  const [request] = await Promise.all([
    server.waitForRequest('/grid.html'),
    page.goto(server.PREFIX + '/dynamic-oopif.html'),
  ]);
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  const oopif = page.frames()[1];

  expect(await oopif.evaluate(() => 'ontouchstart' in window)).toBe(true);
  expect(await oopif.evaluate(() => new Date(1479579154987).toString())).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (heure normale de l’Est nord-américain)');
  expect(await oopif.evaluate(() => navigator.language)).toBe('fr-CH');
  expect(await oopif.evaluate(() => navigator.userAgent)).toBe('UA');
  expect(request.headers['user-agent']).toBe('UA');

  await context.close();
});

it.skip(!options.CHROMIUM)('should respect route', async({browser, page, server}) => {
  let intercepted = false;
  await page.route('**/digits/0.png', route => {
    intercepted = true;
    route.continue();
  });
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  expect(intercepted).toBe(true);
});

it.skip(!options.CHROMIUM)('should take screenshot', async({browser, page, server, golden}) => {
  await page.setViewportSize({width: 500, height: 500});
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(page.frames().length).toBe(2);
  expect(await countOOPIFs(browser)).toBe(1);
  expect(await page.screenshot()).toMatchImage(golden('screenshot-oopif.png'), { threshold: 0.3 });
});

it.skip(!options.CHROMIUM)('should load oopif iframes with subresources and request interception', async function({browser, page, server, context}) {
  await page.route('**/*', route => route.continue());
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
});

it.skip(!options.CHROMIUM)('should report main requests', async function({browser, page, server}) {
  const requestFrames = [];
  page.on('request', r => requestFrames.push(r.frame()));
  const finishedFrames = [];
  page.on('requestfinished', r => finishedFrames.push(r.frame()));

  await page.goto(server.PREFIX + '/empty.html');
  const main = page.mainFrame();

  await main.evaluate(url => {
    const iframe = document.createElement('iframe');
    iframe.src = url;
    document.body.appendChild(iframe);
    return new Promise(f => iframe.onload = f);
  }, server.CROSS_PROCESS_PREFIX + '/empty.html');
  expect(page.frames().length).toBe(2);
  const child = main.childFrames()[0];
  await child.waitForLoadState('domcontentloaded');

  await child.evaluate(url => {
    const iframe = document.createElement('iframe');
    iframe.src = url;
    document.body.appendChild(iframe);
    return new Promise(f => iframe.onload = f);
  }, server.PREFIX + '/empty.html');
  expect(page.frames().length).toBe(3);
  const grandChild = child.childFrames()[0];
  await grandChild.waitForLoadState('domcontentloaded');

  expect(await countOOPIFs(browser)).toBe(2);
  expect(requestFrames[0]).toBe(main);
  expect(finishedFrames[0]).toBe(main);
  expect(requestFrames[1]).toBe(child);
  expect(finishedFrames[1]).toBe(child);
  expect(requestFrames[2]).toBe(grandChild);
  expect(finishedFrames[2]).toBe(grandChild);
});

it.skip(!options.CHROMIUM)('should support exposeFunction', async function({browser, context, page, server}) {
  await context.exposeFunction('dec', a => a - 1);
  await page.exposeFunction('inc', a => a + 1);
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
  expect(page.frames().length).toBe(2);
  expect(await page.frames()[0].evaluate(() => window['inc'](3))).toBe(4);
  expect(await page.frames()[1].evaluate(() => window['inc'](4))).toBe(5);
  expect(await page.frames()[0].evaluate(() => window['dec'](3))).toBe(2);
  expect(await page.frames()[1].evaluate(() => window['dec'](4))).toBe(3);
});

it.skip(!options.CHROMIUM)('should support addInitScript', async function({browser, context, page, server}) {
  await context.addInitScript(() => window['bar'] = 17);
  await page.addInitScript(() => window['foo'] = 42);
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
  expect(page.frames().length).toBe(2);
  expect(await page.frames()[0].evaluate(() => window['foo'])).toBe(42);
  expect(await page.frames()[1].evaluate(() => window['foo'])).toBe(42);
  expect(await page.frames()[0].evaluate(() => window['bar'])).toBe(17);
  expect(await page.frames()[1].evaluate(() => window['bar'])).toBe(17);
});
// @see https://github.com/microsoft/playwright/issues/1240
it.skip(!options.CHROMIUM)('should click a button when it overlays oopif', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/button-overlay-oopif.html');
  expect(await countOOPIFs(browser)).toBe(1);
  await page.click('button');
  expect(await page.evaluate(() => window['BUTTON_CLICKED'])).toBe(true);
});

it.skip(!options.CHROMIUM)('should report google.com frame with headful', async({browserType, defaultBrowserOptions, server}) => {
  // @see https://github.com/GoogleChrome/puppeteer/issues/2548
  // https://google.com is isolated by default in Chromium embedder.
  const browser = await browserType.launch({...defaultBrowserOptions, headless: false});
  const page = await browser.newPage();
  await page.goto(server.EMPTY_PAGE);
  await page.route('**/*', route => {
    route.fulfill({body: 'YO, GOOGLE.COM'});
  });
  await page.evaluate(() => {
    const frame = document.createElement('iframe');
    frame.setAttribute('src', 'https://google.com/');
    document.body.appendChild(frame);
    return new Promise(x => frame.onload = x);
  });
  await page.waitForSelector('iframe[src="https://google.com/"]');
  expect(await countOOPIFs(browser)).toBe(1);
  const urls = page.frames().map(frame => frame.url());
  expect(urls).toEqual([
    server.EMPTY_PAGE,
    'https://google.com/'
  ]);
  await browser.close();
});

it.skip(!options.CHROMIUM)('ElementHandle.boundingBox() should work', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  await page.$eval('iframe', iframe => {
    iframe.style.width = '500px';
    iframe.style.height = '500px';
    iframe.style.marginLeft = '42px';
    iframe.style.marginTop = '17px';
  });
  await page.frames()[1].goto(page.frames()[1].url());

  expect(await countOOPIFs(browser)).toBe(1);
  const handle1 = await page.frames()[1].$('.box:nth-of-type(13)');
  expect(await handle1.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });

  await Promise.all([
    page.frames()[1].waitForNavigation(),
    page.evaluate('goLocal()'),
  ]);
  expect(await countOOPIFs(browser)).toBe(0);
  const handle2 = await page.frames()[1].$('.box:nth-of-type(13)');
  expect(await handle2.boundingBox()).toEqual({ x: 100 + 42, y: 50 + 17, width: 50, height: 50 });
});

it.skip(!options.CHROMIUM)('should click', async function({browser, page, server}) {
  await page.goto(server.PREFIX + '/dynamic-oopif.html');
  await page.$eval('iframe', iframe => {
    iframe.style.width = '500px';
    iframe.style.height = '500px';
    iframe.style.marginLeft = '102px';
    iframe.style.marginTop = '117px';
  });
  await page.frames()[1].goto(page.frames()[1].url());

  expect(await countOOPIFs(browser)).toBe(1);
  const handle1 = await page.frames()[1].$('.box:nth-of-type(13)');
  await handle1.evaluate(div => div.addEventListener('click', () => window['_clicked'] = true, false));
  await handle1.click();
  expect(await handle1.evaluate(() => window['_clicked'])).toBe(true);
});

async function countOOPIFs(browser) {
  const browserSession = await browser.newBrowserCDPSession();
  const oopifs = [];
  browserSession.on('Target.targetCreated', async ({targetInfo}) => {
    if (targetInfo.type === 'iframe')
       oopifs.push(targetInfo);
  });
  await browserSession.send('Target.setDiscoverTargets', { discover: true });
  await browserSession.detach();
  return oopifs.length;
}