find element by class name (node js)-CodePudding

For my tool there is a button with a dropdown list if you click the button.

The button is using a class : countryButton-1cNDvB button-f2h6uQ lookFilled-yCfaCM colorPrimary-2AuQVo sizeSmall-wU2dO- grow-2sR_-F

NO ID!

I want the tool to click the button simply way, but it doesn't click the button in my tool.

I've tried:

<button onclick="alert('clicked')" type="button"  style="" xpath="62"><div ><div  style="flex: 1 1 auto;"><div > </div><div >1</div></div><svg  width="16" height="16" viewBox="0 0 24 24"><path  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true" onclick="location.href='http://www.google.com'"></path></svg></div></button>


</script>

<script>
document.querySelector("button.countryButton-1cNDvB").click();
</script>

On w3schools.com it works when I run the code it indeed clicks the button. But when ever i implement the same code in my script it doesnt click the button. Is there any reason for this?

The tool is for account registration. It does find the button but it is just not clicking it.

 
            //  Click on the contry button
            try{
            await delay(1000)
            //await page.waitForSelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > button.countryButton-1cNDvB.button-f2h6uQ.lookFilled-yCfaCM.colorGrey-2iAG-B.sizeSmall-wU2dO-.grow-2sR_-F"); 
            await page.evaluate('document.querySelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > button.countryButton-1cNDvB.button-f2h6uQ.lookFilled-yCfaCM.colorGrey-2iAG-B.sizeSmall-wU2dO-.grow-2sR_-F").click()');
            await sleep(300);
        } catch(error) { }
        try{
        //  Enter the contry name
        await page.waitForSelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > div > div.popoutListInput-1w4TxY.size14-y91Il2.container-2oNtJn.small-1uriao > div > input", {timeout: 5000 }); 
        await page.type('#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > div > div.popoutListInput-1w4TxY.size14-y91Il2.container-2oNtJn.small-1uriao > div > input',phone_contry);
        await sleep(300);
        }catch(error) {}
        try{
            //await page.waitForSelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > div > div.phoneFieldScroller-2DblLb.auto-2K3UW5.scrollerBase-_bVAAt > div:nth-child(1)"); 
            await page.evaluate('document.querySelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > div > div.phoneFieldScroller-2DblLb.auto-2K3UW5.scrollerBase-_bVAAt > div:nth-child(1)").click()');
            await sleep(300);
        } catch(error) { }
        try{
            //  Enter phone number
            //await page.waitForSelector("#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > input"); 
            await page.type('#app-mount > div:nth-child(6) > div.layer-1Ixpg3 > div > div > div.flex-2S1XBF.flex-3BkGQD.horizontal-112GEH.horizontal-1Piu5-.flex-3BkGQD.directionRow-2Iu2A9.justifyStart-2Mwniq.alignCenter-14kD11.noWrap-hBpHBz.phoneField-3NAPDv.elevationLow-26BbEG.field-3rN-Ip > input',phone_number)
            await sleep(300);
        } catch(error) { }

This is a piece of the code. It is supposed to reconize the CountryButton and click it. It does reckonize it but doesn't click it.

CodePudding user response：

try this:- remove button from button.countryButton-1cNDvB as shown below

<script>
document.querySelector(".countryButton-1cNDvB").click();
</script>

this should do it.

CodePudding user response：

Alright, try swapping the two <script> tags, like this:

<script>
  document.querySelector("button.countryButton-1cNDvB").click();
</script>

<button onclick="alert('clicked')" type="button"  style="" xpath="62"><div ><div  style="flex: 1 1 auto;"><div > </div><div >1</div></div><svg  width="16" height="16" viewBox="0 0 24 24"><path  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M7 10L12 15 17 10" aria-hidden="true" onclick="location.href='http://www.google.com'"></path></svg></div></button>

As I can see it, your js first runs the code above and then the one below, so basically the code below can't access button on top.

If this doesn't solve the problem, be sure to check all pathing, tags and indentation.