'find element by class name (node js)

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" class="countryButton-1cNDvB button-f2h6uQ lookFilled-yCfaCM colorPrimary-2AuQVo sizeSmall-wU2dO- grow-2sR_-F" style="" xpath="62"><div class="contents-3ca1mk countryButtonInner-1o5lfS"><div class="flex-2S1XBF flex-3BkGQD horizontal-112GEH horizontal-1Piu5- flex-3BkGQD directionRow-2Iu2A9 justifyCenter-rrurWZ alignStretch-Uwowzr noWrap-hBpHBz countryCodeContainer-31fe5z marginReset-28ZZyF" style="flex: 1 1 auto;"><div class="plusSign-1BkjXr">+</div><div class="countryCode-2RFA3i">1</div></div><svg class="transition-30IQBn directionRight-2cNgoe" width="16" height="16" viewBox="0 0 24 24"><path class="phoneFieldExpand-1CqrEb" 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.

javascripthtmlcss


Solution 1:[1]

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

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

this should do it.

Solution 2:[2]

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

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

<button onclick="alert('clicked')" type="button" class="countryButton-1cNDvB button-f2h6uQ lookFilled-yCfaCM colorPrimary-2AuQVo sizeSmall-wU2dO- grow-2sR_-F" style="" xpath="62"><div class="contents-3ca1mk countryButtonInner-1o5lfS"><div class="flex-2S1XBF flex-3BkGQD horizontal-112GEH horizontal-1Piu5- flex-3BkGQD directionRow-2Iu2A9 justifyCenter-rrurWZ alignStretch-Uwowzr noWrap-hBpHBz countryCodeContainer-31fe5z marginReset-28ZZyF" style="flex: 1 1 auto;"><div class="plusSign-1BkjXr">+</div><div class="countryCode-2RFA3i">1</div></div><svg class="transition-30IQBn directionRight-2cNgoe" width="16" height="16" viewBox="0 0 24 24"><path class="phoneFieldExpand-1CqrEb" 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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dhruv champaneri
Solution 2

Related Questions