I'm trying to read values from a fairly big HTML table in Protractor (about a thousand rows and 5 columns).
Protractor's element.all().getText() method is very slow at this, so I decided to implement a solution using browser.executeScript to read the values directly, like:
async getTextFromHtmlTable(){
try{
var rows = element.all(by.css('table[id^="P"] tr'));
var numRows = await rows.count();
var arrRows = [];
for (var i = 2; i <= numRows; i++){
console.log("********Processing row: " + i);
var css = 'table[id^=\"P\"] tr:nth-child(' + i + ') td div div';
//**Slow solution: var arrRowsText = await element.all(by.css(css)).getText();
//Faster:
var arrRowsText = await browser.executeScript("return document.querySelectorAll('" + css + "')").then(function(elements){
var arrayRes = [];
for (var j=0; j<elements.length; j++){
console.log("****** Element text: " + elements[j].textContent);
arrayRes.push(elements[j].textContent);
}
return arrayRes;
});
arrRows.push(arrRowsText.join(';').replace(/;\s/gm, ";"));
}
return arrRows;
}catch(err){
console.log ('Some error: ' + err)
};
}
However, console output when executing the test is:
********Processing row: 569
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
********Processing row: 570
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
****** Element text: undefined
No matter what attribute I read (textContent, innerText, innerHTML...), it always returns 'undefined'. Am I doing anything wrong? Thanks for the help!
I finally found a solution to this, DublinDev pointed me in the right direction when he said that executeScript does not return NodeLists. So I thought about processing the NodeList inside the executeScript method and have it return an array of texts instead of the actual NodeList:
var arrRowsText = await browser.executeScript("return (function(){" +
"var nodes = document.querySelectorAll('" + css + "');" +
"var arrayRes = [];" +
"for (var j=0; j<nodes.length; j++){" +
" arrayRes.push(nodes[j].innerText);" +
"}" +
"return arrayRes;" +
"})();");
Now it works like a charm and element texts are read much faster with innerText than with getText().
It appears that nodelists are returned through the executeScript method as an array of webElements so getText() should work. You also don't need to use .then() when something is already awaited. Can you try the below code?
async getTextFromHtmlTable(){
try{
var rows = element.all(by.css('table[id^="P"] tr'));
var numRows = await rows.count();
var arrRows = [];
for (var i = 2; i <= numRows; i++){
console.log("********Processing row: " + i);
var css = 'table[id^=\"P\"] tr:nth-child(' + i + ') td div div';
//**Slow solution: var arrRowsText = await element.all(by.css(css)).getText();
//Faster:
var arrRowsText = await browser.executeScript("return document.querySelectorAll('" + css + "')");
let allEleText = [];
for(let j = 0; j < arrRowsText.length; j++){
allEleText.push(await arrRowsText[j].getText());
}
arrRows.push(allEleText.join(';').replace(/;\s/gm, ";"));
}
return arrRows;
}catch(err){
console.log ('Some error: ' + err)
};
}
Related
I want to get HTML table data to cover to array by using selenium and Javascript.
I test below code and I can get console.log(lm) in the for loop, but it shows
array each loop.
the wepage is https://www.scoresandodds.com/mlb
and click Game Details-->Line Movement
How I can get array(lm) at the end of the code? why I can not get any
data in my code ?
console.log("Line Movement=================================\n");
driver.findElement(By.xpath('//*[#id="line-movements-tab--65040"]/span')).click(); //Line Movement
await driver.sleep(2500);
let rowC = '';
driver.findElements(By.xpath('//*[#id="line-movements--65040"]/div/table/tbody/tr')).then( function(rows){
console.log("[" + rows.length + "]" + "\n\n");
rowC = rows.length;
});
var lm=[];
for (i=0; i<rowC; i++) {
for (s=1; s<5; s++) {
var addCellText=function(elem, doneCallback){
elem.getText().then(function(textValue){
driver.sleep(1000);
lm.push(textValue);
return doneCallback(null);
});
};
xpath='//*[#id="line-movements--65040"]/div/table/tbody/tr[' + i + ']/td[' + s + ']';
driver.findElements(By.xpath(xpath)).then(function(elem){
async.each(elem, addCellText, function(error){
driver.sleep(1000);
//console.log(lm);
});
});
}
}
console.log("lm");
console.log(lm);
each team has a different code such as 65040, please look at each games code in the html. For example today(5/30) ARI-ATL of the code is 65051.
I am trying to figure out how I can clear the <p> elements that are generated from a for loop before the for loop starts.
Essentially. I have a webpage where someone searches something and a list of results are shown. However if I search for something else, the new results get appended instead of clearing the old results first.
Here is the code:
async function parseitglinkquery() {
var queriedresults = await getitglinkquery();
console.log(queriedresults);
const output = document.querySelector('span.ms-font-mitglue');
output.removeChild("createditginfo"); \\tried to clear the <pre> here and it failed
for (let i = 0; i < queriedresults.length; i++) {
let text = "Company: " + JSON.stringify(queriedresults[i]["data"]["attributes"].organization-name) + "<br>"+
"Name: " + JSON.stringify(queriedresults[i]["data"]["attributes"].name) + "<br>" +
"Username: " + JSON.stringify(queriedresults[i]["data"]["attributes"].username).replace("\\\\","\\") + "<br>" +
"Password: " + JSON.stringify(queriedresults[i]["data"]["attributes"].password);
let pre = document.createElement('p');
pre.setAttribute("id", "createditginfo")
pre.innerHTML = text;
pre.style.cssText += 'font-size:24px;font-weight:bold;';
output.appendChild(pre);
console.log(typeof pre)
}
}
I tried to create a try and catch block where it would try to clear the <p> using removeChild() but that didn't seem to work either.
async function parseitglinkquery() {
var queriedresults = await getitglinkquery();
console.log(queriedresults);
const output = document.querySelector('span.ms-font-mitglue');
try {
output.removeChild("createditginfo");
}
catch(err){
console.log(err)
}
for (let i = 0; i < queriedresults.length; i++) {
let text = "Company: " + JSON.stringify(queriedresults[i]["data"]["attributes"].organization-name) + "<br>"+
"Name: " + JSON.stringify(queriedresults[i]["data"]["attributes"].name) + "<br>" +
"Username: " + JSON.stringify(queriedresults[i]["data"]["attributes"].username).replace("\\\\","\\") + "<br>" +
"Password: " + JSON.stringify(queriedresults[i]["data"]["attributes"].password);
let pre = document.createElement('p');
pre.setAttribute("id", "createditginfo")
pre.innerHTML = text;
pre.style.cssText += 'font-size:24px;font-weight:bold;';
output.appendChild(pre);
console.log(typeof pre)
}
}
You only have to clear the output-node right before the loop using the innerHTML-property.
output.innerHTML = '';
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
There are other ways too, if you want to remove only specific childs. You can make use of Node.childNodes together with a loop. With this, you have the opportunity to remove only specific children.
[...output.childNodes].forEach(childNode => {
output.removeChild(childNode)
});
// or specific
[...output.childNodes].forEach(childNode => {
// remove only <div>-nodes
if (childNode.nodeName == 'DIV') {
childNode.remove();
}
});
https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
https://developer.mozilla.org/en-US/docs/Web/API/Element/remove
The answer above is correct, but I believe that the original code and the answer can be further improved:
for variables that do not change, use const instead of let - this helps explaining the intention.
there seems to be a bug - if you have an attribute called "organization-name", you cannot access it as a property (...["attributes"].organization-name), but you can use array access instead: ...["attributes"]["organization-name"]. Otherwise, the code end up effectively as ...["attributes"].organization - name
when you have long property paths that are repeated a lot (like queriedresults[i]["data"]["attributes"] in your case), consider assigning them to a local variable.
This makes the code more readable and is actually better for performance (because of less array lookups):
// old code
let text = "Company: " + JSON.stringify(queriedresults[i]["data"]["attributes"].organization-name) + "<br>"+
"Name: " + JSON.stringify(queriedresults[i]["data"]["attributes"].name) + "<br>";
// new code
const attrs = queriedresults[i]["data"]["attributes"];
let text = "Company: " + JSON.stringify(attrs['organization-name']) + "<br>"+
"Name: " + JSON.stringify(attrs.name) + "<br>";
you are creating several pre's in a loop, this is ok, however the element id must be different! Each id must be unique in the whole page:
// wrong
for (let i = 0; i < queriedresults.length; i++) {
...
pre.setAttribute("id", "createditginfo")
...
}
// right/better
for (let i = 0; i < queriedresults.length; i++) {
...
pre.setAttribute("id", "createditginfo" + i) // "i" for uniqueness
...
}
you can use innerText, in which case you do not need to encode the attributes, plus it simplifies the code:
const pre = document.createElement('p');
pre.innerText = [
"Company: " + attrs["organization-name"],
"Name: " + attrs.name,
"Username: " + attrs.username, // presumably you don't need to decode "/" anymore :)
"Password: " + attrs.password
].join("\n") // so we declared a bunch of lines as an array, then we join them with a newline character
Finally, regarding the original question, I see three main ways:
simply clearing the contents of the parent with output.innerHtml = ''
iterating over each child and removing it with output.removeChild(childPre)
you can keep references to the generated pre's (eg, store each element in an array) and remove the later with point 2, but this is less automatic but in some cases it might be more efficient if you have a tone of elements at that same level.
I'm developing a way to export Woocommerce order data into a PDF doc table, using javascript.
For that I'm storing the innerText values of each order table cell in different let variables and later
use those variables to populate a HTML table which will appear in my final PDF doc.
I feel like I'm close to hitting gold, but I get a console error of Uncaught TypeError: Cannot read property 'innerText' of undefined on browser.
This is my code so far, any idea why I'm getting this error and any way I could fix it?
function printData(){
let orderTableData = document.getElementsByClassName("woocommerce_order_items")[0].innerHTML;
let orderTableSize = document.getElementById("order_line_items");
let tamanho = orderTableSize.rows.length;
let orderPricesData = document.getElementsByClassName("wc-order-totals")[0].innerHTML;
let orderItemName = document.getElementById("order_line_items").getElementsByClassName("name")[0].innerText;
let orderItemPrice = document.getElementById("order_line_items").getElementsByClassName("item_cost")[0].innerText;
let orderItemQtd = document.getElementById("order_line_items").getElementsByClassName("quantity")[0].innerText;
let orderItemTotal = document.getElementById("order_line_items").getElementsByClassName("line_cost")[0].innerText;
for(var j = 0; j <= tamanho; j++){
window.frames["print_frame"].document.body.innerHTML = "<table border='1' width='100%'><tr><th>Item</th><th>Preço uni.</th><th>Qtd.</th><th>Total</th></tr><tr><td>" + document.getElementById("order_line_items").getElementsByClassName("name")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("item_cost")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("quantity")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("line_cost")[j].innerText + "</td></tr></table>";
}
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
I'll also leave a print of the Woocommerce table I'm using for test.
In your loop, you don't need to use the condition <= (less than or equal) because you are begining with 0 (because its a array index), just use < (less than) in these cases.
Another thing, You should use a iframe to put the content you want to print, I didn't understand the window.frames logic you used.
I tested that snippet and it works:
function printData(){
let orderTableData = document.getElementsByClassName("woocommerce_order_items")[0].innerHTML;
let orderTableSize = document.getElementById("order_line_items");
let tamanho = orderTableSize.rows.length;
let orderPricesData = document.getElementsByClassName("wc-order-totals")[0].innerHTML;
let orderItemName = document.getElementById("order_line_items").getElementsByClassName("name")[0].innerText;
let orderItemPrice = document.getElementById("order_line_items").getElementsByClassName("item_cost")[0].innerText;
let orderItemQtd = document.getElementById("order_line_items").getElementsByClassName("quantity")[0].innerText;
let orderItemTotal = document.getElementById("order_line_items").getElementsByClassName("line_cost")[0].innerText;
let iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.style.display = 'none';
for(var j = 0; j < tamanho; j++){
iframe.contentDocument.body.innerHTML = "<table border='1' width='100%'><tr><th>Item</th><th>Preço uni.</th><th>Qtd.</th><th>Total</th></tr><tr><td>" + document.getElementById("order_line_items").getElementsByClassName("name")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("item_cost")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("quantity")[j].innerText + "</td><td>" + document.getElementById("order_line_items").getElementsByClassName("line_cost")[j].innerText + "</td></tr></table>";
}
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
I built this to test reports against csv files containing the data but I am running into this error "Cannot read property 'getText' of undefined" . Please advise thanks. Below is my code
testReport: async function (driver, dataFile) {
var data = await csv({ noheader: true, output: "csv" }).fromFile("./admin/data/" + dataFile);
var trs = await driver.findElements(By.css('.qa-report', 'tbody', 'tr'));
//trs.shift(); // remove first tr - it's the header row
var errors = [];
for (var i in data) {
var row = data[i];
var tds = await trs[i].findElements(By.tagName('td'));
for (var j in row) {
var csvData = data[i][j];
var siteData = await tds[j].getText();
if (siteData != csvData) {
errors.push("[" + i + "," + j + "] - expected(" + csvData + ") got(" + siteData + ")");
}
}
}
if (errors.length > 0) {
errorMessage = "Cells failed to validate:";
for (var i in errors) {
errorMessage += "\n" + errors[i];
}
throw new Error(errorMessage);
}
},
Your iterators looks a bit messed up (as already commented)
try for (var j in tds) { instead of for (var j in row) {
I guess you have more result rows than columns per row. If you still have problems, post the class definitions for findElements or Bywhich we don't know.
Premise:
I'm playing around with javascript and have been trying to display a populated JSON file with an array of people on the browser. I've managed to display it through ajax, but now I'm trying to perform the same task with jQuery.
Problem:
The problem is that it keeps saying customerdata[i] is undefined and can't seem to figure out why.
$(function() {
console.log('Ready');
let tbody = $("#customertable tbody");
var customerdata = [];
$.getJSON("MOCK_DATA.json", function(data) {
customerdata.push(data);
});
for (var i = 0; i < 200; i++) {
//Cell for name
let nameTD = $('<td>').text(customerdata[i].first_name + ", " + customerdata[i].last_name);
//Cell for birthdate
let mDate = moment(customerdata[i].birthdate);
let formattedmDate = mDate.format('YYYY-MM-DD');
let birthdateTD = $('<td>').text(formattedmDate);
//Cell for Address
let addressTD = $('<td>').html("City: " + customerdata[i].city + '<br>' + "Email: " + customerdata[i].email + '<br>' + '<a href=' + customerdata[i].website + '>Website</a>');
//Cell for Credits
let creditTD = $('<td>').text(customerdata[i].credits);
let row = $('<tr>').append(nameTD).append(birthdateTD).append(addressTD).append(creditTD);
tbody.append(row);
}
})
SAMPLE CONTENT OF MOCK_DATA.json
[
{"id":1,"first_name":"Tracey","last_name":"Jansson","email":"tjansson0#discuz.net","gender":"Female","ip_address":"167.88.183.95","birthdate":"1999-08-25T17:24:23Z","website":"http://hello.com","city":"Medellín","credits":7471},
{"id":2,"first_name":"Elsa","last_name":"Tubbs","email":"etubbs1#uol.com.br","gender":"Female","ip_address":"61.26.221.132","birthdate":"1999-06-28T17:22:47Z","website":"http://hi.com","city":"At Taḩālif","credits":6514}
]
Firstly, you're pushing an array into an array, meaning you're a level deeper than you want to be when iterating over the data.
Secondly, $.getJSON is an asynchronous task. It's not complete, meaning customerdata isn't populated by the time your jQuery is trying to append the data.
You should wait for getJSON to resolve before you append, by chaining a then to your AJAX call.
$.getJSON("MOCK_DATA.json")
.then(function(customerdata){
for(var i = 0; i < 200; i++){
//Cell for name
let nameTD = $('<td>').text(customerdata[i].first_name + ", " + customerdata[i].last_name);
//Cell for birthdate
let mDate = moment(customerdata[i].birthdate);
let formattedmDate = mDate.format('YYYY-MM-DD');
let birthdateTD = $('<td>').text(formattedmDate);
//Cell for Address
let addressTD = $('<td>').html("City: " +
customerdata[i].city + '<br>' + "Email: " +
customerdata[i].email + '<br>' + '<a
href='+customerdata[i].website+'>Website</a>');
//Cell for Credits
let creditTD = $('<td>').text(customerdata[i].credits);
let row = $('<tr>').append(nameTD).append(birthdateTD).append(addressTD).append(creditTD);
tbody.append(row);
}
})
You also won't need to define customerdata as an empty array at all with this approach.
The problem is that data is already an array.
so you should use:
customerdata = data;
otherwhise you are creating an array in the pos 0 with all the data