Synthetics Scripted Browser - Element found and clicked on but nothing happens

I’m setting up a monitor for a product page of an ecommerce website. My script finds and clicks on the add to cart button but nothing happens. I have hidden images and all other redundant elements in the page and only the product info pannel including size swatch and add to cart buttons are visible.
I also tried and clicking on size swatch works but not clicking on add to cart button. I have tried the workaround on this thread to no avail

Here is how my scripts looks like
$browser.get(‘Page_URL’).then(function(){
$browser.sleep(5000);
}).then(function(){
// hiding product images as they might overlap with info panel
$browser.executeScript("document.getElementsByClassName(product__media-wrapper)[0].style.display = none");
}).then(function(){
return $browser.waitForAndFindElement($driver.By.css(‘button[id=“prpdppdp”]’)).then(function(atc) {
$browser.executeScript(function(){
arguments[0].click()
}, atc)
//assert($browser.findElement($driver.By.css(‘button[id=“prpdppdp”]’)).isDisplayed());
$browser.sleep(8000);
})
})

I appreciate any help here. Thanks

I would say if you want to click something you should do it through $browser rather than executing scripts in the page itself. Example:

$browser.get('Page_URL').then(function() {
    $browser.sleep(5000);
}).then(function() {
    // hiding product images as they might overlap with info panel
    $browser.executeScript("document.getElementsByClassName(product__media-wrapper)[0].style.display = none");
}).then(function() {
    return $browser.waitForAndFindElement($driver.By.css('button[id = "prpdppdp"]')).click().then(function(atc) {
        //whatever you want to do here
        $browser.sleep(8000);
    })
})

@Michael.Sleep Thanks. I tried this but it did not work. The interesting thing is that the check is passed successfully (which should mean that the element is found and clicked) but the element is not actually clicked.