Waiting for popup

Description

Popup is a page event, which runs into problems with the async methods.

I’m trying to click a button that opens a popup.

After the popup opens, I’m trying to call browser.PagesAsync() to get the new page.

Complete minimal example reproducing the issue

Sorry I don’t have a great example, I’m working on an internal company tool and it’s hard to find a hosted page that has a similar popup.

I noticed there’s a sample popup page in the repo… https://github.com/kblok/puppeteer-sharp/tree/master/lib/PuppeteerSharp.TestServer/wwwroot/popup

The code I’m working with looks something like this:

public async Task ClickThisAsync(string elementSelector)
{
	var clickTask = this.CurrentPage.ClickAsync(elementSelector);
	
	var waitForIdleNav = new NavigationOptions {
		WaitUntil = new[] { WaitUntilNavigation.Networkidle0 }
	};
	// doesn't work, need to wait for nav on new page 
	var waitForIdleTask = this.CurrentPage.WaitForNavigationAsync(waitForIdleNav);
	
	// obvious race condition
	this.CurrentPage.Popup += async (sender, args) => {
		this.OpenPages = await _browser.PagesAsync();
		this.CurrentPage = this.OpenPages.FirstOrDefault();
	};
	
	// still a race condition
	//this.CurrentPage.Popup += (sender, args) => {
	//  	this.OpenPages.Add(args.PopupPage);
	//};
	
	await Task.WhenAll(waitForIdleTask, clickTask);
}

Expected behavior:

I think I actually found a solution in JavaScript, but I have no idea if there’s a way to make it work in C# / PuppeteerSharp.

const [_, popup] = await Promise.all([
      page.click('a'),
      new Promise(resolve => page.once('popup', async (popup) => {
        await popup.waitFor('selector', {
          waitUnitl: ['networkidle0', 'load', 'networkidle2', 'domcontentloaded']
        })
        resolve(popup)
      }))
    ]);

(from https://github.com/puppeteer/puppeteer/issues/1412#issuecomment-465849461)

Actual behavior:

The ClickAsync completes before the Popup event.

There’s no way to get a handle on the new Page.

Versions

• Which version of PuppeteerSharp are you using? PuppeteerSharp v2.0.0

• Which .NET runtime and version are you targeting? E.g. .NET framework 4.6.1 or .NET Core 2.0. .NET Core 3.1

[RobertBaldini]

We’re building up our selectors dynamically, so that wasn’t an option for me. But I was trying to think of what else I could await, and looks like I found something that works.

I’m sure there’s some cases where we wouldn’t want to refresh the popup, but I’ll cross that bridge when I come to it. 😃

Thanks for all of your help! Never would have thought of the TaskCompletionSource; definitely learned some things today.

if (requestedBehavior?.IsPopupExpected == true)
{
	var popupTaskSource = new TaskCompletionSource<Page>();
	var popupHandler = new EventHandler<PopupEventArgs>(async (sender, args) => {
		var newPage = args.PopupPage;
		await newPage.ReloadAsync(waitForIdleNav);
		popupTaskSource.TrySetResult(newPage);
	});
	
	this.CurrentPage.Popup += popupHandler;
	await Task.WhenAll(popupTaskSource.Task, clickTask);
	this.CurrentPage.Popup -= popupHandler;
	
	this.OpenPages = await _browser.PagesAsync();
}

[kblok]

Hey @RobertBaldini! You will have a “translation” for that recipe here.