How to Work with Iframe on Selenium (Graphic Guide) parsing Attribute

Br4uN

In this guide I will show how to get (parse) the attribute from an element on iframe. Using Google Chrome as web browser .

This is the main page (Pic #1)

This is our target (Second iframe) (Pic #2)
To make our target link appear we need to click the small box on pic #1

First Step (find the XPath to use later in OpenBullet) (Pic #3)
Right Click on the small box and select “Inspect”
Step 0.png

Right Click on top of the element and copy the XPath (Pic #4)
Step 2-Click.png

Second Step (Add an Element Block on OpenBullet) (Pic #5)
On box (Find Element By: ) select ---> XPath, and paste the XPath on second box after sign “ = ”, then select “SwitchToFrame” on Action box, fallow the pic.

Third Step (Add another Element Block) (Pic #6)
This picture is the same as pic #4, but now we will use the “Id” instead of XPath to simulate a click. See pic below
Stept 2A Click.PNG

Forth Step (Pic #7)
This step is required to let the website reload and get the new iframe in case you have two different iframe like this case.
Add a Block “BROWSER” and select “SwitchToParentFrame” on Action box. See pic below.
Step 3 After_Click.PNG

Fifth Step (Pic #8)
This picture come from the same source as pic #2, (our target)
Remember this element only appear after you do a left click in the small box on pic #1, so do a left click on small box pic #1 and then when the image appears do a right click on it and select inspect.

Do a right click on the element and copy the XPath, this is the new path. see pic below.
Step 4 Iframe-2.png

Same as second step, but using the new XPath (Pic #9)
On box (Find Element By: ) select ---> XPath, and paste the XPath on second 2 box after sign “ = ”, then select “SwitchToFrame” on Action box, fallow the pic below.
Step 4 iframe2.PNG

Sixth Step (Pic #10)
This is our target but before we parse the Attribute we need to do an extra step (wait for) to let the website load what we need.
In this case I used “Selector” instead of “XPath”, so instead of copy the XPath copy Selector. see pic

Add another "Element" block
On box (Find Element By: ) select ---> Selector, and paste the selector on second box after sign “ = ”, then select “WaitForElement” on Action box, fallow the pic below.

Last Step
This is the same Selector from Sixth step, pic #10 but we going to use get-attribute on action box.
Add another "ELEMENT" block
On box (Find Element By: ) select ---> Selector, and paste the selector on second box after sign “ = ”, then select “GetAttribute” on Action box, fallow the pic below.

Now we have the Attribute to keep doing more stuff

Thanks for watching

This is the LoliScript (only need to change Xpath and Selectors)

BROWSERACTION Open
NAVIGATE "http://mytarget.com" 
#ELEMENT-USER ELEMENTACTION Id "username" 
  SendKeys "<USERNAME>" 
#ELEMENT-PASS ELEMENTACTION Id "password" 
  SendKeys "<PASSWORD>" 
#ELEMENT-IFRAME ELEMENTACTION XPath "//*[@id=\"verification\"]/div/div/iframe" 
  SwitchToFrame 
#ELEMENT-CLIK ELEMENTACTION Id "recaptcha-anchor" 
  Click 
#BROWSER-PARENT_IFRAME BROWSERACTION SwitchToParentFrame 
#ELEMENT-IFRAME2 ELEMENTACTION XPath "/html/body/div[2]/div[4]/iframe" 
  SwitchToFrame 
#ELEMENT-AttributeWAIT ELEMENTACTION Selector "#rc-imageselect-target > table > tbody > tr:nth-child(1) > td:nth-child(1) > div > div.rc-image-tile-wrapper > img" 
  WaitForElement 
#ELEMENT-Attribute ELEMENTACTION Selector "#rc-imageselect-target > table > tbody > tr:nth-child(1) > td:nth-child(1) > div > div.rc-image-tile-wrapper > img" 
  GetAttribute "src" -> CAP "URL"
#BROWSER-COOKIES_Clear BROWSERACTION ClearCookies