</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">test</td></tr>
</thead><tbody>
<tr>
<td>click</td>
<td>//div[#id='wrapper']/div/div/div</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[1]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[2]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[3]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//div[#id='dataTableContent']/div/div/div[2]/table/tbody/tr[4]/td</td>
<td>2</td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>id=backButton</td>
<td></td>
</tr>
<tr>
<td>waitForElementNotPresent</td>
<td>//div[contains(#class,'ui-widget-overlay')]</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
I want to click through 4 sections.
All have the same path, but not the same tablediv.
/div/div/div[2]/table/tbody/tr[1]/td
--> 1 to 4
How can I do this, thats the code are minimalize,
how can I use a while loop here?
The Code in Selenium has 18 commands..
Thanks
Since you are using Selenium IDE rather than WebDriver, the only "while" loop that you'll be able to execute is by executing plain old javascript.
<tr>
<td>store</td>
<td>iterator</td>
<td>1</td>
</tr>
<tr>
<td>storeEval</td>
<td>while (iterator <= 4) { browserBot.click("/div/div/div[2]/table/tbody/tr[1]/td[" + iterator + "]" }</td>
<td></td>
</tr>
You'll of course need to play with it, this is pseudo-code but will give a pretty decent idea of how to solve it using the IDE.
Related
I want to compute and fill the ranking in the image below based on the total. How will be able to achieve this using js/jquery?.
I have created the table manually (dynamically also) using HTML. I also have button to generate the rank (which I know how to do it). I just want to have a function or way to add rank to my column.
So that rank should be in order (1, 2, 2, 3).
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total"></td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
Any help will be appreciated.
You have to organise the total score by getting all the values, sort and remove duplicates.
And you can assign the rank value by $('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
You can do something like:
$(function() {
//Get all total values, sort and remove duplicates
let totalList = $(".total")
.map(function() {return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b) {if (b != a[0]) a.unshift(b);return a}, [])
//Assign rank
totalList.forEach((v, i) => {
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table" class="table table-stripe table-bordered">
<thead>
<tr>
<td class="d-none">ID</td>
<td>Name</td>
<td>Crit1</td>
<td>Crit2</td>
<td>Crit3</td>
<td>Crit4</td>
<td>Crit5</td>
<td>Total</td>
<td>Rank</td>
</tr>
</thead>
<tbody>
<tr>
<td class="d-none">2</td>
<td>aaaa</td>
<td>20</td>
<td>0</td>
<td>50</td>
<td>0</td>
<td>0</td>
<td class="total">80</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">3</td>
<td>Greggggg</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">4</td>
<td>Jjjjoohhn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">65</td>
<td class="Rank"></td>
</tr>
<tr>
<td class="d-none">5</td>
<td>asdada</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="total">50</td>
<td class="Rank"></td>
</tr>
</tbody>
</table>
You can even make it shorter like
$(".total")
.map(function(){return $(this).text()})
.get()
.sort(function(a,b){return a - b })
.reduce(function(a, b){ if (b != a[0]) a.unshift(b); return a }, [])
.forEach((v,i)=>{
$('.total').filter(function() {return $(this).text() == v;}).next().text(i + 1);
});
I am trying to compare values in an Array (Dynamically added from a website), using Selenium-IDE to do this comparison.
For some reason they are still being compared using string logic - so 58 > 105 (Because 5 > 1)
Below is my code extract that I know to be faulty
<tr>
<td>storeEval</td>
<td>0</td>
<td>i</td>
</tr>
<tr>
<td>while</td>
<td>storedVars['i'] < storedVars['parcTotal']</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>jQuery('article.parcarticle').eq(${i}).attr('id')</td>
<td>articleID</td>
</tr>
<tr>
<td>storeText</td>
<td>css=#${articleID} .table-container tr:nth-child(2) .tbl-price .price</td>
<td>firstParcCost</td>
</tr>
<!--Remove all Commas and Currency Symbol-->
<tr>
<td>echo</td>
<td>${firstParcCost}</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{storedVars['firstParcCost'].replace(",","").substring(1)}</td>
<td>firstParcCost</td>
</tr>
<tr>
<td>storeEval</td>
<td>javascript{parseInt(storedVars['firstParcCost'])}</td>
<td>firstParcCost</td>
</tr>
<tr>
<td>echo</td>
<td>${firstParcCost}</td>
<td></td>
</tr>
<tr>
<td>push</td>
<td>javascript{storedVars['firstParcCost']}</td>
<td>firstParcCostArray</td>
</tr>
<tr>
<td>echo</td>
<td>${firstParcCostArray}</td>
<td></td>
</tr>
<tr>
<td>gotoIf</td>
<td>storedVars['i']==0</td>
<td>zeroSkip</td>
</tr>
<tr>
<td>echo</td>
<td>javascript{storedVars['firstParcCostArray'][(storedVars['i'])-1] + " is bigger than " + storedVars['firstParcCostArray'][(storedVars['i'])]}</td>
<td></td>
</tr>
<tr>
<td>assertEval</td>
<td>storedVars['firstParcCostArray'][(storedVars['i'])-1] >= storedVars['firstParcCostArray'][(storedVars['i'])]</td>
<td>true</td>
</tr>
<tr>
<td>label</td>
<td>zeroSkip</td>
<td></td>
</tr>
<tr>
<td>storeEval</td>
<td>${i}+1</td>
<td>i</td>
</tr>
<tr>
<td>endWhile</td>
<td></td>
<td></td>
</tr>
I've found a work-around which deals with a lack of JS knowledge.
I've moved the parseFloat to the Assertion, and that has appeared to fix things. I've been told that parseFloat only treats it as a float temporarily, and then reverts back to its old data-type
I have a loop where i want display tables and calculate the sum here is html
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
}
In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
$('table').each(function () {
calculateColumn(1);
calculateColumn(2);
})
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text(total);
}
When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method
$(document).ready(function() {
$('table').each(function() {
calculateColumn(this, 1);
calculateColumn(this, 2);
})
});
function calculateColumn(table, index) {
var total = 0;
$(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
total += +$(this).text() || 0;
});
$(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>6</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>6</td>
<td>150</td>
</tr>
<tr>
<td>Banana</td>
<td>3</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>120</td>
</tr>
<tr>
<td>Organe</td>
<td>4</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>300</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
In a function I need to pass a arr. I want to remove all columns of html table.
Not sure how to do this.
I tried this, but not working:
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
</table>
and in javascript I have a variable:
var arr=[0,2,3];
I want to remove all columns and its data from table on specified so output will be:
<table>
<thead>
<tr>
<td>b</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>e1</td>
</tr>
<tr>
<td>b2</td>
<td>e2</td>
</tr>
<tr>
<td>b3</td>
<td>e3</td>
</tr>
</tbody>
</table>
You can use the array to create a filter for tds to be deleted as given below
var arr = [0, 2, 3];
var filters = arr.map(function(val) {
return 'td:nth-child(' + (val + 1) + ')';
});
$('table').find(filters.join()).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
I have a table dynamically generated by php. In this table have information for different semester (such as : first, second, third etc). Now i want to show specific semester information if user click a link from same table without a query. I am newbie in this forum and its my first question. sorry for poor english. !
My code
<table id="course_offering" class="table table-striped table-hover custab ">
<thead>
<tr>
<th>Course Code</th>
<th>Course title</th>
<th>Credit Hours</th>
<th>Contact Hours</th>
<th>Pre Requisite</th>
<th>Course Type</th>
<th>Year</th>
<th>Semester</th>
<th>Offering Year</th>
<th>Offering Session</th>
</tr>
</thead>
<tbody>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>1</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2015</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
<tr>
<td>EEE 2505</td>
<td>Electrical </td>
<td>2</td>
<td>3</td>
<td></td>
<td>Theory</td>
<td>2</td>
<td>4</td>
<td>2014</td>
<td> Spring </td>
</tr>
</tbody>
</table>
here is a working example:
http://jsfiddle.net/K7PjR/1/
function getRowsByText(text) {
var resultRows = $();
$('tr').each(function () {
var row = $(this);
var rowText = row.text().trim();
if (rowText === text) {
resultRows = resultRows.add(row); //return the row
}
});
return resultRows;
}
getRowsByText('apple').css('color', 'red');
getRowsByText('orange').css('color', 'orange');
HTML:
<table>
<tr>
<td>apple</td>
</tr>
<tr>
<td>orange</td>
</tr>
<tr>
<td>bannana</td>
</tr>