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.