I have a button class that is placed inside an iframe. Problem is that this button's class has such a long name and I do not understand how to reference it in my script.
<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button"></button>
I am using my javascript to reference this class as:
document.querySelector("iframe").contentWindow.document.querySelector(".PDF-dmzpd5z6ckdkxkn8").click();
The above code does not work. Do I have to provide the complete class name for reference?
I am on right track because I have another button that looks like this:
<button class="PDF-tdsfethgr51stg Next-Button Next-Previous-Button" title="Next" aria-label="Next" type="button"></button>
And I can easily call/reference it via:
document.querySelector("iframe").contentWindow.document.querySelector(".PDF-tdsfethgr51stg").click();
If selecting with class doesn't work, you can try to select with title attribute:
document.querySelector('button[title="SignUp"]');
Using Id in button is the best option
Example:
<button class="PDF-dmzpd5z6ckdkxkn8 PDF-5rbqp8nfgh6e11 PDF-tma5quj Toolbar-Button Tool-Button" title="SignUp" aria-label="myButton001" type="button" id="exbtn1"></button>
document.querySelector("iframe").contentWindow.document.querySelector("#exbtn1").click();
Note: It's best option to define the tags in Query Selector (eg. document.querySelector("iframe")[0]). The index starts from 0.