cancel
Showing results for 
Search instead for 
Did you mean: 

Finding Child and its property value in the DOM

SOLVED
Contributor

Finding Child and its property value in the DOM

Hi,

 

I have this piece of DOM

 

 

	<tbody>
	
	<tr class="schedule 168045" data-timesheet-id="168045" id="Row00000">
		<td class="hidden col-id-Num" data-col-id="Num"
			...
			...


	<tr class="schedule 168076 odd" data-timesheet-id="168076" id="Row00001">
	
		<td class="active w100 col-id-EndTime" data-col-id="EndTime">
			<div class="form001" data-form-element="FieldEdit">
				<label for="">Finish</label>
				<input type="text" id="Schedule-01-Row1E-EndTime" class="nugget">
				<input type="hidden" name="" id="Schedule-01-Row1E-EndTime" data-display-id="Row1E-Display" value="08:00" data-validate-method="time" class="validate">
				<input type="text" class="ui" id="Row1E-EndTime-Display">

 

I am interested in the "Value="08:00"".

 

Any idea how can I get that "08:00" and save it in a variable ?

 

I tried the first step and TS returns error "TypeError Cannot read property 'length' of undefined".

 

 

 

Page = Sys.Browser('*').Page("www.myweb.com");

  
  Parent_CSS = "#Table > div > table > tbody"; 
  
  Parent = Page.QuerySelectorAll(Parent_CSS);
  var all_Children = Parent.children;
  Log.message(all_Children.length);

 

Basically, I wanted to find its parent by CSSSelector and then grab all its children. 

Find out how many children its has. Go to the last Child and then grab its property (e.g. value = 08:00 or class = "validate")

 

Any suggestion how should I do that?

 

Thanks Heaps. 

 

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
Community Hero

Re: Finding Child and its property value in the DOM

Try to iterate using:

 

...querySelector(CSS_selector).children.item(index). ... .textContent
13 REPLIES 13
Community Hero

Re: Finding Child and its property value in the DOM

Hi,

 

Looks like problem is here:

 

Parent = Page.QuerySelectorAll(Parent_CSS);
var all_Children = Parent.children;

 

querySelectorAll() method returns a list of matched elements. And then you are trying to apply children property to the list, which does not have it. 

 

Try to use querySelector() instead or may be better:

 

var target_element = Page.contentDocument.getElementById("Schedule-01-Row1E-EndTime");
Log.Message(target_element.value);
Contributor

Re: Finding Child and its property value in the DOM

Thanks for the suggestion Smiley Happy

 

I find the solution and tried it directly in Chrome (using native Javascript). It works fine, but unfortunately TC complains that something is not right . 

 

var CSSselector = "#Detail > div > table > tbody";
Page = Sys.Browser('*').Page("http://www.myweb.com");
aqUtils.Delay(5000);
var par = Page.QuerySelectorAll(CSSselector); var child2 = par[0].childNodes[1].childNodes[4]; var finish = child2.querySelector('.validate[value]').getAttribute("value");

Then I found that TC doesn't have method childNodes[i] but Child(i). (https://support.smartbear.com/viewarticle/88401/)

 

Therefore I changed it to 

 

var child2 = par[0].Child(1).Child(4);

But still TC complains saying "TypeError par[0].Child is not a function".

 

How to find the n-th child and then the x-th grandchild in TC (and then possible the y-th grand grandchild) and grab it's attribute?  

Thank You.

 

Community Hero

Re: Finding Child and its property value in the DOM

Why do you want to iterate through the child elements, if your target element has an unique id property?

Contributor

Re: Finding Child and its property value in the DOM

No, it doesn't have unique id.  Need to find the parent and go down to its grandchild. 

Community Hero

Re: Finding Child and its property value in the DOM

Hi @coffee

 

In according with the HTML above your element has id="Schedule-01-Row1E-EndTime"

 

Contributor

Re: Finding Child and its property value in the DOM

Hi @baxatob ,

 

That one is dynamically created , so not static. 

Also I have other cases where there is completely no ID. 

 

I tried that code in Chrome and it works perfectly fine, so Javascript-syntax-wise should be all right. Not sure why TC doesn't like it.

 

Thank You.  

Community Hero

Re: Finding Child and its property value in the DOM

Try to iterate using:

 

...querySelector(CSS_selector).children.item(index). ... .textContent
Contributor

Re: Finding Child and its property value in the DOM

Thank you very much  @baxatob

 

The solution does work. Smiley Happy

 

I am just wondering why TC use different method than native Javascript. 

 

Is there any article/documentation about children.item(i)?  Just want to dig further about this method and how TC explore the DOM.  I assume there are other methods that TC uses differently than the native Javascript?  Thanks. 

Moderator

Re: Finding Child and its property value in the DOM

Hi @coffee,

 

Just out of curiosity, why don't you search for the target INPUT object directly? Doesn't it have some combination of properties that make it unique? For example:

var obj = Page.QuerySelector("input.validate[type='hidden']");
Log.Message(obj.value);

Helen Kosova
SmartBear Technical Writer
________________________
Vote up helpful replies.
Accept this reply if you think it's the best solution to your question.
New Here?
Join us and watch the welcome video:
Top Kudoed Authors