Forum Discussion

coffee's avatar
coffee
Contributor
9 years ago

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. 

 

 

 

  • baxatob's avatar
    baxatob
    9 years ago

    Try to iterate using:

     

    ...querySelector(CSS_selector).children.item(index). ... .textContent
  • baxatob's avatar
    baxatob
    Community Hero
    9 years ago

    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);
    • coffee's avatar
      coffee
      Contributor
      9 years ago

      Thanks for the suggestion :smileyhappy:

       

      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.

       

      • baxatob's avatar
        baxatob
        Community Hero
        9 years ago

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

  • coffee's avatar
    coffee
    Contributor
    9 years ago

    I think I found the answer here 

     

    https://support.smartbear.com/testcomplete/docs/scripting/specifics/javascript.html#Accessing_Collection_Items

     

     

    Accessing Collection Items

    COM objects can have properties that return a collection object. Some scripting languages like VBScript allow accessing collection items directly, for example, obj.Cells(i, j) rather than obj.Cells.Item(i, j). JavaScript does not support this. To access items of a collection object, you should specify the appropriate property (Item, Items) explicitly:

    JavaScript
     

    Log.Message(Excel.Cells.Item(i, j));

     

    This discussion could be useful probably

    http://stackoverflow.com/questions/15763358/difference-between-htmlcollection-nodelists-and-arrays-of-objects