How to click svg using querySelector?

I am trying to build an chrome extension to click a svg on a webpage using below command but it shows that "click" is not a function.

Can anyone give me some direction in order to solve this issue?

document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click();

Html Code:

<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">

    <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>

    <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">

        <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
        <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment"  class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
        </div>

        <div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
            <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
                    </path>
                </svg>
            </span>
        </div>
</div>

</form>

23 thoughts on “How to click svg using querySelector?”

Leave a Comment