What does it mean if you cannot expand a DOM node in the Chrome Elements view tool?
I have manually appended a very long string of html containing nested elements, but when I view the rendered page and examine the elements, only the first level element exists, with a ... for the text field. When I try to expand the selection to see the inner contents, the closing tag for the only visible element goes away, and none of the contents appear visible.
Any ideas? Malformed HTML? I really don't think it's incorrectly formatted...
I am using jQuery Mobile for this.
EDIT: Here is how I got the page to render what I wanted.
$('#myID').append(
'<li id="'+id+'" name="chat2" dsid="chat2_'+j+'" class="'+currentPage+'_chat2 ui-li-static ui-body-inherit ui-btn-up-a ui-first-child" data-icon="false">
<div class="ui-li-static-container">
<div class="'+currentPage+'_itemGrid2_wrapper" data-wrapper-for="itemGrid2" dsrefid="chat2" _idx="_'+j+'">
<table id="'+currentPage+'_itemGrid2" class="'+currentPage+'_itemGrid2" dsid="itemGrid2" name="itemGrid2" cellpadding="0" cellspacing="0">
<colgroup>
<col style="width:auto;">
<col style="width:172px;">
</colgroup>
<tbody>
<tr class="'+currentPage+'_itemGrid2_row_0">
<td id="'+currentPage+'_picCell2_'+j+'" name="picCell2" class="'+currentPage+'_picCell2" colspan="1" rowspan="1">
<div class="cell-wrapper"><img class="'+currentPage+'_itemImage2"src="'+image+'" id="'+currentPage+'_itemImage2" dsid="itemImage2" name="itemImage2">
</div>
</td>
<td id="'+currentPage+'_Cell2_'+j+'" name="Cell2" class="'+currentPage+'_Cell2" colspan="1" rowspan="1">
<div class="cell-wrapper">
<div name="sellerName" id="'+currentPage+'_sellerName" dsid="sellerName" data-role="appery_label" class="messagePerson '+currentPage+'_sellerName">'+sellerName+'</div>
<div name="lastMessage2" id="'+currentPage+'_lastMessage2" dsid="lastMessage2" data-role="appery_label" class="'+currentPage+'_lastMessage2">'+message+'</div>
<div name="productID2" id="'+currentPage+'_productID2" dsid="productID2" data-role="appery_label" class="'+currentPage+'_productID2">'+productID+'</div>
<div name="messageID2" id="'+currentPage+'_messageID2" dsid="messageID2" data-role="appery_label" class="'+currentPage+'_messageID2">'+messageID+'</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>');
Figured I'de put the whole in there in case of syntax..
EDIT2:
The only reason I am doing this clunky solution is because I can't append a collapsed DOM js variable.
for(var i = 0; i < this.cache[0].length; i++){
var div = Appery("chat1").clone();
div.attr("id",currentPage+"_chat1_"+i);
div.find(Appery("messageID")).text(this.cache[0][i]._id);
div.find(Appery("buyerName")).text(this.cache[0][i].user_name);
div.find(Appery("productID")).text(this.cache[0][i].productID);
Appery("allChats1").append(div);
}
Related
<tr v-for="(value, key) in this.object" :key="key">
<div v-if="value.item1 != null">
<td width="400" class="alnleft">{{value.item1}}</td>
<td width="50" class="alnright">{{value.item2}}</td>
</div>
</tr>
With the v-if I am omitting values to print in tr. But above code printing black tr and unnecessary space is getting created . Please suggest how to get rid of this
You dont ever want to place a div as the child of a tr. You can prevent the div from being inserted by replacing it with template.
<tr v-for="(value, key) in this.object" :key="key">
<template v-if="value.item1 != null">
<td width="400" class="alnleft">{{value.item1}}</td>
<td width="50" class="alnright">{{value.item2}}</td>
</template>
</tr>
Does that fix your issue?
Learning to use xpath queries. I am having an issue were I am unable to extract a value that changes whenever the page is refreshed.
For example, I am trying to extract the value '62804' from the following html code: "canvas.strokeText('Answer: 62804',90,112);" . Any ideas how this can be done. Thanks
<html>
<div id="content" class="large-12 columns">
<div class="example">
<h3>Challenging DOM</h3>
<p>The hardest part in automated web testing is finding the best locators (e.g., ones that well named, unique, and unlikely to change). It's more often than not that the application you're testing was not built with this concept in mind. This example demonstrates that with unique IDs, a table with no helpful locators, and a canvas element.</p>
<hr>
<div class="row">
<div class="large-12 columns large-centered">
<div class="large-2 columns">
<a id="debcda40-b692-0137-457b-2213fbd48497" href="" class="button">qux</a><br>
<a id="debce410-b692-0137-457c-2213fbd48497" href="" class="button alert">baz</a><br>
<a id="debd03d0-b692-0137-457d-2213fbd48497" href="" class="button success">foo</a><br>
</div>
<div class="large-10 columns">
<table>
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
<th>Sit</th>
<th>Amet</th>
<th>Diceret</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Iuvaret0</td>
<td>Apeirian0</td>
<td>Adipisci0</td>
<td>Definiebas0</td>
<td>Consequuntur0</td>
<td>Phaedrum0</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret1</td>
<td>Apeirian1</td>
<td>Adipisci1</td>
<td>Definiebas1</td>
<td>Consequuntur1</td>
<td>Phaedrum1</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret2</td>
<td>Apeirian2</td>
<td>Adipisci2</td>
<td>Definiebas2</td>
<td>Consequuntur2</td>
<td>Phaedrum2</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret3</td>
<td>Apeirian3</td>
<td>Adipisci3</td>
<td>Definiebas3</td>
<td>Consequuntur3</td>
<td>Phaedrum3</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret4</td>
<td>Apeirian4</td>
<td>Adipisci4</td>
<td>Definiebas4</td>
<td>Consequuntur4</td>
<td>Phaedrum4</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret5</td>
<td>Apeirian5</td>
<td>Adipisci5</td>
<td>Definiebas5</td>
<td>Consequuntur5</td>
<td>Phaedrum5</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret6</td>
<td>Apeirian6</td>
<td>Adipisci6</td>
<td>Definiebas6</td>
<td>Consequuntur6</td>
<td>Phaedrum6</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret7</td>
<td>Apeirian7</td>
<td>Adipisci7</td>
<td>Definiebas7</td>
<td>Consequuntur7</td>
<td>Phaedrum7</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret8</td>
<td>Apeirian8</td>
<td>Adipisci8</td>
<td>Definiebas8</td>
<td>Consequuntur8</td>
<td>Phaedrum8</td>
<td>
edit
delete
</td>
</tr>
<tr>
<td>Iuvaret9</td>
<td>Apeirian9</td>
<td>Adipisci9</td>
<td>Definiebas9</td>
<td>Consequuntur9</td>
<td>Phaedrum9</td>
<td>
edit
delete
</td>
</tr>
</tbody></table>
<div class="row">
<div class="large-10 columns">
<canvas id="canvas" width="599" height="200" style="border:1px dotted;"></canvas>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<script>
var canvas_el = document.getElementById('canvas');
var canvas = canvas_el.getContext('2d');
canvas.font = '60px Arial';
canvas.strokeText('Answer: 62804',90,112);
</script>
</div>
</html>
In order to use the XPath query the input document must be a valid XML.
In your case it isn't, because there are some tags that are not properly closed (you can verify it using an XMLLint tool).
E.g.
<hr> and <br> should be replaced with <hr/> and <br/>.
Once the XML is corrected, you can use an XPath query.
The fist step is select the script element:
//script
The output is:
Element='<script>
var canvas_el = document.getElementById('canvas');
var canvas = canvas_el.getContext('2d');
canvas.font = '60px Arial';
canvas.strokeText('Answer: 62804',90,112);
</script>'
Then you have to convert the Element Node in a String and then perform some parsing:
substring-before(substring-after(//script/text(), 'canvas.strokeText(''Answer: ') , ''',90,112)')
The result is the following:
String='62804'
Note: You can do the same operation in a more elastic way using Javascript, for example.
XPath is very good to query an XML (like the first operation that I mentioned) but quite complicated to do String parsing (like the second operation that I mentioned).
Hope it can help.
I have tried finding a solution to my problem for few days already - somehow I just don't manage to find a working solution.
Unfortunately I cannot give the URL for the webpage that I have as it would require a login and password - which I cannot share.
I have the VBA code already doing me everything, login into the webpage - proving the proper information inside the page and clicking validate button. But the problem is that I should then see if the below text appears:
ENQUADRAMENTO EM VIGOR - if yes, I will continue slightly differently the process and if not then differently.
Now below is the code from the webpage:
<tr>
<td>
<table cellpadding="4" border="0" width="100%">
<tbody><tr>
<td class="fieldTitleBold" style="width=30%">Enquadramento em IVA</td>
<td class="fieldValue" colspan="3">NORMAL TRIMESTRAL</td>
</tr>
<tr>
<td style="width=10%" class="fieldTitleBold">Situação</td>
<td class="fieldValue" colspan="3">ENQUADRAMENTO EM VIGOR</td>
</tr>
</tbody></table>
</td>
</tr>
I have tried many different ways and the latest I tried is with byclassname (this worked for me in a different website for similar purpose) but doesn't work here for some reason:
Set doc = ie.document
Set htmTable = doc.getElementsByClassName("ENQUADRAMENTO EM VIGOR")(0)
If Not htmTable Is Nothing Then
'continue depending if the text was found or not in different ways
ENQUADRAMENTO EM VIGOR is the .innerText value not the class name. The class value is fieldValue and is associated with a td (table cell) element.
This is pretty easy if it only occurs once. Use Instr to see if present in page html
If Instr(ie.document.body.innerHTML,"ENQUADRAMENTO EM VIGOR") > 0 Then
Otherwise, you can gather a nodeList of td elements with that class name and loop testing the .innerText
Dim classes As Object, i As Long
Set classes = ie.document.querySelectorAll("td.fieldValue")
For i = 0 To classes.Length - 1
If classes.item(i).innerText = "ENQUADRAMENTO EM VIGOR" Then
'do something
'Exit For ....
End If
End Sub
$(document).ready(function() {
var lenfV = document.querySelectorAll(".fieldValue");
for(let i=0;i<lenfV.length;i++) {
if(lenfV[i].innerHTML == "ENQUADRAMENTO EM VIGOR") {
console.log("is there");
}
//else {console.log(213423);}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> I think, The below option will help you</p>
<table>
<tr>
<td>
<table cellpadding="4" border="0" width="100%">
<tbody><tr>
<td class="fieldTitleBold" style="width=30%">Enquadramento em IVA</td>
<td class="fieldValue" colspan="3">NORMAL TRIMESTRAL</td>
</tr>
<tr>
<td style="width=10%" class="fieldTitleBold">Situação</td>
<td class="fieldValue" colspan="3">ENQUADRAMENTO EM VIGOR</td>
</tr>
</table>
</td>
</tr>
</table>
I need to repeat an html snippet several times on a page but the problem is that the contained html elements have id defined that should be unique on page. So what is the proper way I could repeat this snippet without removing the id attribute from the elements ?
Could I use iframe as container for this snippet & let the duplicate ids exist on page?
You can use JavaScript to clone the snippet and at the same time change the IDs.
Example if your snippet is:
<div id="snippet">
<table id="list">
<tr id="0">
<td id="firstName0">John</td>
<td id="lastName0">Smith</td>
</tr>
<tr id="1">
<td id="firstName2">John</td>
<td id="lastName2">Doe</td>
</tr>
</table>
</div>
Using
$("#snippet").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_1"); });
Will Produce
<div id="snippet_1">
<table id="list_1">
<tr id="0_1">
<td id="firstName0_1">John</td>
<td id="lastName0_1">Smith</td>
</tr>
<tr id="1_1">
<td id="firstName2_1">John</td>
<td id="lastName2_1">Doe</td>
</tr>
</table>
</div>
Which will solve the duplicate ID problem.
I'm trying to dynamically hide/unhide multiple table rows using Javascript to mimic collapse/expand. here are relevant code snippets:
function selectionFilter(check, filter){
var elem = document.getElementById('myScrollTable').rows;
for(i = 0; i < elem.length; i++){
var type = elem[i].getAttribute('type');
if(type== filter){
if(check == true){
elem[i].style.display='';
}else{
elem[i].style.display='none';
}
}
}
}
and here is the sample HTML:
<input type="checkbox" checked="true" value="t1" onclick="selectionFilter(this.checked, this.value);">some type 1</input >
<input type="checkbox" value="t2" onclick="selectionFilter(this.checked, this.value);">some type 2</input ><br><br>
<table cellspacing="1" cellpadding="2" class="" id="myScrollTable">
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr type="t1">
<td rowspan="50">something1</td><td>something2</td>
</tr>
<tr type="t1">
<td>something2</td>
</tr>
.
.
<tr type="t2" style="display:none;">
<td rowspan="50">something1</td><td>something2</td>
</tr>
<tr type="t2" style="display:none;">
<td>something2</td>
</tr>
.
.
</tbody>
</table>
In Firefox everything is fine. However in IE, after the first time any row is hidden, when it is unhidden it has some extra space appending at the bottom. This does not happen when rowspan is not used. I tried many things but couldn't get rid of the extra space.
I would truly appreciate if anyone could give me some hint.
Did you try using block instead of an empty string?
you should try using
elem[i].style.display = 'block';
and if this fails you should try
elem[i].style.display = 'table-row';
and allways you should check the w3schools documentation, its really usefull
http://www.w3schools.com/css/pr_class_display.asp
tellme if this works for you