CODEWITHSUNDEEP
javascriptnode.jsclickpuppeteer
ghostFishKillah
ghostFishKillah

Reputation: 41

Node.js Puppeteer clicking on the expand arrow

I am trying to click on the expand icon for "My Team".

Element:

<div id="pt1:_UISnvr:0:nvgpgl2_groupNode_manager_resources" title="My Team" class="navmenu-header x1a"><div><span class="x3im">My Team</span></div><div><a id="pt1:_UISnvr:0:nvgcil_groupNode_manager_resources".....

Selector: #pt1\:_UISnvr\:0\:nvgpgl2_groupNode_manager_resources
JS Path: document.querySelector("#pt1\\:_UISnvr\\:0\\:nvgpgl2_groupNode_manager_resources")
Xpath: //*[@id="pt1:_UISnvr:0:nvgpgl2_groupNode_manager_resources"]

I have tried a few variations of the above including just the ID, however I am not having any luck. What is the proper format for page.click?

await page.click('#pt1\\\:_UISnvr\\\:0\\\:nvgpgl2_groupNode_manager_resources');

Expand arrow

    <div id="pt1:_UISnvr:0:nvgpgl2_groupNode_manager_resources" title="My Team" class="navmenu-header x1a"><div><span class="x3im">My Team</span></div><div><a id="pt1:_UISnvr:0:nvgcil_groupNode_manager_resources" title="Expand My Team" class="svg-func svg-highlight size12 xkm" style="padding-top: 2.5px; width: 20.58px; transform: rotate(0deg); padding-bottom: 0px;" onclick="this.focus();return false;" href="#"><svg id="pt1:_UISnvr:0:nvgcil_groupNode_manager_resources::icon" class="xi6" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g><path class="svg-icon03" d="M13.083,7L11.973,5.98,7.988,9.965,4.027,5.98l-1.078.985L7.973,12.02l0.043-.039L8.058,12.02Z"></path></g></svg><span class="xmo"> </span></a></div></div>

Upvotes: 1

Views: 228

Answers (1)

vsemozhebuty
vsemozhebuty

Reputation: 13812

It seems these should be both valid selectors (maybe you need to wait for them a bit):

await page.click('div#pt1\\:_UISnvr\\:0\\:nvgpgl2_groupNode_manager_resources');

await page.click('div[id="#pt1:_UISnvr:0:nvgpgl2_groupNode_manager_resources"]');

Sometimes these variants can help when the previous ones fail:

await page.evaluate(() => { document.querySelector('div#pt1\\:_UISnvr\\:0\\:nvgpgl2_groupNode_manager_resources').click(); });

await page.evaluate(() => { document.querySelector('div[id="#pt1:_UISnvr:0:nvgpgl2_groupNode_manager_resources"]').click(); });

Upvotes: 1

Related Questions