Develop Reference

how to get count of child elements using selenium web-driver for nodejs

I have searched at numerous places but I am not getting an answer
here is my html :
<form id="search_form_homepage" >
...
<div class="search__autocomplete" style="display: block;">
<div class="acp-wrap js-acp-wrap">
<div class="acp" data-index="0"><span class="t-normal">elephant</span>cheap auto</div>
<div class="acp" data-index="1"><span class="t-normal">elephant</span>asia</div>
...
...
<div class="acp" data-index="2"><span class="t-normal">elephant</span>africa</div>
</div>
...
</div>
</form>
I simply need to get the count of the <div> present within the div with class acp-wrap js-acp-wrap
I can reach this point but am stuck beyond :
let xyz = driver.findElements(By.className(".acp-wrap js-acp-wrap>div"));

You would need to use By.css to get element by this: .acp-wrap js-acp-wrap > div. Also, your selector is not correct. When you select an element by class, you need to put a period before the class name: .acp-wrap.js-acp-wrap > div (remove the space between acp-wrap and js-acp-wrap, too).
Here is how you can get that element now:
let xyz = driver.findElements(By.css(".acp-wrap.js-acp-wrap > div"));
Now to get the count, you can get the length property of xyz. But since driver.findElement returns a promise, you need to use async-await. You can create a function:
async function getCount() {
let xyz = await driver.findElements(By.css(".acp-wrap.js-acp-wrap > div"));
const count = xyz.length;
return count;
}
EDIT
When you call the function:
getCount().then(function(count) {
// your stuff there
});

How can I add the same XML tags multiple times, with different content?

I have some problems with my code. I want to create an XML Document with JQuery / JavaScript. I am now at the point, where I want to create a few Tags and populate them each with the same tags but different content inside the tags.
Here is the code for better understand
function setItems(xmlDoc, channelTag){
const itemList = [];
const itemTitle = xmlDoc.createElement("title");
const itemLink = xmlDoc.createElement("link");
const itemGuid = xmlDoc.createElement("guid");
const itemMediaContent = xmlDoc.createElement("media:content");
const itemMediaDescription = xmlDoc.createElement("media:description");
itemList.push(itemTitle, itemLink, itemGuid, itemMediaContent, itemMediaDescription);
for (var i = 0; i < jsonObj.length; i++){
var item = xmlDoc.createElement("item");
channelTag.appendChild(item);
//Populate the <item> with the tags from "itemList" and content from "jsonObj"
$.each(itemList, function(index) {
$(channelTag).children('item')[i].appendChild(itemList[index]).textContent = jsonObj[0].title;
})
}
}
The Output of the code looks like this:
<item></item>
<item></item>
<item>
<title>Something</title>
<guid>Something</guid>
<link>Something</link>
<media:content>Something</media:description>
<media:description>Something</media:description>
</item>
It always populates the last item-Tag but not the ones above. What I want is that every item-Tag has the same child-Tags (e.g. title, link, guid and so on). Is there something i am missing some unique tags or something like that?
Edited:
Here is some minimal HTML and XML. The values for the function "xmlDoc" and "channelTag" just contains some Document Elements, where my items should be appended, like so:
<rss>
<channel>
<title>SomeTitle</title>
<atom:link href="Link" rel="self" type="application/rss+xml"/>
<link>SomeLink</link>
<description>SomeDesc</description>
<item></item>
<item></item>
<item></item>
</channel>
</rss>
<div class="col-5 col-sm-5 col-lg-3 order-2 count">
<a class="guid1"><img class="card-img image1"></a>
</div>
<div class="col-7 col-sm-7 col-lg-5 order-2">
<div class="card-body">
<a class="guid1">
<h5 class="card-title title1 overflow-title"></h5>
</a>
<p class="card-text body1 text-body overflow-body"></p>
<div class="card-body subtitle">
</div>
</div>
</div>

There are several issues with your code but the area we mostly want to focus on is this:
for (var i = 0; i < jsonObj.length; i++){
var item = xmlDoc.createElement("item");
channelTag.appendChild(item); // you're adding a node here
$.each(itemList, function(index) {
$(channelTag).children('item')[i].appendChild(... // and here
})
}
Instead of appending nodes multiple times per iteration, you should create and populate your node before add it it to channelTag.
Here's a way your could do it:
// use a "$" sign as a variable name prefix, so you know it's a Document Element and not a regular javascript variable
var $item = xmlDoc.createElement("item");
// you don't need jQuery for this iteration
itemList.forEach(function (item, index) {
$item.appendChild(itemList[index]).textContent = jsonObj[0].title;
});
// if "channelTag" is a Document Element, rename it "$channelTag"
$channelTag.appendChild(item);
Couple things about the code above:
you don't need jQuery, use forEach instead
there is no way telling what type is channelTag. If it is a selector (of type string), use $(selector), but you are using the appendChild() method before, suggesting it's actually a Document Element. In that case you don't need to wrap it with $()
I don't have the context needed to test this code, so no guarantee it'll work out of the box. But try and re-read your code and go through it top-to-bottom. For each variable, describe its type and value. I found that to be helpful when I'm lost in code.

How to search for <p> by id for condition in Javascript, and then output text in another <p>?

Sorry, I tried to search for an answer, but I couldn't find exactly what I was looking for.
I am trying to make and webpage using Javascript, and I need some sort of decoder. For example, I have one abbreviation which is "NN", which stands for "Noun Nominative". Another abbreviation is "NA" which stands for "Noun Accusative". Another is "AN" which is "Adjective Nominative". There are many (too many) mixed-and-matched instances of these abbreviations, so I am trying to make a easy way for my Javascript/HTML code to search the whole page for every instance of "N" when it is the part of speech, and then output "Noun" in a different <p> when the abbreviation containing "N" is clicked. I hope this makes sense. So I came up with this:
document.querySelector("div.abbreviation").onclick = parseWord;
function parseWord(event) {
if (event.target.id === 'noun') {
document.getElementById("part-of-speech-decoded").innerHTML = "Noun";
}
}
<div class="abbreviation">
<p id="noun">N</p>
<p id="nominative">N</p>
</div>
<div id="decoder">
<p id="part-of-speech-decoded"></p>
<p id="case-decoded"></p>
</div>
Obviously, it is not correct by a long shot and the formatting is terrible (I am very new to coding), but I hope you can see what I am trying to do. So I want my function to search if p id = "noun", then when the div containing p id="noun" is clicked, I want the word "Noun" to show up in where p id="part-of-speech-decoded" is.
Any help would be appreciated!

You can use event.target.id and capitalise the first letter:
document.querySelector("div.abbreviation").onclick = parseWord;
function parseWord(event) {
var word = event.target.id.charAt(0).toUpperCase() + event.target.id.slice(1);
document.getElementById("part-of-speech-decoded").innerHTML = word;
}
<div class="abbreviation">
<p id="noun">N</p>
<p id="nominative">N</p>
</div>
<p id="part-of-speech-decoded"></p>

To achieve expected result, use below option of creation options Object with 'id' and its value to be displayed
document.querySelector("div.abbreviation").onclick = parseWord;
let abbrArr = {
'noun' : 'Noun',
'nominative' : 'Nominative',
'nn':'Noun Nominative',
'na':'Noun Accusative',
}
function parseWord(event) {
document.getElementById("part-of-speech-decoded").innerHTML = abbrArr[event.target.id];
}
<html>
<body>
<div class="abbreviation" onclick="parseWord(this)">
<p id="noun">N</p>
<p id="nominative">N</p>
<p id="nn">NN</p>
<p id="na">NA</p>
</div>
<div id="decoder">
<p id="part-of-speech-decoded"></p>
<p id="case-decoded"></p>
</div>
</body>
</html>
codepen - https://codepen.io/nagasai/pen/jJvxpY?editors=1010

AngularJS - How to sum filtered grandchild items in nested ng-repeat

I created a kanban board app with Angular, now I'd like to put the sum of filtered Post-Its points, and a count, like so:
<input type="text" ng-model="searchText">
<div ng-init="col.TotalPoints = 0" ng-repeat="col in columns">
<h3>{{col.Title}} - ({{ col.TotalPoints?? }} Pts.)</h3>
<div ng-init="subCol.Points = 0" ng-repeat="subCol in col.SubColumns">
<h3>{{subCol.Title}} - {{ subCol.Points }} Pts.</h3>
<div ng-show="false" ng-bind="subCol.Points= (filteredPostIts| sumPointsFilter:'Points')" ></div>
<div ng-repeat="postIt in filteredPostIts = (subCol.PostIts | filter:searchText)">
<p>#{{postIt.Id}}</p>
<p>{{postIt.Title}}</p>
<p>{{postIt.UserName}}</p>
<p>{{postIt.Points}} Points</p>
</div>
</div>
</div>
I assign my filtered Post-Its to filteredPostIts alias, then used to ng-bind to use the sumPointsFilter to iterate over all filtered post-its and sum their points, which is working fine. The Sub-Column Points is recalculated as soon as we start filtering some post-its by typing some text in the search input.
Now I'd like to calculate the total points for the whole column, which is the sum of its subcolumns (considering the filtered post-its).
This is a JSFiddle. The first column is "Não Iniciado" (Not started), which has one subcolumn called "Backlog". The second column is "Em andamento", which has two subcolumns ("Executando" and "Aguardando").
Try typing marcello for example, and it will filter Marcello's post-its, and recalculate the points for the subcolumns.
How could I achieve this?

You do have quite a bit going on that jsfiddle but I think I see what you could do...
Reuse that same summation filter like this:
<h3>{{col.Titulo}} - ({{ col.Divisorias | sumPointsFilter: 'Points'}} Pts.)</h3>
https://jsfiddle.net/r0m4n/9zbrohhy/54/

How to sort nested divs depending upon content

I've the following HTML schema
<div id="txm_left_column">
<div class="id">
<h2>Some Name1</h2>
<div>// another list</div>
</div>
<div class="id">
<h2>Some Name2</h2>
<div>// another list</div>
</div>
</div>
The user is able to add items to that list and all Divs should be in alphabetical order by the name in the h2.
I've two options
1) i need to be able to insert a new item in between the 2 divs where the alphabetical order is correct
2) re organise the list entirely.
My approach was option 2, to sort the Divs in alphabetical order by the name in the h2
I came up with the following code to try to order it but this code creates a new List of ordered H2s without the divs. then I tried to do option 1) by using the same function but trying to insert into something like this (upA < upB) ? -1 : (NEW_ITEM_NAME> upB) ? 1 : 0 but that will cause a problem as that doesn't break the sort.
I was wondering 2 things, one is how could i break the sort as return 0 would not break it. or any help on how could i organise my list.
Thanks
jQuery("#txm_left_column > div").children("h2").sort(function(a, b) {
var upA = jQuery(a).text().toUpperCase();
var upB = jQuery(b).text().toUpperCase();
return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
}).appendTo(selector);

but this code creates a new List of ordered H2s without the divs.
That's because you are sorting h2 elements and not the div elements:
jQuery("#txm_left_column > div").sort(function(a, b) {
var upA = jQuery('> h2', a).text().toUpperCase();
var upB = jQuery('> h2', b).text().toUpperCase();
// ...
}).appendTo(selector);

wanting to comment but have not met the "50 reputation" quota,
the Vohuman answer is problematic when introducing duplicates:
<div id="txm_left_column">
<div class="id">
<h2>80</h2>
<div>// another list for name 80</div>
</div>
<div class="id">
<h2>80</h2>
<div>// another list for name 80</div>
</div>
<div class="id">
<h2>81</h2>
<div>// another list for name 81</div>
</div>
<div class="id">
<h2>100</h2>
<div>// another list for name 100</div>
</div>
<div class="id">
<h2>100</h2>
<div>// another list for name 100</div>
</div>
</div>
-
jQuery("#txm_left_column > div").sort(function(a, b) {
var upA = jQuery('h2', a).text().toUpperCase();
var upB = jQuery('h2', b).text().toUpperCase();
return upA < upB;
}).appendTo('#txm_left_column');
result:
81
// another list for name 81
80
// another list for name 80
80
// another list for name 80
100
// another list for name 100
100
// another list for name 100
see http://jsfiddle.net/std57rm4/
this only happens when a duplicate name or number you are sorting on is introduced
at this moment I don't have a solution, but it should be something along the lines of counting how many times a duplicate has been encountered when sorting and then adding or subtracting that number from the next sort item or items depending on the ascending or descending direction you are sorting in