Develop Reference

Avoiding StaleElementReferenceException when dealing with a dynamic table in Selenium

I am having trouble dealing with a dynamic table.
This is our table:
<table class="table" style="min-width: 870px; max-width: 870px">
<colgroup>
<col style="width: 30px">
<col style="width: 200px">
<col style="width: 80px">
<col style="width: 70px">
<col style="width: 200px">
<col style="width: 50px">
<col style="width: 50px">
</colgroup>
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
<tfoot>
<tr>
<td class="text-right" colspan="3">Media del grupo</td>
<td class="text-center media" colspan="1">1</td>
<td class="text-center noeditable" colspan="1"></td>
<td class="text-center media" colspan="1"></td>
<td class="text-center media" colspan="1"></td>
</tr>
</tfoot>
</table>
Each <tr> contains the following:
<tr>
<td class="indice">1</td>
<td id="accion-1-alumno-0" data-tooltip="" class="has-tip titulo" title="">Ap_Alumno_1ESOA_1, Nb_Alumno_1ESOA_1</td>
<td data-tooltip="" class="has-tip titulo" data-selector="tooltipdtk00g" title="">1ESOA</td>
<td class="nota relative " style="text-align:center; color: #ed1c24!important">
<div id="accion-1-celda-0-0-0" class="elemento comentarios">1</div>
</td>
<td class="nota relative " style="text-align:center; color: #000000!important">
<div class="elemento comentarios"><span id="accion-1-editar-1-0" class="block left ellipsis span comentario" title=""></span><span id="accion-1-prismaticos-1-0" class="glyphicons glyph_observaciones observacion right"></span></div>
</td>
<td class="nota relative " style="text-align:center; color: #000000!important">
<div id="accion-1-celda-2-0-0" class="elemento comentarios"></div>
</td>
<td class="nota relative " style="text-align:center; color: #000000!important">
<div id="accion-1-celda-3-0-0" class="elemento comentarios"></div>
</td>
</tr>
We are interested in the elements
<div id="accion-1-celda-0-0-0" class="elemento comentarios">1</div>
which are being added to a IList<IWebElement>
However, when trying to SendKeys to the element, the first time it will work correctly, however the second time will always fail with StaleElementReferenceException, this is because the previous element (the first one) has changed and with it the page DOM has also changed.
I am trying to find a way to find the element again if StaleElementReferenceException is thrown.
So far, both this methods have failed:
Method one
public virtual void Introducir_NotasAlumnos(string nota)
{
IList<IWebElement> divNota = tablaNotas
.Select((element, index) => element.FindElement(By.Id("accion-1-celda-0-" + index + "-0")))
.ToList();
divNota.ToList().ForEach(element => Introducir_Nota(element, nota));
}
Method two
public virtual void Introducir_NotasAlumnos(string nota)
{
int index = 0;
foreach (IWebElement element in tablaNotas)
{
By locator = By.Id("accion-1-celda-0-" + index + "-0");
Introducir_Nota(element.FindElement(locator), nota);
index++;
}
}
Thanks for your time.

Here your locators:
table: .table tbody > tr
table row by index: .table tbody > tr:nth-child(1)
and you method (java code):
int size = driver.findElements(By.cssSelector(".table tbody > tr")).size();
for (int i = 0; i < size; i++) {
WebElement row = driver.findElement(By.cssSelector(".table tbody > tr:nth-child(" + i + ")"));
By locator = By.id("accion-1-celda-0-" + i + "-0");
Introducir_Nota(row.findElement(locator), nota);
}
You have certain count of rows and you find row element independently, should not throw StaleElementReferenceException exception.
Here shorter version:
int size = driver.findElements(By.cssSelector(".table tbody > tr")).size();
for (int i = 0; i < size; i++) {
Introducir_Nota(row.findElement(By.cssSelector("#accion-1-celda-0-" + i + "-0")), nota);
}

Unable to click button which is inside iframe and table in Selenium webDriver with c#

I am new to c# and I am working with Selenium chrome webdriver in c#. I am trying to click button which inside table. I am not able to identify and click button.The hierarchy of button is (Page > PopOver > PopOverFrame > Table1 > Table2 > Button to click )
Any help with this would be much appreciated thank you.
my code is :
*/
// Closing old tab, keeping control in new tab and trying to perform click operation
var currentWindow = BaseTest.Driver.CurrentWindowHandle;
var availableWindows = new List<string>(BaseTest.Driver.WindowHandles);
foreach (string mywindows in availableWindows)
{
if (mywindows != currentWindow)
{
Driver.SwitchTo().Window(mywindows).Close();
}
else
{
Driver.SwitchTo().Window(currentWindow);
// performing click action on RUN REPORT button
IWebElement popOver = Driver.FindElement(By.Id("popOver"));
IWebElement popOverFrame = popOver.FindElement(By.Id("popOverFrame"))
IWebElement table1 = popOverFrame.FindElement(By.XPath("//*[#id='form1']/table"));
IWebElement Table2 = table1.FindElement(By.XPath("//*[#id='tblReport']"));
Table2.FindElement(By.Id("contentPlaceholder_btnPrint")).Click();
}
}
Please refer to attached screenshot of what html page looks like.
<html xmlns="http://www.w3.org/1999/xhtml" ><title>
<div id="divReportHeader">
<span id="contentPlaceholder_lblReportDescHeader" class="reportHeader">Description</span>
<br>
<span id="contentPlaceholder_lblReportDescription">Offer</span>
</div>
<table>
<tbody><tr>
<td style="vertical-align: top;">
<div style="margin: 2px; padding: 8px;">
<table width="1000px" style="border-spacing: 0; padding: 0" id="tblReport">
<tbody><tr>
<td></td>
</tr>
<tr>
<td><div id="contentPlaceholder_generalInformation" class="reportHeader">Information</div></td>
</tr>
<tr>
<td>
<span id="contentPlaceholder_lblRptInfo">
This report may require more information. Click "Run Report" to view the report inline.
</span>
<br>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>
<span id="contentPlaceholder_lblfrom">abc </span>
<select name="ctl00$contentPlaceholder$ddlfromYear" onchange="javascript:setTimeout('__doPostBack(\'ctl00$contentPlaceholder$ddlfromYear\',\'\')', 0)" id="contentPlaceholder_ddlfromYear">
</select>
<span id="contentPlaceholder_lblFilter5" style="display: block; margin-top: 10px; margin-bottom: 4px;">Additional columns to be included:<br>Due to potential page size limitations, additional custom columns should only be selected when intending to view inline or export as Excel.</span>
<input type="submit" name="ctl00$contentPlaceholder$btnSelectAll" value="Select All" id="contentPlaceholder_btnSelectAll" class="roundedButton">
<input type="submit" name="ctl00$contentPlaceholder$btnDeselectAll" value="Deselect All" id="contentPlaceholder_btnDeselectAll" class="roundedButton" style="margin-bottom:5px;">
<table id="chkList2" class="correctCheckboxes">
<tbody><tr>hkList2_0" value="Select"><label for="chkList2_0">Help</label></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td>
<br>
<div id="contentPlaceholder_parameterNotes" class="reportHeader">
Notes
</div>
<br>
<span id="contentPlaceholder_txtParameterNotes">None</span>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<input type="submit" name="ctl00$contentPlaceholder$btnPrint" value="RUN REPORT" onclick="disable('contentPlaceholder_btnPrint');__doPostBack('ctl00$contentPlaceholder$btnPrint','');" id="contentPlaceholder_btnPrint" class="roundedButton" style="width:130px;">
</td>
</tr>
</tbody></table>
</div></td>
</tr>
</tbody></table>
<iframe id="ifrmDownload" style="display: none;"></iframe>
<iframe id="ifrmStatus" src="statuscheck.aspx" style="display: none;"></iframe>
</form>
</body></html>

Try this:
//remove this line IWebElement popOver = Driver.FindElement(By.Id("popOver"));
Driver.SwitchTo().DefaultContent();
IWebElement popOverFrame = Driver.FindElement(By.Id("popOverFrame"))
Driver.SwitchTo().Frame(popOverFrame);
//remove this line IWebElement table1 = popOverFrame.FindElement(By.XPath("//*[#id='form1']/table"));
IWebElement Table2 = Driver.FindElement(By.XPath("//*[#id='tblReport']"));
Table2.FindElement(By.Id("contentPlaceholder_btnPrint")).Click();

Try the below one:
driver.switchTo().frame(driver.findElement(By.xpath(iframeXpath)));
And once the operations are completed inside iFrame, switch back to default content.
driver.switchTo().defaultContent();

How to Display A Text / Message in Web Page Using ASP.NET

In My web page In a portion i want to display a text/message and that text/message has to change after 15 seconds and it has to replaced with another text/message in the same portion. I Created this web application using ASP.NET.
In above Image I want to Display the Text/Message. How can i do ?
ASPX :
<table>
<tr>
<td style="width: 150px">
<a href="http://www.wissen.com">
<img alt="" class="style4" src="Wissen_logo.png" />
</a>
</td>
<td style="width: 1000px; background-color:Aqua">
<marquee behavior="scroll" scrollamount="3" direction="left" width="1000">ghdkj * hchjsdgfhgflghl * yuftwefrweirgeweko</marquee>
</td>
</tr>
</table>

JS
<script type="text/javascript">
var i=1;
var stat1="foo";
var stat2="Bar";
var stat3="foofoo";
function showText(){
var msgNo="stat"+i;
msgNo=eval(msgNo);
var tgtLabel=document.getElementById("spnRandom");
tgtLabel.innerHTML=msgNo;
i=i+1;
if(i==4){
i=1;
}
}
window.onload=function(){
window.setInterval(showText,1000);
};
</script>
HTML
<table>
<tr>
<td style="width: 150px">
<a href="http://www.wissen.com">
<img alt="" class="style4" src="Wissen_logo.png" />
</a>
</td>
<td style="width: 1000px; background-color:Aqua">
<div>
<span id="spnRandom"></span>
</div>
</td>
</tr>
</table>
Here is a working Fiddle
If you want it for 15 second, just change the value from 1000 to 15000

Create UpdatePanel.
Create a Label inside UpdatePanel.

WebGrid: GetSelectLink() returning wrong details for selected record

Context: I’m building a web application using WebMatrix and C# Razor. The application searches a database and returns the results to a WebGrid. Once the results are returned, you can click a Details link and view the details on a new browser tab.
Problem: The initial search, which returns all records, works fine. If I enter search words, the correct results are returned, but when I click on Details, I get details for the record that was in the selected row in the initial search.
Example: The initial search returns records 1-5. The subsequent search returns records 31, 65, 86,92, 101. If I click on Details for record 65, I get details for record 2 because record 2 occupied row 2 in the initial search.
Code:
#{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Home Page";
}
#{
var db = Database.Open("xyz");
var query = "select bg_bug_id [BUGID], BG_SUMMARY SUMMARY from [dbo].[BUG] where BG_SUMMARY like #0 and BG_SUMMARY like #1";
var input1 = "%" + Request["input1"] + "%";
var input2 = "%" + Request["input2"] + "%";
var data = db.Query(query, input1, input2);
var gridBug = new WebGrid(source: data, canPage: true, canSort: true, rowsPerPage: 10);
if(gridBug.HasSelection){
var recordIdInt = 0;
recordIdInt = gridBug.SelectedRow.Value.BUGID;
var recordId = recordIdInt.ToString();
var bugDescQuery = "select [BG_DESCRIPTION] from [dbo].[BUG] where [BG_BUG_ID] =" + recordId; // or [BG_BUG_ID] = 25001";
var bugDescResult = db.Query(bugDescQuery);
foreach(var item in bugDescResult){
var desc = item.BG_DESCRIPTION;
var modDesc = desc.Replace("<div align=\"left\">", "<div>").Replace("<font face=\"Arial\">", "<font>").Replace("<span style=\"font-size:8pt\">", "<span>");
<script>
$(document).ready(function(){
var x = '#Html.Raw(HttpUtility.JavaScriptStringEncode(modDesc))';
var win = window.open();
win.document.body.innerHTML = "Record ID: " + #recordId + " - -" + x;
})
</script>
}
}
}
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
#gridBug.GetHtml(
tableStyle: "grid",
headerStyle: "head",
alternatingRowStyle: "alt",
columns: gridBug.Columns(
gridBug.Column(header:"", format:#<text>#item.GetSelectLink("Details")</text>, style: "product2"),
gridBug.Column("BUGID", "BUGID", style: "product2"),
gridBug.Column("SUMMARY", "SUMMARY", style: "product")))
</form>
#section script{
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
}
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
SOURCE AFTER 2nd SEARCH:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Home Page</title>
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/jquery-ui-1.8.24.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript">
$(function(){
$('th a, tfoot a').live('click', function() {
$('form').attr('action', $(this).attr('href')).submit();
return false;
});
});
</script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">XXXX</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<form method="post">
<input type="text" name="input1"/>
<input type="radio" id="and" name="operator" value="and" checked>And
<input type="radio" id="or" name="operator" value="or">Or
<input type="text" name="input2" />
<select>
<option value="Unresolved">Unresolved</option>
<option value="Resolved">Resolved</option>
</select>
<input type="submit" value="Search" />
<table class="grid">
<thead>
<tr class="head">
<th scope="col">
</th>
<th scope="col">
BUGID </th>
<th scope="col">
SUMMARY </th>
</tr>
</thead>
<tfoot>
<tr >
<td colspan="3">1 2 3 > </td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="product2">Details</td>
<td class="product2">1655</td>
<td class="product">summary text for record 1655</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2516</td>
<td class="product">summary text for record 2516</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">2639</td>
<td class="product">summary text for record 2639</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">2643</td>
<td class="product">summary text for record 2643</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3493</td>
<td class="product">summary text for record 3493</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">3746</td>
<td class="product">summary text for record 3746</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">3864</td>
<td class="product">summary text for record 3864</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">5172</td>
<td class="product">summary text for record 5172</td>
</tr>
<tr>
<td class="product2">Details</td>
<td class="product2">7156</td>
<td class="product">summary text for record 7156</td>
</tr>
<tr class="alt">
<td class="product2">Details</td>
<td class="product2">7532</td>
<td class="product">summary text for record 7532</td>
</tr>
</tbody>
</table>
</form>
<style type="text/css">
.grid {
margin: 4px;
border-collapse: collapse;
width: 950px;
margin-left: 5px
}
.head {
background-color: #0094ff;
font-weight: bold;
color: #fff;
}
.grid th, .grid td {
border: 1px solid #c0c0c0;
padding: 5px;
}
.alt {
background-color: #e8e8e8;
color: #000;
}
.product {
width: 200px;
font-weight: normal;
}
.product2 {
width: 10px;
font-weight: normal;
}
</style>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2015 - XXXX</p>
</div>
</div>
</footer>
</body>
</html>

Knockout Binding problems

I am using ASP.NET MVC with knockout to build a calendar with events that when a user clicks on the event, an Ajax request is sent with the event data to a c# function.
I am having a tough time getting the error div to show up if the user is not logged in prior to clicking the add href, as well as the add href to call the proper function.
The parameters in the AddEvent are being populated from the ASP.NET View
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="/Hudl/Content/styles.css" />
<link rel="stylesheet" href="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.css" />
<script src="/Hudl/Scripts/knockout-3.1.0.js"></script>
<script src="/Hudl/Scripts/jquery.min.js"></script>
<script src="/Hudl/Scripts/jquery-ui-1.11.0/jquery-ui.js"></script>
<script src="/Hudl/Scripts/Google/Google.js"></script>
<meta name="viewport" content="width=device-width" />
<title>Concert</title>
</head>
<body>
<div><img src="/Hudl/Content/Images/curtains_closing.jpg" width="100%" height="200em"></div>
<div class="title">
7 2014
<span id="signinButton">
<span class="g-signin"
data-callback="signinCallback"
data-clientid="1071645370589-acdsg7rjbsk7dn5lecfbk83k9uh8fnaa.apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-requestvisibleactions="http://schema.org/AddAction"
data-scope="https://www.googleapis.com/auth/plus.login">
</span>
</span>
</div>
<div data-bind="visible: displayError" id="error" title="Must Login">
<p>You must login to Google+ before you can add a concert to your calendar.</p>
</div>
<table border="1">
<tr><th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th></tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><div class="date">1</div></td>
<td><div class="date">2</div></td>
<td><div class="date">3</div></td>
<td><div class="date">4</div></td>
<td><div class="date">5</div></td>
</tr>
<tr>
<td><div class="date">6</div></td>
<td><div class="date">7</div></td>
<td><div class="date">8</div></td>
<td><div class="date">9</div></td>
<td><div class="date">10</div></td>
<td><div class="date">11</div></td>
<td><div class="date">12</div></td>
</tr>
<tr>
<td><div class="date">13</div></td>
<td><div class="date">14
<div>
18:30
Paul McCartney
</div>
</div>
</td>
<td><div class="date">15</div></td>
<td><div class="date">16</div></td>
<td><div class="date">17</div></td>
<td><div class="date">18
<div>
13:30
Midwest Cup Show Choir Invitational
</div>
</div>
</td>
<td><div class="date">19
<div>
20:00
Marc-Andre Hamelin
</div>
</div>
</td>
</tr>
<tr>
<td><div class="date">20</div></td>
<td><div class="date">21</div></td>
<td><div class="date">22
<div>
17:00
Edison
</div>
<div>
18:00
Tracy Byrd
</div>
</div>
</td>
<td><div class="date">23</div></td>
<td><div class="date">24
<div>
18:45
Imagine Dragon
</div>
<div>
20:00
Blue Man Group
</div>
</div>
</td>
<td><div class="date">25</div></td>
<td><div class="date">26</div></td>
</tr>
<tr>
<td><div class="date">27</div></td>
<td><div class="date">28</div></td>
<td><div class="date">29</div></td>
<td><div class="date">30
<div>18:30
Powerman 5000
</div>
</div>
</td>
<td>
<div class="date">31</div>
</td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
<script type="text/javascript">
(function () {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function signinCallback(authResult) {
this.authResult = authResult;
if (authResult['status']['signed_in']) {
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
console.log('Sign-in state: ' + authResult['error']);
}
};
</script>
<script>
$(function () {
$("#error").dialog();
});
</script>
</body>
</html>
and my js
function ViewModel() {
var self = this;
self.displayError = ko.observable(false);
self.addEvent = function(id, artist, description, date, startTime, endTime) {
if (!authResult['status']['signed_in']) {
self.displayError = true;
self.errorMessage = 'You are not logged-in to your google account.';
} else {
XMLHttpRequest.open("Get", "https://www.googleapis.com/calendar/v3/users/me/calendarList", true);
//make google api call to get list of calendars based on authResult value in callback function
//if api call to get calendars is successful, use authResult, concert, and calendarID to insert event into to make a new google api call to insert event
}
};
};
ko.applyBindings(new ViewModel());
right now i am receiving "Uncaught TypeError: undefined is not a function" everywhere that a javascript function is being called.

I went ahead and created a fiddle for this at http://jsfiddle.net/RKD9J/.
Key change was to use a knockout data binding handler for the click event to add a concert.
18:30Powerman 5000
Changes to
<a href="#" data-bind="click: function(data, event) { addEvent('1', 'Powerman 5000', 'Heavy Metal Awesomeness!', '07/30/2014', '18:30', '23:30:00') }" >18:30</a> Powerman 5000
Following the instructions for passing arguments to functions found here http://knockoutjs.com/documentation/click-binding.html
Your javascript:AddEvent statement is assuming that there is an AddEvent declared at the top (window) level, not on your view model.