Change image by Class using JS in optimize.google for A/B test

Question

I'm trying to setup an A/B test using optimize.google to switch out the image we're using for our chat. We're using zopim chat by zendesk. I have tried many variations of getElementBy Id or Class without any luck.

HTML

    <td class="jx_ui_html_td image_cell" __jx__id="___$_11__banner__image_cell"><img class="banner_image jx_ui_html_img" __jx__id="___$_11__banner__image" src="https://v2assets.zopim.io/2tb5FIOyEOOJ0Sq0TrQAN74gNEnpA3l4-banner?1493149892024" style=""><div class="meshim_widget_widgets_IconFont icon_font banner_icon" __jx__id="___$_11__banner__icon ___$_11__banner__icon" style="user-select: none; display: none;"></div></td>

Different JS I've tried

    document.getElementByClass('banner_image').src.add('new-png');

    var x = document.getElementByClass("banner_image");
    x.src ='new-image.png'          

    document.getElementByClass('banner_image').src = 'new-image.png';

    function newF (){ 
    var x = document.getElementByClass('banner_image');
    x.src ='new-image.png'
    }

    function newF (){ 
    document.getElementByClass('banner_image').src = 'new-image.png';
    }

    function newF (){ 
    document.getElementByClass('banner_image').src.add('new-image.png');
    }