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



  • 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) 👇
    Step-1A.png

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

    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.
    Step-1C.PNG

    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
    Selector.png

    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.
    Wait-for-Element.PNG

    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.

    final.PNG

    Now we have the Attribute 💪 to keep doing more stuff 😊
    End.png

    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
    

Log in to reply