Zendesk chat widget interferes with automated testing



  • Mike Jeffcott
    Comment actions Permalink

    Hi Robert,

    I'm Mike. I'm responsible for doing automated testing on the Zendesk Web Widget. Due to its integration with Zendesk Chat, I'm pretty familiar with testing that as well. I wanted to share my approach for targeting the Chat iframe.

    As you can see in the image below, adding Chat to a page results in 2 div elements with class="zopim" being added to the page. Inside each of these elements is a single iframe. The iframe highlighted in the image in light blue is the actual Chat iframe on the page, so that's the one I'm after. Note that on the first div with class="zopim" there is also the display: none style, rendering it and its contents invisible. This allows me to search only for the visible iframe.

    My final CSS selector passed to Selenium is div.zopim > iframe. We're using Capybara for testing, which only finds visible elements by default, but you may need to specify this yourself, depending on your choice of testing framework.

    Let me know if this helps you.

  • Robert deMallac
    Comment actions Permalink

    Hey Mike--

    Thanks so much!  Our framework finds all elements, regardless of the display:none attribute, so I had to modify that selector somewhat.  Here is the winner:

     div.zopim:nth-of-type(2) > iframe

    That was exactly what I needed.... Cheers!

    (PS- Capybara looks cool, I will definitely check that out.)


Please sign in to leave a comment.

Powered by Zendesk