I am facing issues in writing into iframe, I am able to identify the iframe but I am not able to write anything into the frame. Whenever I try to write into the frame I am getting below error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 211 milliseconds
Build info: version: '2.43.1', revision: '5163bce', time: '2014-09-10 16:27:33'
This is the screenshot of my HTML Code.
HTML Snippet:
<div id="offer_description_field" class="control-group wysihtml5_type description_field ">
<label class="control-label" for="offer_description">
Description
</label>
<div class="controls well">
<ul class="wysihtml5-toolbar" style="">
<textarea id="offer_description" class="bootstrap-wysihtml5ed" rows="3" name="offer[description]" data-richtext="bootstrap-wysihtml5" data-options="{"csspath":"/assets/bootstrap-wysihtml5.css","jspath":"/assets/bootstrap-wysihtml5.js","config_options":"null"}" cols="48" style="display: none;"></textarea>
<input type="hidden" name="_wysihtml5_mode" value="1">
<iframe class="wysihtml5-sandbox" width="0" height="0" frameborder="0" security="restricted" allowtransparency="true" marginwidth="0" marginheight="0" style="display: inline-block; background-color: rgb(255, 255, 255); border-collapse: separate; border-color: rgb(204, 204, 204); border-style: solid; border-width: 1px; clear: none; float: none; margin: 0px; outline: 0px none rgb(0, 0, 0); outline-offset: 0px; padding: 4px 6px; position: static; z-index: auto; vertical-align: middle; text-align: start; box-sizing: content-box; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.075) inset; border-radius: 4px; width: 327.8px; height: 60px; top: auto; left: auto; right: auto; bottom: auto;"></iframe>
<p class="help-block">Required. Add offer description.</p>
</div>
</div>
When I create a simple HTML file with above code snippet I am not able to interact with element. Manually I am able to write anything inside this iframe when it is coming with full code base. Looks like it is replacing the textarea with iframe. Not sure how to deal with this type of element.
This is how it appears on the panel.
Can anybody help?
This error doesn't have to do with the IFRAME. In fact, the element you are interacting with isn't inside the IFRAME. The reason you can't interact with it is stated in the error.
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
The element is not visible. If you look at the TEXTAREA element, it is marked with style="display: none;" which is why it is not visible. Selenium was designed to interact with the page as a user would and so will not interact with hidden elements. You will need to approach this problem as a user would... how would a user get that text area to appear? I'm assuming click something, etc. You will need your script to execute whatever a user would do, then the TEXTAREA will become visible, and will be able to be interacted with.
you should takecare of following things while working with frames :
1.Select the frame .
then enter into the text/textarea.
Note: sometimes the elements are not in the visible area in the UI hence we may required to take the element into view port , following below code spinet before entering into the text/textarea :
WebElement element = driver.findElement(By.id("id_of_element"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
2.then deselect the frame .
Hope this would work for you .
Switch into that iframe either by id/class using following code
driver.switchTo().frame(driver.findElement(By.id("Enter id of element")));
OR
driver.switchTo().frame(driver.findElement(By.class("Enter class of element")));
Once you switched to the frame select the element with your normal steps.
like
driver.findelement(By.id/class/css/xpath("Enter Element id/class/css/xpath"));
Then, if you want to select any other element from the main frame, simply go back to your main frame with following code
driver.switchTo().defaultContent();
Related
I am trying to create a custom audio component with Jodit. So, I have designed the view for the component but I do not want the component to be taken apart by bits. So if the component has to be removed, it should remove the root and the component bits should not be editable.
Currently, you can take the view apart in bits which does not serve my purpose. So my questions are:
Is there a way in Jodit to lock or group a block of code together and make it uneditable in parts?
If that is not possible, is there a way to detect if any part is being removed? and how to remove the entire component in such a case.
These is the default design:
This is after deleting some parts:
The HTML code which i am using is similar to this:
<div class="audio-container">
<audio id="audio_player" style="position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; padding: 0" controls="controls">
<source id="audio_player_source" src="static/sound-file.mp3" type="audio/mpeg" />
</audio>
<div class="audio-pack" style="margin-left: auto; background: #DDD; border: 2px solid rgba(120, 255, 120, 255); width: 400px; height: 30px; padding: 5px 5px 5px 5px">
<button id="play_btn" class="audio-controls audio-play" onclick="play('audio_player')"></button>
<button id="pause_btn" class="audio-controls audio-pause" style="display: none" onclick="pause('audio_player')"></button>
<button id="stop_btn" class="audio-controls audio-stop" onclick="stop('audio_player')"></button>
<div style="margin: 0 5px">00:00</div>
<div class="audio-timeline audio-track">
<div class="audio-playhead"></div>
</div>
<div style="margin: 0 5px">00:00</div>
<div style="margin: 0 5px">Vol:</div>
<div class="audio-timeline volume-track">
<div class="audio-playhead" style=""></div>
</div>
</div>
</div>
I have tried using divs with position as absolute to protect some of the parts but I can easily drag to select and hit the delete/backspace key to remove parts.
I was able to stumble on the answer to this by looking through the Jodit source code for media insertion. Apparently, there is a contenteditable property which can be added to the root element to make it non-editable. Adding this attribute definition contenteditable="false" seemed to group the elements together though it created another challenge of deleting the element which did not seem to work at all. Anyway, I can do that either using MutationObserver or by adding a context menu and operating on the source html directly.
I'm busy building a website and have a banner in it. The banner consists out of a static background image with static text overlay.
Now I want to keep the banner with the text overlay, but replace the static background image with a simple slideshow. The images should be replaced every 3 seconds. It should be a continuous loop, triggered on page load event. This function should utilize jQuery.
This is the html code for the banner as it is at the moment:
<!--BANNER HTML-->
<div class="banner">
<div class="banner-text">
<h1>LONG LAYOVER?</h1>
<h1>Is Amsterdam Schiphol your transfer hub?</h1>
<h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
</div>
</div>
This is the CSS:
.banner h1, .banner h1, .banner h4 {
margin: 0;
text-shadow: 2px 2px 6px #000;
text-align: center;
}
.banner {
color: white;
background: url(images/bannerimage.png) top left/cover no-repeat;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
Does anybody have a smart solution to my problem?
The simpliest answer comes to my mind is defining functions and call them in timeout functions as shown in the DEMO here
You can also use togglaClass instead of .css() function. I would prefer toggleClass but just did this was is quicker for me.
I want to check if our advertisement(picture or flash) has successfully displayed on website page.But the element can not be found in page source.
I get the element in chrome Developer tools.
<div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height: 250px; display: block; width: 300px; position: relative;" class="l_qq_com" adconfig_lview="l.qq.com" adconfig_charset="gbk" adconfig_lview_template="http://l.qq.com/lview?c=www&loc={loc}" oid="1800716433" display="banner">
<a class="absolute a_cover" href="http://c.l.qq.com/lclick?loc=QQcom_all_Rectangle&click_data=dXNlcl9pbmZvPW9CM2pnVGd4RnhHNyZhZHhfZXh0PSZwY3RyPTUwMSZhdmVyPTUwMTIwMSZwcmk9eHRiQkZXc0ovclloYXdzdWZqRmpSTkhyZWFuL3pQU2omYnRwcmk9R3VBL25heHhnY3JyNTdrdVNCNW4yWis3TlJqM01nTmw=&oid=1800716433&soid=gmLndBibVj/1bQtQRjKVNkVKAV1Q&dtype=0&pctr=501&aver=501201&btoid=100418428&pri=xtbBFWsJ/rYhawsufjFjRNHrean/zPSj&btpri=GuA/naxxgcrr57kuSB5n2Z+7NRj3MgNl&index=1&page_type=2&chl=703&k=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA%2C%E6%B5%B7%E8%80%B6%E6%96%AF%2C%E7%81%AB%E7%AE%AD%2CNBA&t=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA_&r=&s=" target="_blank" rel="nofollow" style="position:absolute;width:300px;height:250px;left:0px;top:0px;cursor:pointer;z-index:10;background-color:#fff;filter:alpha(opacity=0);opacity:0;"></a>
<div class="absolute" style="position: absolute; width: 24px; height: 16px; left: 26px; bottom: 0px; cursor: pointer; display: none; z-index: 20; background: url(http://ra.gtimg.com/web/res/icon/report_default_new.png) 50% 0% no-repeat;"></div>
<div style="position: absolute; left: 0px; bottom: 0px; width: 26px; height: 16px; z-index: 12; background: url(http://ra.gtimg.com/web/res/icon/leftbottom_new.png) 100% 0% no-repeat;"></div>
<div class="absolute" style="position:absolute;width:18px;height:18px;right:0px;bottom:0px;cursor:pointer;z-index:20;background:url(http://ra.gtimg.com/web/privacy/white_icon.png) no-repeat;"></div>
</div>
but in page source,it only shows
<!--$loc$_div AD begin...."l=$loc$&log=off"--><div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height:0;" class="l_qq_com"></div><!--$loc$ AD end --><!--[if !IE]>|xGv00|c5668531d36ed7899852180841ca2aa2<![endif]-->
how can I get the 300px_250px image url?
anyone knows?
Yeah! That's simply because of the fact that there are DOM manipulation libraries which alter the Document-Object Markup and not the source.
You have to understand the difference between the DOM and the physical page source. The physical page source helps render the DOM, after which it can be modified by using libraries; since you can't change the source on the server side as it needs to be re-rendered for different people, only the DOM is changed. In very simple words, DOM is what the browser has rendered: it's like a copy of the source which has been, then, modified by the libraries.
Using a library like jQuery can do this easily.
var $element = $( "#QQcom_all_Rectangle:1" );
if ( !$element || $element === null ) {
console.log( "The element hasn't been rendered. Not found.");
}
But if it is not YOUR page, and you can't really modify it and/or get the data. You can try doing this with a web-kit emulator like PhantomJS or Selenium web-kit. Since these are just testing frameworks, you can't create a fully fledged JavaScript applications.
Theoretically, you can:
Render this in a WebKit (Browser Rendering Component)
Get the source of the DOM
Use it
But that's just in theory because you need to use some language to create an application like that and since it's outside the scope of your question, you can't.
Using selenium webdriver can handle this.
WebElement QQcom_all_Rectangle=driver.findElement(By.id("QQcom_all_Rectangle:1"));
List<WebElement> links=QQcom_all_Rectangle.findElements(By.tagName("a"));
String style=links.get(0).getAttribute("style");
What is the simplest way to offer a resize div method for users, such as the StackOverflow text box. Can this be done via HTML only or is JavaScript required?
<div style="resize:vertical;overflow:auto;"></div>
Did you mean this?
DEMO FIDDLE (2 and 3)
If you want it to look and behave exactly like the textarea in SO, then you definitely need JavaScript. More info here.
If you just want a simple realizable div to display text, this should be sufficient:
HTML
<div class="display-info">Resizeable div</div>
CSS
.display-info {
resize: vertical;
overflow:auto;
width: 250px;
height: 50px;
border: 1px solid gray;
background-color: lightgray;
}
3. If you want a textarea that allows users to type something in it (For eg: a form):
HTML
<textarea name="test" id="test" cols="30" rows="10">Text area</textarea>
CSS
#test {
resize: vertical; /* can on be resized vertically*/
}
I've entered this into my code to use facebook comments:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="google.com" num_posts="10" width="610"></fb:comments>
But it cuts of the comments like this http://cl.ly/77fB and the loading graphic doesn't go away. I've tried removing all css that I have and js and it still does the same thing. I looked that code and the iframe that the facebook comments api generates sets a height of 200px. Here's the iframe source code:
<iframe id="f1c27030c" name="f1f67bf5c4" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 200px; width: 610px; " class="fb_ltr" src="http://www.facebook.com/plugins/comments.php?channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Df3ec50dad4%26origin%3Dfile%253A%252F%252Flocalhost%252Ff17ab9b71%26relation%3Dparent.parent%26transport%3Dpostmessage&href=google.com&locale=en_US&numposts=12&sdk=joey&width=610"></iframe>
Not sure what else to do. Thanks!
Update:
So because files I'm loading the comments from are local Chrome is saying it's not safe to load it all: http://cl.ly/77X7
I uploaded the file to my server and it loaded all the way.
Thanks for your help!
This comes from the fact that you put google.com as the URL : Facebook servers tries to contact google.com to finish loading your comments.
Try with localhost instead of google.com, it will show the error message.
So you have to put the URL of the page on which the comments are displayed. It will not work otherwise.
Hope that helps.