Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Synthetics Doesn’t Handle Popups (new tab or new window) #253

Closed
paulb-elastic opened this issue Apr 12, 2021 · 9 comments · Fixed by #372 or #488
Closed

Synthetics Doesn’t Handle Popups (new tab or new window) #253

paulb-elastic opened this issue Apr 12, 2021 · 9 comments · Fixed by #372 or #488
Labels
bug Something isn't working

Comments

@paulb-elastic
Copy link
Contributor

The Synthetic Agent is capturing the performance data and screenshots for the main tab/page of the browser.

If a user journey causes a new tab or window (popup) to be opened, the metrics and screen shots are still taken from the initial (main) page, so there are no new metrics for the new tab/page, and the screenshot still reflects the original page.

This can be recreated by extending the todos folder/app

Create ./examples/todos/app/popup1.html

<html>
<head>
</head>
<body>
Test popup page 1
<p><a href="popup2.html" onclick="return !window.open(this.href, 'Test Page', 'width=500,height=500')" target="_blank" id="linkWithPopup">Click</a> here (id=linkWithPopup) to open - Test Page - popup window</p>
<p><a href="popup2.html" target="_blank" id="linkWithPopupNoNewWindow">Click</a> here (id=linkWithPopupNoNewWindow) to open - Test Page - new tab (not new window)</p>
</body>
</html>

Create ./examples/todos/app/popup2.html

<html>
<head>
</head>
<body>
Test popup page 2
</body>
</html>

Create ./examples/todos/popup.journey.ts

import { journey, step } from '@elastic/synthetics';
import { deepStrictEqual } from 'assert';
import { join } from 'path';

journey('Popup Test', async ({ page }) => {
  step('Popup Landing Page', async () => {
    const path = 'file://' + join(__dirname, 'app', 'popup1.html');
    await page.goto(path);
    await page.waitForSelector('text=Test popup page 1');
  });

  step('Open Popup', async () => {
    // Test 1 - new window (popup)
    await page.click('#linkWithPopup');

    // Test 2 - new tab (not new popup window)
    //await page.click('#linkWithPopupNoNewWindow');

    const [popup] = await Promise.all([
      page.waitForEvent('popup'),
      page.click('#linkWithPopup')
    ]);
    await popup.waitForSelector('text=Test popup page 2');
  });
});

Note that there are two test cases (both will fail in the same way)

  • Test 1 opens a new popup window
  • Test 2 (commented out) opens a new tab (not a separate popup window)

We can act on the new/popup page, for example with popup.waitForSelector as shown in this example, however the Synthetic Agent is still connected to the CDP from the original window.

When running this, you will notice:

  • The screenshot for step 2 still shows page 1 (the original window)
  • There is no waterfall chart (no timing metrics) for step 2
@vigneshshanmugam
Copy link
Member

Needs this to be addressed - #287

@vigneshshanmugam vigneshshanmugam added the bug Something isn't working label Jul 15, 2021
This was referenced Jul 21, 2021
Merged
Merged
@paulb-elastic
Copy link
Contributor Author

paulb-elastic commented Aug 11, 2021 •
edited
Loading

@vigneshshanmugam with the latest version that includes these PRs, I can now see the correct screenshot in step 2, which is great!!

On step 2, I still don't see any network traffic, is that what you'd expect with these updates, or is #287 still needed?

@vigneshshanmugam
Copy link
Member

@paulb-elastic Thanks for testing, We need this - #287 PR to be resolved to get the network traffic for these popups.

@vigneshshanmugam vigneshshanmugam mentioned this issue Sep 8, 2021
Merged
@paulb-elastic
Copy link
Contributor Author

@vigneshshanmugam I have tried this again, but still don't see the waterfall chart for step 2 (when step 2 is a popup page). Let me know if you want to catch up and go through it.

@paulb-elastic
Copy link
Contributor Author

@vigneshshanmugam I have tried this again, but still don't see the waterfall chart for step 2 (when step 2 is a popup page). Let me know if you want to catch up and go through it.

For anyone following, this is working with inline monitors, so is likely to be an issue with my local glocal package build of Synthetics (as that will be used by Heartbeat, different to inline monitors)

@vigneshshanmugam
Copy link
Member

Reopening as result of this issue - #401

@paulb-elastic
Copy link
Contributor Author

Depends on https://github.com/elastic/obs-dc-team/issues/613

@paulb-elastic
Copy link
Contributor Author

@vigneshshanmugam would you expect beta.18 or other changes (OS change) that have gone in, to fix this? I've tried with today's 8.0.0-SNAPSHOT, and, although I get the screenshot for the second step (the popup page), I get no waterfall chart. Are we still dependent on an update from Playwright and/or Chromium, or elsewhere?

@vigneshshanmugam
Copy link
Member

Not really, We need to follow the steps to fix this

  • Revert this PR which uses PW 1.14.0 which fires correct order of events for popups. fix: revert Playwright to 1.14.0 #402
  • Update PW to latest version just to make sure we support all OS distributions.

@vigneshshanmugam vigneshshanmugam mentioned this issue Apr 12, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
2 participants
@vigneshshanmugam @paulb-elastic