Getting DomException for DropDown while using await.Hover

Question

While using the following events in puppeteer getting error.

I had tried with both the method using Xpath and selector, unable to find the element through the script. Whereas, same selector can be traced or can be found in dev tools > Elements tab during the snippet code execution

Method 1: Selector

await page.waitForSelector('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span', {visible: true});
await page.hover('#menu-item-\$PpyNavigation1564144649507\$ppyElements\$l1\$ppyElements\$l4 > a > span > span');

Error message:

events.js:116 (node:24684) UnhandledPromiseRejectionWarning: Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4 > a > span > span' is not a valid selector. at predicate (eval at waitForPredicatePageFunction (:2:21), :6:20) at eval (eval at waitForPredicatePageFunction (:2:21), :25:7) at onRaf ( puppeteer_evaluation_script :56:33) at pollRaf ( puppeteer_evaluation_script :48:5)

Answer 1

Update the below element as below it has worked

Earlier: Not working

 await page.waitForSelector('#menu-item-\\$PpyNavigation1564144649507\\$ppyElements\\$l1\\$ppyElements\\$l4 > a > span > span', {visible: true}); await page.hover('#menu-item-\\$PpyNavigation1564144649507\\$ppyElements\\$l1\\$ppyElements\\$l4 > a > span > span'); 

Updated: Working

 'await page.waitForSelector('li[id="menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4"] > a > span > span', {visible: true}); await page.hover('li[id="menu-item-$PpyNavigation1564144649507$ppyElements$l1$ppyElements$l4"] > a > span > span'); 

`'