Search code examples
htmlgoogle-chromeselenium-webdriverdomgoogle-chrome-console

How to change the value of an element nested inside two iframes through chrome console?

I have an element that is in an iframe and that iframe is in another iframe, so they're nested. I want to change the value of it, but I can't do that since I don't think chrome console can find it.

document.querySelector('#someRandomCssSelector').value = "newValue"

Is there a way to specify the two iframes the element is nested in?

Solution

  • Incase the element is within an iframe:

    element_iframe

    Then if you shift your focus to the Console tab you will find a dropdown with the first item being called top containing the desired frame as a child as follows:

    console_iframe

    Like wise select the desired iframe in the Console tab in which the desired element is located.

    Next, given the HTML:

    <input id="accountName" autocomplete="email" autofocus="" class="form-textbox-input fin-input__input" data-test="accountName-input" dir="auto" name="accountName" required="" type="text">

    To populate the <input> field with the text newValue you can execute the following command in the Console:

    document.querySelector('input#accountName').value = "newValue"

    Console snapshot:

    newValue