Interaction with iFrames Using Splinter / Selenium [Python]

Question

Note: the solution in Selenium or the Splinter API wrapper for Selenium is great!

I'm having trouble interacting with iframes on Twitter.com using the Splinter API for Python.

For instance,

with Browser('firefox', profile_preferences= proxySettings) as browser: #...login and do other stuff here browser.find_by_id('global-new-tweet-button').click() 

a pop-up window appears for entering a tweet.

How can I interact with this new field using Splinter for: 1) fill out a message 2) click "tweet" (send) .. programmatically, of course.

I tried to check the element, but it does not seem to be nested inside the iframe, however it is aimed at the iframe. So I'm not sure how to find / interact with the elements of this popup.

I tried manually typing a message, and then programmatically pressing the tweet button:

 browser.find_by_css('.btn.primary-btn.tweet-action.tweet-btn.js-tweet-btn').click() 

.. but I get the error:

 ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with Stacktrace: at fxdriver.preconditions.visible (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/ [e-mail] /components/command-processor.js:10092) at DelayedCommand.prototype.checkPreconditions_ (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/ [e-mail] /components/command-processor.js:12644) at DelayedCommand.prototype.executeInternal_/h (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/ [e-mail] /components/command-processor.js:12661) at DelayedCommand.prototype.executeInternal_ (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/ [e-mail] /components/command-processor.js:12666) at DelayedCommand.prototype.execute/< (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/ [e-mail] /components/command-processor.js:12608) 

I strictly want to achieve my goal using Splinter, so please do not offer alternatives, I know that there are other ways. Thank you in advance!

Answer 1

The main problem is that you treat the results of browser.find_by_xxx as an element object, when in fact it is an element container object (i.e. a list of webdriver elements).

A field entry works for me if I explicitly reference an element:

 In [51]: elems = browser.find_by_id('tweet-box-global') In [52]: len(elems) Out[52]: 1 In [53]: elems[0].fill("Splinter Example") In [54]: 

This will write “Sample Splinter” in the box for me.

Clicking a button does not work because your css path returns a list of three elements and you implicitly click on the first hidden element. In my testing, the element you actually want to click is the second element in the list:

 In [26]: elems = browser.find_by_css('.btn.primary-btn.tweet-action.tweet-btn.js-tweet-btn') In [27]: len(elems) Out[27]: 3 In [28]: elems[1].click() In [29]: 

When I explicitly click on the second element, it does not throw an error and presses the button.

If you add to the css path, you can narrow the results only with a button in the visible modal:

 In [42]: css_path = "div.modal-tweet-form-container button.btn.primary-btn" In [43]: elems = browser.find_by_css(css_path) In [44]: len(elems) Out[44]: 1 In [45]: elems.click() In [46]: 

Please note that there were no exceptions.