0

Using PuppeteerSharp, how can I wait for an element to finish expanding?

Very similar to this other issue, I have a menu that slides open when clicked. I'm trying to click a link inside the expanding div.

I tried waiting for Visible = true, but I think maybe it becomes visible before it stops expanding. (It doesn't click the #bar.)

var waitOptions = new WaitForSelectorOptions() { Visible = true };
var waitTask = page.WaitForSelectorAsync("#bar", waitOptions);
var clickTask = page.ClickAsync("#foo");
await Task.WhenAll(waitTask, clickTask); // the next line works if I put a breakpoint here
await page.ClickAsync("#bar");

This solution makes sense for Puppeteer in JS. But the ElementHandle doesn't have anything like addEventListener, and I can't find any supported events for TransitionEnd.

async waitForTransitionEnd(element) {
  await page.evaluate((element) => {
    return new Promise((resolve) => {
      const transition = document.querySelector(element);
      const onEnd = function () {
        transition.removeEventListener('transitionend', onEnd);
        resolve();
      };
      transition.addEventListener('transitionend', onEnd);
    });
  }, element);
}

So I tried just implementing that JavaScript from the C#, but it never completes...

Maybe I'm doing something wrong with the event listener...

Unfortunately I don't have any good examples to reproduce it.

    var divSelector = "#foo";
    var expandMenuTask = page.EvaluateFunctionAsync(@"(element) => {
        return new Promise((resolve) => {
          const transition = document.querySelector(element);
          const onEnd = function () {
            transition.removeEventListener('transitionend', onEnd);
            resolve();
          };
          transition.addEventListener('transitionend', onEnd);
        });
      }", divSelector);

    var clickTask = page.ClickAsync(divSelector);

    await Task.WhenAll(expandMenuTask, clickTask);

I might end up going with Task.Delay(1000). Just looking for the right way of doing it.

RJB
  • 2,063
  • 5
  • 29
  • 34
  • Are any attribute changing while expanding? If yes you can stick to them. Also, you can write a wait function that will wait until the height of the div stops changing. – Lanken Sep 17 '20 at 06:27
  • 1
    Maybe this might help? https://stackoverflow.com/questions/61647401/puppeteer-does-not-change-selector/61658589#61658589 – hardkoded Sep 17 '20 at 12:20

0 Answers0