i want append html content into DIV tag - testing

var test ="<html><head><title>JSON Template</title><script type='text/javascript'>widgetbuilder.render({'displayParams':{'wtitle':'Columns','target':'wid1','classlist':{"+result+"},'displimit':'5'},'contentParams':{'channel':'news','category':'columns','wid':'widget1','entity':'Article','limit':'6'}});</script></head><body><div><ul id='wid1'></ul></div></body></html>";
$("#lightbox-panel").append(test);

The tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. Use only the following attributes with your div element, anything else should be reserved for CSS
id
width
height
title
style

Related

Finding tag by xpath by a text that has an inner tag inside

I've recently come across an issue.
I need to find a div tag on a page, that contain specific text. The problem is, that text is divided into two parts by an inner link tag, so that an HTML tree would look like:
**<html>
<...>
<div>
start of div text - part 1
<a/>
end of div text - part 2
</div>
<...>
</html>**
To uniquely identify that div tag I'd need two parts of div text. Naturally, I would come up with something like this XPath:
.//div[contains(text(), 'start of div text') and contains(text(), 'end of div text')]
However, it doesn't work, the second part can not be found.
What would be the best approach to describe this kind of tag uniquely?
try to use below XPath to match required div by two text nodes:
//div[normalize-space(text())="start of div text - part 1" and normalize-space(text()[2])="end of div text - part 2"]
You were almost there. You simply need to replace the text() with . as follows:
//div[contains(., 'start of div text') and contains(., 'end of div text')]
Here is the snapshot of the validation :
This should work:
//div[contains(text(), 'start of div text') and contains(./a/text(), 'end of div text')]
Well if you have HTML DOM tree like this :
<div id="container" class="someclass">
<div>
start of div text - part 1
<a/>
end of div text - part 2
</div>
</div>
for extracting div text, you can write xpath like this :
//div[#id='container']/child::div
P.S : Writing xpath based on text to find the same exact text is not a good way to write Xpath.
If all you want is the div element of those child text elements, then you could isolate a piece of unique content from "part 1" and try the following:
//*[contains(., 'part 1')]/parent::div
This way you wouldn't have to think about the div's attributes.
However, this is usually not best practice. Ideally, you should use the following Xpath in most cases:
//div[#id,('some id') and contains(., 'part 1')]

How to extract the text from a child node which is within a <div> tag through Selenium and WebDriver?

I need to get the value 107801307 that is inside a specific Div but there are several other Divs in the path before getting into that DIV I need. Can anyone help?
Below is the image with the information that I need to extract from the DIV.
As per the HTML you have provided, to extract the text 107801307 you can use the following solution:
Java:
String myText = driver.findElement(By.xpath("//b[#class='label_tratamento'][contains(.,'Ban Claro')]//following::span[1]").getAttribute("innerHTML");
Python:
myText = driver.find_element_by_xpath("//b[#class='label_tratamento'][contains(.,'Ban Claro')]//following::span[1]").get_attribute("innerHTML")
Research xpath locators to find the specific element you want.
Assuming you were using Java, the code would be:
webdriver.findElement(By.xpath("//b[text()='Ban Claro']/following::span").getText();
or
webdriver.findElement(By.xpath("//b[#class='label_tratamento']/following::span").getText();
Use:
driver.findElement(By.xpath(("XPATH OF DIV HERE")[Index of the div where span is. Example: 4)/span)).getText();

BeautifulSoup 4: select all divs with at least one child p tag with specific class

I'd like to extract a list of divs (including their children, for further processing) which contain one or more <p class="c8"> child tags, using BeautifulSoup 4, but I haven't had any luck using the CSS selector syntax. Can I use find_all and a boolean function, or is there a better way?
There are different ways to approach the problem. One, is to locate all p elements having class="c8" and find the parent div element:
for p in soup.find_all("p", class_="c8"):
div = p.find_parent("div")
You can also write a function to find all div elements checking that there is a desired child:
def filter_div(elm):
return elm.name == "div" and elm.find("p", class_="c8")
for div in soup.find_all(filter_div):
# do smth with div

inline image alt attribute and getText()

I got something like this:
<div id=soandso>
Having a
<img src="cat.gif" alt="Meow">
always helps
</div>
I have no problems finding the div element, when I invoke getText() I would wish to receive "Having a Meow always helps", but instead I get the text without the alt (Meow) description.
I agree this is the expected behaviour, but this is not what I need.
How can I preferably inline the alt text or at least get the text chunks in sequence with the inline image to verify the proper placement of the image inside the text?
selenium-webdriver works that way in both scenarios,
considers "alt" as attribute of image tag and not as element text for Div.
Considers "Having a always helps" as innerText of Div element.
i would suggest....to extract the Div text and img (alt) text separately. if text follows a pattern, try to identify sequence after or before which image attribute will be displayed.
WebElement Div_elem=Driver.findElement(By.id("soandso"));
String Div_text = Div_elem.getText();
String img_text=Div_elem.findElement(By.tagName("img")).getAttribute("alt");
would be glad if it helps
I found a solution here: How to get text of an element in Selenium WebDriver (via the Python api) without including child element text?
His suggested solution:
def get_text_excluding_children(driver, element):
return driver.execute_script("""
return jQuery(arguments[0]).contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).text();
""", element)
The element passed to the function can be something obtained from the find_element...() methods (i.e. it can be a WebElement object).
basically suggests that you use jQuery to get the text within the div.

WebElement.getCssValue & WebElement.getAttribute Usage

Can anybody help me about how to use these two functions to get value of any CSS property.
If have a particular <img> tag as below
<img title="Title" alt="myTitle" src="A/B/C/xyz.png">
driver.getElement(By.tagName("img")).getAttribute("src") will get you the src attribute of this tag. Result - A/B/C/xyz.png
Similarly, you can get the values of attributes such as title, alt etc.
Similarly you can get CSS properties of any tag by using getCssValue("some propety")