HTML:-
<div class="row">
<div id="tl-detail-container-left" class="col-md-6">
<div class="section-title">ETL Details</div>
<ul class="info-display-cell-ltl entity-item">
<li>
<span class="vline"></span>
<div class="entity-value" title="darsht">Name: darsht</div>
</li>
What I have done:
WebElement path=driver.findElement(By.xpath("//form/div[2]/div[1]/div[6]/div[1]/ul/li[1]");
String str= path.findElement(By.cssSelector("div[class='entity-value']")). get Text();
System.out.println(str);
Please help me with the code to get dynamic Text
(ex: Omarjiti) from html.
In Java, use the jsoup library.
your xpath should be optimized.
Other thing you are perfoming findElement two times. Once you done with findElement then just use it's property.
WebElement webelement=driver.findElement(By.xpath("//*[#class='vline']/div");
String str= webelement.getText();
Refer this for detailed on xpath.
Related
<div class="css-ki-menu">
<div class="css-11ur">
<div class="css-d0i-option" id="react-select-3-option-0" tabindex="-1">L3</div>
<div class="css-f5s-option" id="react-select-3-option-1" tabindex="-1">L4</div>
</div>
</div>
I have the text 'L3' is there any way to find the relative xpath using the text?
Please help me out am new to it
Thank you
To locate element with L3 text as in the example provided you can simply use //div[contains(text(),'L3')] or //div[text()='L3']
If you need this xpath to be relative to some other element - please provide more details.
How can I get a Node's only direct children with a specific class name?
Example
<div class="list-group">
<div class="list-group-item">
<div class="list-group"> <!--I have this-->
<div class="list-group-item"> <!--And I want to reach this-->
<div class="list-group">
<div class="list-group-item"></div> <!--Not this-->
<div class="list-group-item"></div>
</div>
</div>
<div class="list-group-item"></div> <!--And get this-->
</div>
</div>
</div>
I have a list-group that contains items and groups and I want to keep that hierarchy and get a list-group's only direct list-group-items.
How can I do so?
You haven't mentioned if you use any JS frameworks, but with JQuery it is fairly simple... just use children()
In example $("#haveThis").children()
You can also filter children like: $("#haveThis").children("list-group-item")
docs: https://api.jquery.com/children/
For vanilla JS I'd do this:
[].slice.call(document.getElementById("havethis").children).filter(el=>el.className==='list-group-item')
In vanilla JS (if you're not using jQuery) element.children (where element is the parent you wish to query) will return a list of all direct child nodes, you would then itterate over the list list, looking for node.className = "list-group-item";
I've not found a way to do this with standard CSS selectors, so a coded solution seems to be the only option.
Get all elements with the specified class name:
var x = document.getElementsByClassName("list-group-item");
Link https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right
ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>
Try using .clone() , .remove() , .text()
var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();
console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>
I have an empty div on my page which I want to insert content into using jQuery.
For example:
<div class="container">
</div>
After inserting the first lot of content, I'd like my markup to look like this:
<div class="container">
<div class="inserted first">blah</div>
</div>
Round 2 of inserting content I'd like it to be:
<div class="container">
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
Round 3 of inserting content I'd like it to be:
<div class="container">
<div class="inserted third">blah</div>
<div class="inserted second">blah</div>
<div class="inserted first">blah</div>
</div>
How can I achieve this using jQuery?
So far I have tried $(data).appendTo($(".container").before(".inserted")); but that doesn't work.
Update: Thanks for all of your answers. Pretty much all answers so far work. I had to pick one so went for the oldest first. Thanks again to everyone for your help.
You want to insert content before the current child. What you need is the prepend() function:
$(".container").prepend(data);
// assuming data is <div class="inserted second">blah</div>
Use .prependTo() instead of .appendTo().
Use prepend instead of append. Assuming data contains the HTML of
<div class="inserted x">blah</div>
You can use prepend():
$(".container").prepend(data);
Or prependTo():
$(data).prependTo(".container");
Try this:
$('.container').prepend(DOM object or html string);
For example:
$('.container').prepend('<div class="inserted third">blah</div>');
Lets say i have a string like this:
<div id="div1"></div>
<div class="aClass" id="div2">
<div id="div3" class="anotherClass"></div>
<div id="div4" />
</div>
<div id="div5"></div>
I want to remove div2 from the string and everything inside that div
So i got a string like this
<div id="div1"></div>
<div id="div5"></div>
I thinking something like using regex to find the first div with the id of "div2" or whatever the id of the div is and count brackets untill it gets to "< /div>". The problem is that the "div3" also got a "< /div>" at the end.
The content of the div i want to remove may contain more or less div's then this too.
Any ideas on how to code this?
Update:
var htmlText = editor3.getValue();
var jHtmlObject = jQuery(htmlText);
jHtmlObject.find("#div2").remove();
var newHtml = jHtmlObject.html();
console.log(newHtml);
Why doesn't this return anything in the console?
Update2!:
I have made a jsFiddle to make my problem visual..
http://jsfiddle.net/WGXHS/
Just put the string into jQuery and use find and then remove.
var htmlString = '<div id="div1"></div>\
<div class="aClass" id="div2">\
<div id="div3" class="anotherClass"></div>\
<div id="div4" />\
</div>\
<div id="div5"></div>';
var jHtmlObject = jQuery(htmlString);
var editor = jQuery("<p>").append(jHtmlObject);
editor.find("#div2").remove();
var newHtml = editor.html();
If you have access to jQuery and your HTML is part of the DOM you can use $.remove()
EG. $('#div2').remove();
If it's not part of the DOM, and you have it in a string, you can do something like:
$('#div2', $(myHTML)).remove();
jQuery .remove() will do
$("#div2").remove();
The regex option would work if you control generating the string so you can ensure things like order of the attributes and indentation. If not your best bet is to use an HTML parser. If you are working inside of a browser jQuery is a good option. If you are working server-side you'll need to find a parser for the language you chose.