![enter image description here][1]I have a dropdown element which is not identified by selenium webdriver and the following is the code for it. I need to click on id=lnkMenu1 which then opens the drop down and then click on id="lnkMenu2_ul". But selenium is not identifying. I tried Actions commands and Css selector, xpath none of them works.
<div class="nestedMenuDiv">
<a id="lnkMenu1" class="" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="entMenu1_2" style="left: 107px; top: 21px; display: none;">
<div class="nestedMenuDiv">
Dropdown to click
<a id="entMenu1_2" target="bodyFrame" href="#" onclick="navClick('Alerts.Retail.AdHoc','entMenu1_2',1, ''); return false">FidConnect</a>
</li>
I am getting no such element found error
The following is the complete HTML code. Please suggest me how do I go about it
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<html>
<head>
<frameset border="0" frameborder="no" rows="100%, *">
<frame marginwidth="0" marginheight="0" frameborder="NO" src="main.do?browserOK=Y" name="mainframe">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Alpha - ECA Web Portal</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link href="../theme/styles/nav_ecapt.css" type="text/css" rel="stylesheet">
<script src="../theme/scripts/common.js" type="text/javascript">
<script src="../theme/scripts/main.js" type="text/javascript">
<script src="../theme/scripts/menuNav.js" type="text/javascript">
<script type="text/javascript">
</head>
<body id="mainbody" onresize="mainResize()" onunload="mainUnload()" onload="load()" scroll="no">
<div id="topnav" class="wrap" style="position:absolute;top:0;left:0">
<div id="header">
<a href="../index.jsp">
</div>
<div id="nav">
<div class="nestedMenuDiv">
<ul id="lnkMenu0_ul">
<div class="nestedMenuDiv">
<a id="lnkMenu1" onclick="javascript:parentClick('lnkMenu1'); return false;" href="#">Wireless & Alerts</a>
</div>
<ul id="lnkMenu1_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu2_ul">
<div class="nestedMenuDiv">
<ul id="lnkMenu3_ul">
<ul id="lnkMenu0_4_ul" class="nestedlist">
<ul id="lnkMenu0_5_ul" class="nestedlist">
<ul id="lnkMenu0_12_ul" class="nestedlist">
<ul id="lnkMenu0_28_ul" class="nestedlist">
<ul id="lnkMenu2_6_ul" class="nestedlist">
</div>
<div id="toplinks2">
<div id="toplinks">
</div>
<iframe id="bodyFrame" class="mainIFrame" frameborder="0" marginwidth="0" marginheight="0" src="body.do?ent=ECA.Intro" scrolling="no" name="bodyFrame" style="height: 279px; width: 1366px; top: 77px; display: block;">
<iframe id="menuFrame1" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame1" style="width:100%; height:0px">
<iframe id="menuFrame2" class="menuCover" frameborder="0" marginwidth="0" marginheight="0" src="javascript:'<body>'" scrolling="no" name="menuFrame2" style="width:100%; height:0px">
<script language="JavaScript">
</body>
</html>
</frame>
</frameset>
</html>
</frame>
</frameset>
</html>
lnkMenu2_ul is a UL object, selenium can not click on such elements, only on clickable elements.
You can add an LI under the UL and click on it
Related
It's Possible to get : "MyTextTarget" in div in: domain2/file.html from this iframe using javascript postMessage ?
<div class="c1">
<iframe name="name1" id="name1" src="http://domain/file.html" frameborder="0" marginwidth="0" marginheight="0" allowtransparency="true" scrolling="no" width="100%"></iframe>
</div>
in domain/file.html :
<div class="c2_ " >
MyTextTarget
</div>
I am using jQuery UI for tabs, the tabbed content is an iframe. The problem I have is either jQuery or jQuery UI is adding the display:none to the iframe as an inline style. How can I either stop that or add display:block after it does that? I've tried many things and so far nothing works. Also, it works locally but when it's on a live server is when it happens.
This is the live site: http://gabriel-digital.com/banners.html
<!DOCTYPE html>
<html>
<head>
<title>Gabriel Ramirez - Site Under Renovation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="assets/jquery-ui/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="assets/jquery-ui/jquery-ui.structure.css" rel="stylesheet">
<link type="text/css" href="assets/jquery-ui/jquery-ui.theme.css" rel="stylesheet">
<link type="text/css" href="assets/styles.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
</head>
<body id="banners">
<div class="container text-center" id="error">
<div class="row">
<div class="col-md-12">
<!-- Tabs -->
<h2 class="demoHeaders">Web Banners</h2>
<h3>Clicking on the tab will refresh the animation.</h3>
<div id="tabs">
<ul class="left-nav">
<li>Lemonade</li>
<li>Emoji</li>
<li>Souvenir</li>
<li>DiaResQ</li>
<li>Love Me</li>
</ul>
<div id="tabs-1">
<div id="tabs-content-1">
<ul>
<li>300 x 250</li>
</ul>
<div id="tabs-1-1">
<iframe id="I1" src="banners/lemonade-300x250/index.html" width="300" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-2">
<div id="tabs-content-2">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>728 x 90</li>
<li>970 x 250</li>
</ul>
<div id="tabs-1-2">
<iframe id="I2" src="banners/emoji-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-2">
<iframe id="I3" src="banners/emoji-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-2">
<iframe id="I4" src="banners/emoji-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-2">
<iframe id="I5" src="banners/emoji-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-2">
<iframe id="I6" src="banners/emoji-728x90/index.html" width="728" height="90"></iframe>
</div>
<div id="tabs-6-2">
<iframe id="I7" src="banners/emoji-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-3">
<div id="tabs-content-3">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>728 x 90</li>
<li>970 x 250</li>
</ul>
<div id="tabs-1-3">
<iframe id="I8" src="banners/souvenir-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-3">
<iframe id="I9" src="banners/souvenir-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-3">
<iframe id="I10" src="banners/souvenir-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-3">
<iframe id="I11" src="banners/souvenir-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-3">
<iframe id="I12" src="banners/souvenir-728x90/index.html" width="728" height="90"></iframe>
</div>
<div id="tabs-6-3">
<iframe id="I13" src="banners/souvenir-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-4">
<div id="tabs-content-4">
<ul>
<li>970 x 250</li>
</ul>
<div id="tabs-1-4">
<iframe id="I14" src="banners/diaresq-970x250/index.html" width="970" height="250"></iframe>
</div>
</div>
</div>
<div id="tabs-5">
<div id="tabs-content-5">
<ul>
<li>160 x 600</li>
<li>300 x 250</li>
<li>300 x 600</li>
<li>320 x 50</li>
<li>970 x 90</li>
</ul>
<div id="tabs-1-5">
<iframe id="I15" src="banners/ks-160x600/index.html" width="160" height="600"></iframe>
</div>
<div id="tabs-2-5">
<iframe id="I16" src="banners/ks-300x250/index.html" width="300" height="250"></iframe>
</div>
<div id="tabs-3-5">
<iframe id="I17" src="banners/ks-300x600/index.html" width="300" height="600"></iframe>
</div>
<div id="tabs-4-5">
<iframe id="I18" src="banners/ks-320x50/index.html" width="320" height="50"></iframe>
</div>
<div id="tabs-5-5">
<iframe id="I19" src="banners/ks-970x90/index.html" width="970" height="90"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/site.js"></script>
<script>
// $( "#accordion" ).accordion();
$( "#tabs, #tabs-content-1, #tabs-content-2, #tabs-content-3, #tabs-content-4, #tabs-content-5" ).tabs();
$( function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
} );
</script>
</body>
</html>
This was caused by an ad blocker, figured it out after 2 hours.
I am embedding a link into an iframe:
<div class="container hidden" id="timeline" style="position: relative;">
<div class="embed-responsive embed-responsive-16by9">
<iframe allowfullscreen="true" class="embed-responsive-item container well well-small span6" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
</div>
It's not occupying the entire window. But it occupies a small rectangle. I played around with other options:
https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
This worked for me:
<!-- Timeline Viewer -->
<div class="container hidden" id="timeline">
<iframe style="position:absolute;top:0;left:0;width:100%;height:100%" allowfullscreen="true" frameborder="0" id="timeline_view" mozallowfullscreen="true" msallowfullscreen="true" oallowfullscreen="true" src="" webkitallowfullscreen="true">
</iframe>
</div>
Hi all I am trying to get an iframe of 500x200 to be on the right side of the tabs.
If the amount of tabs is more than the 200 height then id like to be able to have them be scrollable. Could someone point me in the right direction?
I'l eventually put the iframe in a panel and have the panel the size of col-lg-9 to fill the rest of the space.
<div class="container">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-pills nav-stacked" id="myTabs">
<li class="active">Home</li>
<li>DPA</li>
<li>Antwon</li>
<li>SSS</li>
<li>Ad</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>test</p>
</div>
<div class="tab-pane" id="dpa" data-src="http://www.google.ie">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="rn" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
<div class="tab-pane" id="sss" data-src="http://www.reddit.com/">
<iframe src="" width="500" height="200"></iframe>
</div>
<div class="tab-pane" id="ad" data-src="http://player.vimeo.com/video/37138051?badge=0">
<iframe src="" width="500" height="200" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p>ANTWON ♦ HELICOPTER from Brandon Tauszik on Vimeo.</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('#myTabs').bind('show', function(e) {
paneID = $(e.target).attr('href');
src = $(paneID).attr('data-src');
// if the iframe hasn't already been loaded once
if($(paneID+" iframe").attr("src")=="")
{
$(paneID+" iframe").attr("src",src);
}
});
</script>
So, something like this?
#myTabs {float:left; height:200px; overflow:auto; }
best regards, I want to write a javascript code that write to Paragraph <P><br data-mce-bogus="1"></P> which exists inside this
<html><head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td>
</tbody>
</table>
</body>
</html>
I tried this code
javascript:document.getElementById('contentMessage_ifr').contentDocument.body.innerHTML="it works";
is there something wrong with my code , it works fine on w3schools javascript editor
thanks in advance
Your code is getting the ID of the iframe.
Try getting a hold of the paragraph.
Here's a jsfiddle example which should work:
http://jsfiddle.net/kakashi/QR9N8/
The relevant code you want, if you want to use jQuery, is:
$('p:has(br[data-mce-bogus=1])').append("<p>Hi There</p>");
maybe your html code isn't very clean, you are missing some html tags like "html" and "tr", try this html:
<html>
<head>
</head>
<body>
<table id="contentMessage_tbl" class="mceLayout" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; height: 260px;">
<tbody><tr>
<td class="mceIframeContainer mceFirst mceLast">
<iframe id="contentMessage_ifr" frameborder="0" src="javascript:""" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 216px; display: block;">
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<meta content="IE=7" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
</head>
<body id="tinymce" class="mceContentBody " contenteditable="true" spellcheck="false" dir="ltr" style="font-size: 12px; font-family: arial,helvetica,sans-serif;">
<p>
<br data-mce-bogus="1">
</p>
</body>
</html>
</iframe>
</td></tr>
</tbody>
</table>
</body>
</html>