test(chromium): add more oopif tests (#1685)

.github/workflows/tests.yml

@@ -34,6 +34,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-chromium'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -60,6 +61,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-chromium'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -87,6 +89,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-chromium'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -118,6 +121,7 @@ jobs:
         DEBUG: "*,-pw:wrapped*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-webkit'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -144,6 +148,7 @@ jobs:
         DEBUG: "*,-pw:wrapped*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-webkit'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -171,6 +176,7 @@ jobs:
         DEBUG: "*,-pw:wrapped*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-webkit'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -202,6 +208,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-firefox'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -228,6 +235,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-firefox'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:
@@ -255,6 +263,7 @@ jobs:
         DEBUG: "*"
     # Ensure output folder exists just in case it was not created by the test run.
     - run: node -e "require('fs').mkdirSync(require('path').join('test', 'output-firefox'), {recursive:true})"
+      if: failure()
     - uses: actions/upload-artifact@v1
       if: failure()
       with:

test/assets/dynamic-oopif.html

@@ -1,3 +1,15 @@
+<style>
+  body, html {
+    margin: 0;
+  }
+  iframe {
+    width: 300px;
+    height: 300px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+</style>
 <script>
 function goLocal() {
   document.querySelector('iframe').src = location.href.replace('dynamic-oopif.html', 'grid.html');

test/chromium/oopif.spec.js

@@ -44,17 +44,107 @@ describe('OOPIF', function() {
   it('should handle remote -> local -> remote transitions', async function({browser, page, server, context}) {
     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.fail(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('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 mul(9, 4);
+    });
+    expect(result).toBe(36);
+  });
+  it('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('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('should support context options', async({browser, server}) => {
+    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('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.fail(CHROMIUM)('should take screenshot', async({browser, page, server}) => {
+    // Screenshot differs on the bots, needs debugging.
+    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()).toBeGolden('screenshot-iframe.png');
   });
   it('should load oopif iframes with subresources and request interception', async function({browser, page, server, context}) {
     await page.route('**/*', route => route.continue());
@@ -62,14 +152,14 @@ describe('OOPIF', function() {
     expect(await countOOPIFs(browser)).toBe(1);
   });
   // @see https://github.com/microsoft/playwright/issues/1240
-  xit('should click a button when it overlays oopif', async function({browser, page, server, context}) {
+  it.fail(CHROMIUM)('should click a button when it overlays oopif', async function({browser, page, server, context}) {
     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('should report google.com frame with headful', async({browserType, defaultBrowserOptions, server}) => {
-    // TODO: Support OOOPIF. @see https://github.com/GoogleChrome/puppeteer/issues/2548
+    // @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();
@@ -84,6 +174,7 @@ describe('OOPIF', function() {
       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,