Puppeteer .click hovers instead of clicking

I am using puppeteer to automatically restart my wifi (Linksys Velop) and I can’t seem to click an anchor tag to make the final dialog pop up.

await page.waitForSelector('.tab-section > #diagnostics > #reboot > .block-row > .showForNodes', {visible: true});
await page.$eval('.tab-section > #diagnostics > #reboot > .block-row > .showForNodes', elem => elem.click());

After the element is clicked, the anchor tag looks as if it’s being hovered over, with the blue underline. Here is the relevant markup:

            <fieldset id="reboot" class="left">
                <legend>Restart</legend>
                <div class="block-row text-orphan">
                    <a class="reboot-router showForLinksysRouters">Restart router</a>
                    <a class="reboot-router showForNodes">Restart Velop system</a>
                </div>
            </fieldset>

I have tried page.click() as well as page.$eval(), changing the click count and click delay, but I can’t get it to work. It doesn’t throw an error just doesn’t click. All of the other button clicks (one of which is an anchor tag) works, it’s just this last one. Is there something obvious that I’m missing?

Thanks!

Answer

As all the possible click solutions fails to click on the element, (even with page.waitForSelector): as an ultimate hack you can try to wait until the link becomes clickable by forcing some milliseconds of wait. It can be done with page.waitFor, which was deprecated with pptr 5.3.0, since that page.waitForTimeout can be used.

< Puppeteer 5.3.0

await page.waitFor(4000);
await page.$eval('#reboot > .block-row > .showForNodes', elem => elem.click());

Puppeteer 5.3.0+

await page.waitForTimeout(4000);
await page.$eval('#reboot > .block-row > .showForNodes', elem => elem.click());