I am trying to click a button which is in a table cell. This cell contains couple of buttons.
Table has 5 rows and 10 collumns. Button cell is the last one.
Tried using xpath tool in firefox but i am getting an exception that the element could not be found.
tried these xpath variations:
Drv.Driver.FindElement(By.XPath("//table[#id='SERVICE_CANCEL']/tbody/tr[" + 4 + "]/td[10]")).Click();
Drv.Driver.FindElement(By.XPath(".//*[#id='SERVICE_CANCEL']/tr[" + 4 + "]/td[10]/div")).Click();
Drv.Driver.FindElement(By.XPath("//[#serid='10002455']/tr[4]")).Click();
none of these works. Also in every row's 10th cell there is a pack of buttons as i said before. Dont have any other ideas how to click it. If u could help i would appreciate it.
Because HTML code is a bit "Huge" so part of it:
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons><A title="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455"></A></DIV></TD></TR>
The button has an id (SERVICE_CANCEL). First you should rectify the HTML because you need quotes like that : <a id="SERVICE_CANCEL"> and then just use :
Drv.Driver.FindElement(By.Id("SERVICE_CANCEL")).Click();
You don't need any xpath when you have an id
Shien, As we cannot use IDs in a table cell value with ID(as these can be generated dynamically or not unique) you need to give the entire xpath.
I have taken your HTML and just updated the last values You can see with ** and following is the selenium code worked for me.
HTML Code:
<html>
<body>
<table border="1" width="200px">
<TR class=datagrid-row id=datagrid-row-r2-2-3 datagrid-row-index="3">
<TD style="DISPLAY: none" field="index">
<DIV class="datagrid-cell datagrid-cell-c2-index" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">4</DIV></TD>
<TD field="name">
<DIV class="datagrid-cell datagrid-cell-c2-name">Text1</DIV></TD>
<TD field="ID">
<DIV class="datagrid-cell datagrid-cell-c2-ID">000</DIV></TD>
<TD field="ID2">
<DIV class="datagrid-cell datagrid-cell-c2-ID2">111</DIV></TD>
<TD field="ID3">
<DIV class="datagrid-cell datagrid-cell-c2-ID3"></DIV></TD>
<TD field="buttons">
<DIV class="datagrid-cell datagrid-cell-c2-buttons" style="HEIGHT: auto; WHITE-SPACE: normal; TEXT-ALIGN: left">
<DIV class=gridbuttons>**<input type=button value="shutdown" class="button enabled" id=SERVICE_CANCEL serid="10002455" onclick="calFunc()"></input>**</DIV></TD></TR>
</table>
<script>
function calFunc()
{
alert("Hello World");
}
</script>
</body>
</html>
Selenium Code in Java:
driver.findElement(By.xpath("//table/tbody/tr[1]/td[6]/div/div/input[#value='shutdown']")).click();
Found the solution after digging even more.
Xpath that i used was:
//a[contains(#id, 'SERVICE_CANCEL') and contains (#serid, '" +tempPaslaugosIDReiksme + "')]"
Related
I am using HtmlAgilityPack to parse my html. My main goal is add some div elements around table row elements. However there are also some more elements in the table row. I only want to wrap it with div elements when the font's style is a background color of lightgreen.
Here's an example of what my html looks like:
<tr>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">Tove</font></td>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">To</font></td>
</tr>
however my current code:
HtmlNode[] nodes = document.DocumentNode.SelectNodes("//tr[//td[//font[#style='background-color: lightgreen']]]").ToArray();
foreach (HtmlNode node in nodes)
{
node.InnerHtml = node.InnerHtml.Replace( node.InnerHtml,"<div class=\"select-me\">" +node.InnerHtml + "</div>");
}
produces this html:
<tr>
<div class="select-me">
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"><to</font><font style="background-color: white" color="black">></font></td>
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"><to</font><font style="background-color: white" color="black">></font></td>
</div>
</tr>
<tr>
<div class="select-me">
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">Tove</font></td>
<td style="padding-left: 40pt;"><font style="background-color: lightgreen" color="black">To</font></td>
</div>
</tr>
<tr>
<div class="select-me">
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"></to></font></td>
<td style="padding-left: 25pt;"><font style="background-color: white" color="black"></to></font></td>
</div>
</tr>
the div elements don't surround the tr elements and every tr has a div element, when only a tr element that has font element of background color lightgreen should contain a div element. If you look at the first tr element it has 4 font elements, instead of two. Ideally, my goal is to insert div elements around a tr element when its font's element background is lightgreen. I have looked at other posts, but I am still having trouble.
Correct html should like:
<div class="select-me">
<tr>
<td style="padding-left: 25pt;"><font style="background-color: lightgreen" color="black">hello</font></td>
<td style="padding-left: 25pt;"><font style="background-color: lightgreen" color="black">goodbye</font></td>
</tr>
</div>
for (var i = 0; i < nodes.Length; i++ )
{
var node = nodes[i];
node = HtmlNode.CreateNode(node.OuterHtml.Replace(node.OuterHtml, "<div class=\"select-me\">" + node.OuterHtml + "</div>"));
}
I am very new to razor I always workder with aspx pages, I am trying to have a login form with 2 text and a submit button and down of it I am trying to add a square menu with gradients and hoover but I got stuck.
this is my Login.cshtml:
#model Magazzino.Models.LoginViewModel
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (TempData["message"] != null)
{
<script type="text/javascript">
alert(#Html.Raw(Json.Encode(TempData["message"])));
</script>
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
<table>
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.TextBoxFor(a => a.Username)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(a => a.Password)</td>
<td>#Html.PasswordFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
</div>
}
<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Contatti", "Contatti")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Informazioni", "Informazioni")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
In this ways google and firefox render the div with the actionlink in a normal way but IE doesn't render the height so I added a layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
#RenderSection("scripts", required: false)
And now IE, Chrome and Firefox are rendering the div with the action without height, I guess it's not the right way to put HTMl elements that are not linked to the form, but How do I put other HTML elements inside a razor page which has got already a form?
Thank you
I think this is mostly css and html problem.
I don't see the closing tag for <div style="background: grey">, I would verify that it is closed properly.
You have two floating divs, I would put an extra tag <div style='clear:both'> before closing the <div style="background: grey"> tag. This will clear the floating after that point.
After 1. and 2., if you don't see the grey background, I would suspect that the inner divs covered the background, if so, I would add some padding in the parent tag, for example <div style="background: grey; padding: 10px;">
I have following image for the Create_Brochure ActionResult in Brochure Contrller Class
Here the whole URL of that Action
http://localhost:49669/Brochure/Create_Brochure?%5B0%5D.Property_ID=1&%5B0%5D.IsChecked=true&%5B0%5D.IsChecked=false&%5B1%5D.Property_ID=2&%5B1%5D.IsChecked=true&%5B1%5D.IsChecked=false&%5B2%5D.Property_ID=3&%5B2%5D.IsChecked=true&%5B2%5D.IsChecked=false&%5B3%5D.Property_ID=4&%5B3%5D.IsChecked=false&%5B4%5D.Property_ID=5&%5B4%5D.IsChecked=false&%5B5%5D.Property_ID=6&%5B5%5D.IsChecked=false&%5B6%5D.Property_ID=7&%5B6%5D.IsChecked=false&%5B7%5D.Property_ID=8&%5B7%5D.IsChecked=false&%5B8%5D.Property_ID=9&%5B8%5D.IsChecked=false&%5B9%5D.Property_ID=10&%5B9%5D.IsChecked=false
Once I click I want to save this view page as PDF , to do that I followed this tutorial
So this is the cshtml view page , so it doesn't have a model class
#model IEnumerable<int>
#{
ViewBag.Title = "Create Template";
}
<!DOCTYPE html>
<html>
<head>
<title>Create a Template</title>
</head>
<body>
<div style="width:100%; padding:10px; float:left;">
<table width=1100 cellpadding=10>
<tr>
<td colspan="2">
<div id="topper" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:15px 15px 0px 0px;">
Bank Brochure
</div>
</td>
</tr>
#if (Model.Contains(1))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: slategray; color: white; text-align: center; padding: 5px;">
<h1 style="font-family: 'Segoe UI'; color: black; text-align: center;" contentEditable='True'>Product Name</h1>
</div>
</td>
</tr>
}
#if (Model.Contains(2))
{
<tr>
<td colspan="2" style="background-color:lightgrey">
<div id="header" style="font-family: 'Segoe UI';color: white; text-align: center; padding: 5px;border-radius">
<h2 style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>Product Description</h2>
<p style="font-family: 'Segoe UI'; color: black;float:left" contentEditable='True'>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.Standing on the River Thames London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</td>
</tr>
}
#if (Model.Contains(3))
{
<tr>
<td colspan="2">
<div id="header" style="font-family: 'Segoe UI';background-color: steelblue; color: white; text-align: center; padding: 5px;">
<h3 style="font-family: 'Segoe UI'; color: white; text-align: center;font-style:italic" contentEditable='True'>"Unique Selling Propositions It enables ASP.NET Web developers to replace any textbox with an intuitive Word-like WYSIWYG html editor.
"</h3>
</div>
</td>
</tr>
}
#if()....
<tr>
<td colspan="2">
<div id="footer" style="font-family:'Segoe UI';background-color: black;color: white;clear: both;text-align: center;padding: 5px;border-radius:0px 0px 15px 15px;">
Copyright © 2015 Zoo Group , Solution by kelum.
</div>
</td>
</tr>
</table>
</div>
<br />
<button id="btn_sumbit" type="button" class="btn btn-danger submit">Save as PDF</button>
</body>
</html>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
<script type="text/javascript">
$('#btn_sumbit').on('click', function () {
$.ajax({
type: "POST",
url: '#Url.Action("DownloadActionAsPDF", "Brochure")',
dataType: "text",
data: null,
success: function (data) {
},
error: console.log("it did not work"),
});
});
</script>
}
this is controller class method to save to PDF
[HttpPost]
public ActionResult DownloadActionAsPDF()
{
string path = Request.Url.ToString();
//Request.Url.ToString() using to get current page URL
return new Rotativa.UrlAsPdf(path) { FileName = "UrlTest.pdf" };
}
but once I click this button it doesn't save to PDF file,
As i already commented that your code is calling the same Method again and again..
You can do the same thing by using ActionAsPdf and point it to the Create_Brochure Action method of yours
Ex:-
public ActionResult DownloadActionAsPDF()
{
return new Rotativa.ActionAsPdf("Create_Brochure") { FileName = "TestPdf.pdf"};
}
public ActionResult Create_Brochure()
{
//Your logic....
return View()
}
and in your view page no need of a button or a Ajax call can be done by a anchor tag
View:-
<a href="#Url.Action("DownloadActionAsPDF", "MyDiary")" class="btn btn-danger submit" download>SaveAsPdf</a>
I want to put controls on the page where I want for example grid view on the left side
and pairs of text boxes and labels on the right side. how could i do that?
because when i try to drag and drop it just puts text boxes and labels under the grid view or up the view (it sticks to the grid view)
You can control the Layout of your page :
1.) Using CSS. by use of <div>, <span> tags etc
2.) Using Tables
Using tables for page layout is actually debatable and many recommend not to use it. Anyhow thats totally a different question. Still check this: Why is using tables for website layout such an evil
Using CSS:
Page Markup:
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div id="content-left"></div>
<div id="content-main"></div>
<div id="content-right"></div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
CSS:
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#content {
margin-top:10px;
padding-bottom:10px;
}
#content div {
padding:10px;
border:1px solid #bbb;
float:left;
}
#content-left {
width:180px;
}
#content-main {
margin-left:10px;
width:500px;
}
#content-right {
margin-left:10px;
width:134px;
}
#footer {
float:left;
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #bbb;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
*Output:*
Using tables:
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright Note</td>
</tr>
</table>
Output:
Refer below links for more examples:
http://www.maxdesign.com.au/articles/css-layouts/
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
http://www.w3schools.com/html/html_layout.asp
<div id="song_html" class="show1">
<div class="left">
<!-- info mp3 here -->
3.88 mb
</div>
<div id="right_song">
<div style="font-size: 15px;">
<b>Beatles - Hey Jude mp3</b></div>
<div style="clear: both;">
</div>
<div style="float: left;">
<div style="float: left; height: 27px; font-size: 13px; padding-top: 2px;">
<div style="float: left; width: 27px; text-align: center;">
<a href="javascript:void(0)" onclick="showPlayer(161498180, 'b7f231500894c321c0a7739802edff16965eb111', 'beatles', 'hey+jude')"
rel="nofollow" id="lk161498180" class="play_now">Play</a></div>
<div style="margin-left: 8px; float: left;">
<a href="http://dc109.4shared.com/img/1038702204/8ffe01b/dlink__2Fdownload_2FxAdbDSb4_3Ftsid_3D20111224-60034-
aa918a50/preview.mp3" rel="nofollow" target="_blank" style="color: green;">Download</a></div>
<div style="margin-left: 8px; float: left;">
<a href="javascript:void(0)" onclick="showEmbed(161498180,
'b7f231500894c321c0a7739802edff16965eb111')" rel="nofollow" id="em161498180" class="embed">
Embed</a></div>
<div style="margin-left: 8px; float: left;">
<a href="http://www.ringtonematcher.com/go/?sid=WDLL&artist=beatles&song=hey+jude"
rel="nofollow" target="_blank" style="color: red;" title="Send Beatles - Hey Jude Ringtone to your Cell">
Send Ringtone</a></div>
<div style="clear: both;">
</div>
</div>
<div id="player161498180" style="float: left; margin-left: 10px;" class="player">
</div>
</div>
<div style="clear: both;">
</div>
</div>
<div style="clear: both;">
</div>
</div>
I would love to know how to retrieve the link 'http://dc109.4shared.com/img/1038702204/8ffe01b/dlink__2Fdownload_2FxAdbDSb4_3Ftsid_3D20111224-60034-aa918a50/preview.mp3'.
I asked around other forums and people numerous times but I still do not understand/not working.
It is a must that I get it through class "show1" as there are other classes.
If you do this often, you can use the third-party (open source) library HtmlAgilityPack and get your value using XPath (for which there are many resources online).
Once I create the HtmlDocument (by downloading the page using HtmlWeb.Load) I would use the following to get the URL:
String theLink = myDoc.DocumentNode.SelectSingleNode("//div[#class='show1']//a[.='Download']").Attributes["href"].Value;
If the only unique thing is the text, you can do it this way using jQuery:
var href = $('a:text("Download")').attr('href');
Hope this helps
you can do get it using an html-parsing, as HtmlAgilityPack.
simple example:
var doc = new HtmlAgilityPack.HtmlDocument();
doc.LoadHtml(html);
var nodes = doc.DocumentNode.SelectNodes("//a[.='Download']");
var link = nodes[0].Attributes["href"].Value;
I believe that you is getting this HTML from 4shared page, you can use the DownloadString method from WebClient class for get the HTML.
there more easy way to do it,using the API.