test(iframes): Add cross-origin clicks (microsoft#3170)

This changeset adds two tests aimed at reproducing microsoft#3170 where a link in a cross-domain iframe fails to get clicked even though the element is found. In addition to the cross-domain test, we add a `srcdoc` test to baseline the source of failing behavior. In the matrix of {Firefox, Chromium, Webkit } X { srcdoc, cross-domain } X { Headfull, Headless }, only the Chromium Headfull test with cross-domain iframe fails. Notably, it fails while logging the same message as reported in the original issue: ``` pw:api retrying click action [] +0ms pw:api waiting for element to be visible, enabled and not moving [] +0ms pw:api element is visible, enabled and does not move [] +25ms pw:api scrolling into view if needed [] +0ms pw:api done scrolling [] +1ms pw:api checking that element receives pointer events at (35.32,17) [] +1ms pw:api element does not receive pointer events [] … ```
rwoll · Jul 27, 2020 · ed24097 · ed24097
1 parent d0b758a
commit ed24097
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/test/assets/frames/link.html b/test/assets/frames/link.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Page with Link</title>
+    <style>
+      body {
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <a id="link-target" href="javascript:window.alert(47)">click me</a>
+  </body>
+</html>
diff --git a/test/click.jest.js b/test/click.jest.js
@@ -307,6 +307,61 @@ describe('Page.click', function() {
     await frame.click('button');
     expect(await frame.evaluate(() => window.result)).toBe('Clicked');
   });
+  it('should click the visible link in a iframe (srcdoc) in fixed position div', async({page, server}) => {
+    const clickNotification = new Promise(fulfill => {
+      page.on('dialog', dialog => {
+        fulfill(dialog.message());
+        dialog.accept();
+      });
+    });
+    await page.goto(server.EMPTY_PAGE);
+    await page.setViewportSize({width:1920, height:1080});
+    await page.setContent(`
+    <div style="position:fixed;top:300px;left:300px;width:400px;height:400px;">
+        <iframe srcdoc='
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <title>Page with Link</title>
+            <style>
+              body {
+                background-color: red;
+              }
+            </style>
+          </head>
+          <body>
+            <a id="link-target" href="javascript:window.alert(47)">click me</a>
+          </body>
+        </html>
+        '  width="100%" height="100%" > </iframe>
+    </div>
+    `)
+    const frame = page.frames()[1];
+    const link = await frame.$("#link-target");
+    await link.click();
+    const msg = await clickNotification;
+    expect(msg).toBe("47");
+  })
+  it.fail(CHROMIUM && !HEADLESS)('should click the visible link in an iframe (cross-origin) in fixed position div', async({page, server}) => {
+    const clickNotification = new Promise(fulfill => {
+      page.on('dialog', dialog => {
+        fulfill(dialog.message());
+        dialog.accept();
+      });
+    });
+    await page.goto(server.EMPTY_PAGE);
+    await page.setViewportSize({width:1920, height:1080});
+    await page.setContent(`
+    <div style="position:fixed;top:300px;left:300px;width:400px;height:400px;">
+        <iframe src="${server.CROSS_PROCESS_PREFIX + '/frames/link.html'}"  width="100%" height="100%" > </iframe>
+    </div>
+    `)
+    const frame = page.frames()[1];
+    const link = await frame.$("#link-target");
+    await link.click();
+    const msg = await clickNotification;
+    expect(msg).toBe("47");
+  })
   it('should click the button with deviceScaleFactor set', async({browser, server}) => {
     const context = await browser.newContext({ viewport: { width: 400, height: 400 }, deviceScaleFactor: 5 });
     const page = await context.newPage();