The editor field already has HTML text within it.
I want to Clear it using Selenium.
Below is the code of the site.
<div id="EmailText" style="display: none">
<table id="tabbgcol1" cellspacing="0" cellpadding="0" style="padding: 0px; font: inherit; color: inherit;">
<tbody>
<tr>
<td valign="top">
<table width="100%" cellpadding="0" cellspacing="0" align="left" style="color: inherit; font: inherit;">
<tbody>
<tr>
<td id="colcol21">
<p>Hello,</p>
<p>AS would like your feedback!</p>
<p>We thank you for your time and participation.</p>
<p>Sincerely,</p>
<p>Saket</p>
<p>ZASD</p>
<span style="font-size:11px;font-family:Verdana, Arial, san-serif;"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Is it possible to Edit individual paragraphs here. Or should I clear it. I am not able locate the text field here.
Using this id id="colcol21" results in element not found.
Related
I'm using Python and Selenium to click through a site to select and reserve a room. The site presents a table of rooms available. I want to find a specific room and click on the button in the table that is associated with that room....but the button name changes depending on where the room is located in the table. Where it is located depends, in part, on what other rooms are available at the time I run through the website.
In this example, I want to reserve 'Room 34".
The table appears to be identified by:
<table id="MainContent_tblPage"....>
The row or section of the table that includes "Room 34" is identified by the following (which changes depending on where Room 34 appears in the table...which depends on how many other rooms are available):
<tr id=MainContent_rptrPropertyList_trContent_1" >
The button I want to click in this example is:
name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:
_ctl0:btnSelect"
(...but the button name changes depending on which other rooms appear in the table...)
My question: How do I find and click the correct button in a table if the button name changes dynamically depending on table content/rows...but the button is always in a row with the text I want to find?
HTML of the section I'm looking at (...sorry, I'm not sure how to make it more readable without the possibility of changes things that might be important for answering my question):
<table id="tblPropertyList" cellpading="0" cellspacing="0" align="center" border="0" width="100%">
<tbody><tr id="MainContent_rptrPropertyList_trContent_0">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> below...
##...I cut it out to save space but I can add it back if it helps --JRrcgp
<tr id="MainContent_rptrPropertyList_trContent_1">
<td class="room_grid_row">
<table cellpading="0" cellspacing="0" width="100%;">
<tbody><tr>
<td colspan="2" class="room_grid_heading_2">
Hornswoggle Tower
<br><span class="text2">CityPlace</span>
</td>
</tr>
<tr>
<td align="right" valign="top">
<div class="room_grid_image">
<a onclick="javascript:ShowGallery('lightSlider_1');" title="Room 34">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg" id="MainContent_rptrPropertyList_Image1_1" onerror="showNoImage(this);" style="visibility:true;">
</a>
</div>
<div class="demo">
<ul id="lightSlider_1" style="display:none">
<li data-thumb="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
<img src="imgHandler.ashx?image=\\fileserver.inncenter.pms.inrd.live\\Share1\\Assets/pics/roomClass_pic_8455.jpg">
</li>
</ul>
</div>
</td>
<td valign="top" width="100%" class="padding_left_1">
<table cellspacing="0" cellpadding="0" width="100%">
<tbody><tr>
<td class="room_grid_heading" colspan="3">
<div class="floatleft">
Room 34
</div>
<div class="floatright">
<span class="room_grid_from_rate_text1">From </span>
<span id="MainContent_rptrPropertyList_lblMinRate_1" class="room_grid_from_rate_text2">$88</span>
<!--<span class="room_grid_from_rate_text1">/Night</span>-->
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table width="100%" cellpading="0" cellspacing="0">
<tbody><tr>
<td valign="top" class="room_grid_discription_2">
<span id="MainContent_rptrPropertyList_reptSectionInline_1_lblSectionInline_0" class="more"><font face="Verdana">Text description of room.</font></span>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td id="MainContent_rptrPropertyList_tdSingleRate_1" style="display: none;">
<font class="Bold"> $<span id="MainContent_rptrPropertyList_lblratePrice_1">88</span><br></font> per night
</td>
</tr>
<tr>
<td valign="bottom" align="left">
<table align="left" width="100%" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="left" nowrap="" width="80%" class="displayRatePlan"><span class="room_grid_rateplanname">
Best Available Rate
</span><span class="room_grid_rateplan_moreinfo">(<a class="thickbox" id="lnkMoreInfo" title="Best Available Rate" href="#TB_inline?height=Div8&width=Div7&inlineId=MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0">More Info</a>)</span>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_Div9_0" class="roomClassSection" style="display: none;">
<div class="popupWidth" id="Div7">
<div class="popupHeight" id="Div8">
<table class="more_info_table" cellspacing="0" cellpadding="0" align="center" border="0">
<tbody><tr>
<td>
<div id="MainContent_rptrPropertyList_rptPropertyRooms_1_excludeRoom_DIV_0">
</div></td></tr><tr>
<td class="alt1">
Name:
</td>
<td style="width: 90%">
Room Rate
</td>
</tr>
<tr>
<td class="alt1">
Date:
</td>
<td>
Fri, Apr 27, 2018 - Sun, Apr 29, 2018
</td>
</tr>
<tr>
<td class="alt1">
Policy:
</td>
<td>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</td>
<td id="MainContent_rptrPropertyList_rptPropertyRooms_1_tdRateDescription_0" align="right" nowrap="nowrap" width="12%">
<span class="room_grid_fullrate">
$188
</span>
<span class="room_grid_fullrate_avgnightly">
<span id="MainContent_rptrPropertyList_rptPropertyRooms_1_lblRateMsg_0">(Avg nightly rate)</span></span>
</td>
<td width="8%" align="left">
<input type="submit" name="_ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect" value="Select" onclick="ShowProgress();" language="javascript" id="MainContent_rptrPropertyList_rptPropertyRooms_1_btnSelect_0" class="button green">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr id="MainContent_rptrPropertyList_trContent_2">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
<tr id="MainContent_rptrPropertyList_trContent_3">
##...snip...similar code as shown under <tr id="MainContent_rptrPropertyList_trContent_1"> above...
##...this continues to repeat once for each room available
EDIT: I'm currently working past this issue by hard-coding the button I'm clicking. I use Selenium to navigate to the webpage that creates a table of the rooms available and then I click on the appropriate button as it stands today. But the name of the button will change in the future:
room34 = browser.find_element_by_name('_ctl0:MainContent:rptrPropertyList:_ctl31:rptPropertyRooms:_ctl0:btnSelect')
room34.click()
EDIT 2: I've played the suggestion from #Grasshopper. His code didn't work for me, but I made some changes that I thought made progress....I was mistaken. I'm removing the rest of Edit 2 so as not to confuse the issue.
To click on the button with name as _ctl0:MainContent:rptrPropertyList:_ctl2:rptPropertyRooms:_ctl0:btnSelect with respect to the element with text as Room 34 you can use either of the following line of code :
Using following :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following::input[1]").click()
Using following-sibling :
driver.find_element_by_xpath("//div[#class='room_grid_image']/a[contains(#title,'Room 34')]//following-sibling::input[1]").click()
Try this xpath - "//div[normalize-space(.)='Room 34']/ancestor::tbody/tr/td//input[#type='submit']"
The 'Room 34' can be substituted by a python variable. normalize-space is required as the text has a lot of white space.
I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?
HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)
I have to create a 1 page html website.I have already done it in french language now i am trying to add an option at the top of my website to translate language between french or english.
The idea is to have a table which contains a button of flag of France and england (french and english) in first row (something like this:http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using html and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
see this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have all my html like this (it don't contain code for English table but it will have the table of same html code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
Write all the divs (and put class on them, like for example : .french ) in both languages and then use jQuery as following :
$(document).ready(function(){
$("#frenchFlag").click(function(){ //When you click on the French flag
$(".french").show(); //Show the divs with the class .french
$(".english").hide(); //Hide the divs with the class .english
});
$("#englishFlag").click(function(){ //Same thing
$(".french").hide();
$(".english").show();
});
});
Obviously you'll hide either the divs with the class .french or the divs with .english at the start of the loading of your page (basically in your
$(document).ready(function() {
//Write here, for example if your website is in French by default :
$(".french").show();
$(".english").hide()
});
You could write your HTML like this:
<div id='english' style='display: none'>
[your complete english HTML]
</div>
<div id='french' style='display: block'>
[your complete french HTML]
</div>
And for your buttons:
<img [...] onClick="document.getElementById('english').style.display=none; document.getElementById('french').style.display=block;">
For the french version. The english switches the display attribute, of course.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button id="bt1">In English</button>
<button id="bt2">In French</button>
<div>
<div id="one">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>English</td>
<td>c#</td>
<td>MVC</td>
</tr>
<tr>
<td>English</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>English</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
<div id="two" style="display:none">
<table style="width:50%">
<tr>
<th>Language</th>
<th>Name</th>
<th>Pattern</th>
</tr>
<tr>
<td>French</td>
<td>PHP</td>
<td>MVC</td>
</tr>
<tr>
<td>French</td>
<td>Java</td>
<td>J2EE</td>
</tr>
<tr>
<td>French</td>
<td>.Net</td>
<td>MVC4</td>
</tr>
</table>
</div>
</div>
<script>
function swap(one, two) {
document.getElementById(one).style.display = 'block';
document.getElementById(two).style.display = 'none';
}
document.getElementById('bt1').addEventListener('click',function(e){
swap('one','two');
});
document.getElementById('bt2').addEventListener('click',function(e){
swap('two','one');
});
</script>
</body>
</html>
Instead of button you can replace your image.
<div id="bt1" ><img src="english.png" alt="Smiley face" height="20" width="20"></div>
i have Servlet, JSP page and Javascript. so from servlet i pass list to jsp and it draws results. each result is presented in table and has delete button. so i want to get ID from the result i want to delete and alert value.
${delete} - is button. when there is no session button is hidden, because when session exists i pass String delete = "<input id=\"${emp.id}\" type=\"button\" onclick=\"test()\" value=\"Delete\" class=\"btn\">";
here is JSP Foreach:
<c:forEach items="${requestScope.product}" var="emp">
<table border='1' align='center' cellpadding="5" width="60%" class="products" cellspacing="0" style=" text-align: left; font-size: 13px; color: honeydew;">
<tr>
<td style="font-size: 10px; text-align: right">${emp.addDate}</td>
<td style="text-align: center;">${emp.manufacturer} ${emp.model} ${emp.screenSize}</td>
</tr>
<tr>
<td rowspan="7"></td>
</tr>
<tr>
<td>${emp.category}</td>
</tr>
<tr>
<td>${emp.manufacturer}</td>
</tr>
<tr>
<td>${emp.model}</td>
</tr>
<tr>
<td>${emp.screenSize}</td>
</tr>
<tr>
<td>${emp.amountInStock}</td>
</tr>
<tr>
<td rowspan="2" style="text-align: right; font-size: 20px; font-style: italic;">${emp.price}</td>
</tr>
<tr>
<td style="font-size: 10px;">ID: ${emp.id} ${emp.editDate}</td>
</tr>
</table>
${delete}
<hr>
</c:forEach>
Don't build up HTML in Java. You're mixing responsibilities.
Replace ${delete} with something like follows. Edit as necessary to do what you need.
<button type="button" onclick="alert('Delete ${emp.id}')">Delete</button>
In this page, the height of the payment method area is shorter than the height of the parent element in IE7.
How can I fix this Do I have to apply shading to the parent element - a table cell - instead of the table?
This is the page:
https://checkout.netsuite.com/s.nl?c=659197&sc=4&whence=
This is the login info:
email: test2#gmail.com
pass: test03
Here is the relevant row of HTML (the table structure is controlled by the hosting/CMS provider so I can only change it with javascript):
<tr>
<td width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%" id="shippingmethodtable">
<tbody><tr>
<td class="smalltext"><b>Shipping Method</b></td>
</tr>
<tr>
<td class="smalltext">
<table cellspacing="0" cellpadding="0" border="0">
<tbody><tr><td class="smalltext">shipping methods are listed in here</td></tr>
<input type="hidden" value="T" name="continueclicked">
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td width="50%">
<table cellspacing="0" cellpadding="0" border="0" id="paymentmethodtable">
<tbody><tr>
<td class="smalltext"><b>Payment Method</b></td>
</tr>
<tr>
<td class="smalltext">(none selected)</td>
</tr>
</tbody></table>
</td>
</tr>
'
This is the relevant CSS:
body.checkout #submitordertable td {
height:100%;
}
body.checkout #shippingaddress, body.checkout #billingaddress, body.checkout #shippingmethodtable, body.checkout #paymentmethodtable {
height:100%;
width:100%;
}
Try adding:
position: fixed;
in your style definition.