Get Div Children in Coded Ui - html

I have a parent Div and child Div like below.
--ParentDiv
--ChildDiv!
Parent and Child divs
I know the ParentDiv Id (which is static). I want to know the ChildDiv Id which keeps changing. How to do this?
I tried below matching the Class. But it says.. "The playback failed to find the control with the given search properties."
HtmlControl childDiv = parentDiv.GetChildren()[0].Find<HtmlControl>(new { Class = "cmd-datatable" });
string id = parentLvl2.GetProperty("Id").ToString();
Thanks in Advance!

The following should return the id of the first child.
HtmlDiv parent = new HtmlDiv(browser);
parent.SearchProperties["id"] = "thisDivsID";
string childID = parent.GetChildren()[0].GetProperty("ID").ToString();
You could also wrap the whole thing in a foreach loop:
List<string> ids = new List<string>();
foreach(UITestControl child in parent.GetChildren())
{
ids.Add(child.GetProperty("ID").ToString();
}

Related

How to add td after a td

I have a td and I want to add a new one, but my new td is shown as text on my page, what am I missing
my code :
var firstTd = parent.document.getElementById("currentTd");
firstTd.after('<td><span>teste</span></td>');
See the documentation:
The Element.after() method inserts a set of Node or string objects in the children list of the Element's parent, just after the Element. String objects are inserted as equivalent Text nodes.
So pass an element instead.
const firstTd = parent.document.getElementById("currentTd");
const secondTd = document.createElement('td');
const span = document.createElement('span');
span.textContent = "teste";
secondTd.appendChild(span);
firstTd.after(secondTd);
or consider insertAdjacentHTML

Getting width of div class row

I need to get the width of this div
<div class='row WidthAdjust'></div>
But it is proving way more difficult than I anticipated, below is some of the things I have already tried
// var row = document.getElementsByClassName("WidthAdjust").width()
var row = document.getElementsByClassName("WidthAdjust")
var rowWidth = parseFloat($(row).width())
You can use var data = row.getBoundingClientRect() to get DOMRect object. This object will have the size of the element and its position relative to view port.
Use data.width to get the width specifically.

Get a div's Width & Height after adding childs to it

After creating a Div 'MyParent' , and many childs with different widths&heights are added to this 'MyParent' . By the end, i want to know the final width & height of 'MyParent' in pixels. I've used the familiar functions to get a width & height , i got 0 in all attempts.
Here's a simple code :
var myPrt = document.createElement('div');
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css({position:absolute;left:-100px;top:100px;width:100px;height:50px;background:red});
$(C2).css({position:absolute;left:100px;top:-100px;width:75px;height:50px;background:yellow});
$(C3).css({position:absolute;left:150px;top:200px;width:90px;height:50px;background:black});
$(myPrt).height(); // returns 0
$(myPrt).css('height') // returns 0
$(myPrt).innerHeight(); // returns 0
$(myPrt).outerHeight(); // returns 0
myPrt.clientHeight; // returns 0
In simple way to get that ?
Because actually I've found a solution to this problem , but it acts in the Childs, create a loop that goes throw all the Parents Childs , then get the max left and min left of these childs , then it returns the distance between the min & max , and the same tip for the Height by getting the max/min top, however ,this tip needs childs to have an absolute position to get there left/top am looking for an existing jquery or javascript function that does that without absolute position for childs .
Thanks
Take a look at this JSFiddle, you're just being clumsy I think. You never added the myPrt div to the document for one.
The other issue is that you're not passing the css as a properly formatted javascript dictionary with string variables.
http://jsfiddle.net/FcSEG/1/
var myPrt = document.createElement('div');
$('body').append(myPrt);
var C1 = document.createElement('div');
var C2 = document.createElement('div');
var C3 = document.createElement('div');
myPrt.appendChild(C1);
myPrt.appendChild(C2);
myPrt.appendChild(C3);
$(C1).css('width','500');
$(C1).css('height','500')
$(C1).css('background','red');
alert($(myPrt).height());

Why does only the first div respond to function?

I'm creating an online quiz which will consist of three different answering alternatives in three divs called #useralt. All the divs will have the same id but different content. The div with the content that is the same as the #answer-div will trigger a "Correct!" div, while the others will trigger a "Sorry"-div.
I can only get the first #useralt-div to work, the following to get numb... Can anyone help me making all three of them work?
This is the site: http://www.juliawallin.se/moviecharades/play.html
$(document).ready(function(){
$("#useralt").click(function(){
var correctAnswer = $('#answer').text().toLowerCase();
var givenAnswer = $('#useralt').text().toLowerCase();
var match = correctAnswer.match(new RegExp("^#moviecharades (.+)$"));
correctAnswer = match[1];
if (givenAnswer == correctAnswer)
{
$("#correct").show("fast").delay("1000").hide("500"); //Slide Down Effect
$('#output').html(function(i, val) { return val*1+1 });
var el = document.createElement('div');
el.innerHTML = $("#output")[0].innerHTML;
document.getElementById('highscore').appendChild(el);
var interval = 1000 * 60 * 1;
APP.refresh(1, interval);
}
else
{
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
ID must be unique, you need to use class. Change your id "useralt" to class then use:
$(".useralt").click(function(){
var correctAnswer = $('#answer').text().toLowerCase();
var givenAnswer = $(this).text().toLowerCase();
....
...
IDs must be unique. So that's not going to work. Try something like:
<div class="useralt" id="useralt1">
<div class="useralt" id="useralt2">
<div class="useralt" id="useralt3">
From w3 schools, http://www.w3schools.com/tags/att_global_id.asp
Specifies a unique id for the element. Naming rules: Must contain at least one character Must not contain any space characters In HTML, all
values are case-insensitive

libxml2 - remove child, but not grandchildren

I'm using libxml2 to parse HTML. I want to remove certain formatting tags like <center>, while keeping their content (for example, a link).
This means I'll have to remove certain child nodes from my xmlNodeSet, but keep that node's children.
Right now, I got this code:
xmlNodePtr parentNode = nodes->nodeTab[i];
if (parentNode != NULL) {
xmlNodePtr child = parentNode->children;
xmlNodePtr parentNextSibling = parentNode->next;
xmlNodePtr grandParent = NULL;
while (child) {
xmlUnlinkNode(child);
if (parentNextSibling != NULL) {
xmlAddPrevSibling(parentNextSibling, child);
}
else {
if (grandParent == NULL)
grandParent = parentNode->parent;
xmlAddChild(grandParent, child);
}
child = child->next;
}
xmlUnlinkNode(parentNode);
xmlFree(parentNode);
}
The code does add the child to the document, but it also deletes the node I was adding it as a sibling to. What am I doing wrong?
You're not saving off the child->next pointer before you cut it out of the tree. As soon as you unlink a node, it isn't part of the tree, so child->next becomes NULL. Then, after you reinsert it into the tree (before parentNode->next), the child->next pointer now points to what was previously parentNode->next, so the next time through the loop, you delete parentNode->next. Things can only go downhill from there. :-)