Description
This Custom Command will allow you target a specific element even if it is inside an iFrame. You will be able to get the text or attribute value, insert or data into or click that element. You need to first specify the CSS locator of the iFrame inside which you want to read. And then you need to specify the element CSS locator that you want to interact with. This command will then use a specific JavaScript code to parse the html source and reach to that element in that target iFrame.
You will find also a template that uses this Custom Command to fill-up text entry fields and click the send button of the YopMail webmail interface which uses iFrames to display the email sending forms.
This Custom Command will allow you target a specific element even if it is inside an iFrame. You will be able to get the text or attribute value, insert or data into or click that element. You need to first specify the CSS locator of the iFrame inside which you want to read. And then you need to specify the element CSS locator that you want to interact with. This command will then use a specific JavaScript code to parse the html source and reach to that element in that target iFrame.
You will find also a template that uses this Custom Command to fill-up text entry fields and click the send button of the YopMail webmail interface which uses iFrames to display the email sending forms.
How to configure and use this Custom Command :
1) The name of the command can be changed to a meaningful name that describes what the command does
2) Here you must find the iframe selector , you can always find that using your browsers inspection panel , see the attached video tutorial for more details
3) This is where you use the real CSS selector of the HTML element you want to access which you couldn’t normally access without the Iframe custom command
4) You can write the values you want to input in case the element is an input element
5) Target attribute is what you want to get out of the element , wither you want to get the “href” value , source “ src “ value , “ inner text “ , or any other attribute you want to acces
6) Here you can select what you want the ifram command to do , there are three possible option which are :
a) GET : gets the data from the HTML element and the selected target attribute
b) INSERT : Inserts the value you have already written in the Content field { works with forms and input elements that asks for user input }
c) CLICK : Simply clicks on the element that is inside the iframe , for example the Submit button in a from that is also within an iframe element
2) Here you must find the iframe selector , you can always find that using your browsers inspection panel , see the attached video tutorial for more details
3) This is where you use the real CSS selector of the HTML element you want to access which you couldn’t normally access without the Iframe custom command
4) You can write the values you want to input in case the element is an input element
5) Target attribute is what you want to get out of the element , wither you want to get the “href” value , source “ src “ value , “ inner text “ , or any other attribute you want to acces
6) Here you can select what you want the ifram command to do , there are three possible option which are :
a) GET : gets the data from the HTML element and the selected target attribute
b) INSERT : Inserts the value you have already written in the Content field { works with forms and input elements that asks for user input }
c) CLICK : Simply clicks on the element that is inside the iframe , for example the Submit button in a from that is also within an iframe element
Watch Video Demo :
Note:
If you find our template useful and like it, please give us a favor by sharing this template to your community for wide circulation. Thanks
If you find our template useful and like it, please give us a favor by sharing this template to your community for wide circulation. Thanks