I have following div block , where I am iterating on observable
Next when I try to set a ngStyle , I am getting the value of ngStyle as [Object object] instead of string .
<div class = "circle-logo-btm pull-left cp" *ngFor= "let imageUrl of (allAppBGIMageURLs$ | async)" (click)="selectApplication(1)">
<div [ngStyle]="{'background-image':'url(' + imageUrl + ')'}" class=" btn-round"></div>
</div>
This is the rendered result , its coming as an object instead of actual image url
<div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c3="" class=" btn-round" ng-reflect-ng-style="[object Object]"></div>
Related
i have json file for translate ( en.json ) and this line :
{
"cancel order": "Hi, How can i <b> Cancel </b> ?",
}
<div class="d-flex align-items-center justify-content-center align-content-center mb-4">
<span class="description col-sm-11 col-md-7 col-lg-10">
{{ $t('cancel order') }}
</span>
</div>
now my result is " Hi, How can i Cancel "
The problem is that the html code does not apply like this code and the tags are displayed exactly without being applied.
You can use the v-html directive to rander raw html.
const htmlcontent = '<h1>Hello</h1>'
<span v-html="htmlcontent">
</span>
https://vuejs.org/guide/essentials/template-syntax.html#raw-html
use this :
<div v-html="$t('cancel order')"></div>
One observation : Using camelCase in property names consider as a best practice. Hence, use cancel order instead of cancel order.
To render your translation as an HTML message and not a static string. You can use v-html.
Template :
<span class="description col-sm-11 col-md-7 col-lg-10" v-html="$t('cancelOrder')"></span>
I am trying to extract Main Text1 and Main Text2 from below DOM structure.
<div class="origination">
<div class="origin">
<h3>
Main Text1
<span class="info">Test1</span>
</h3>
<div class="test">
</div>
</div>
<div class="origin">
<h3>
Main Text2
<span class="info">Test2</span>
</h3>
<div class="test">
</div>
</div>
</div>
I have used below xpath with text() to identify header without span
#FindBy(xpath = ".//*[#id='origination']/div[*]/h3/text()")
List<WebElement> content;
I am trying to print header element without span using below code
for (WebElement element: content){
System.out.println("Header" + element.getText());
}
But I am getting error:
org.openqa.selenium.NoSuchElementException: Timed out after 15 seconds. List elements not found
However, when I used the same XPath on the firepath elements get highlighted in the DOM structure but not on to the page.
Here is the answer.
spanText = element.findElement(By.xpath("//span[#class='info']")).getText()
element.getText().Replace(spanText, string.Empty);
I'm having an issue selecting the exact text 'Section' from the code using xpath.
** To be clear I require the exact text selection to be made from the innerText or innerHTML of the element if that is possible, not the id. **
I'm able to use the contains text function, but that results in other partial matches that contain 'Section' being returned/highlighted as well:
//div[#aria-hidden='false']//ul/li[contains(text(),'Section')]
I've tried using the following methods, but I don't know if I've got the syntax correct, as nothing is returned/highlighted:
//div[#aria-hidden='false']//ul/li[text()='Section')]
//div[#aria-hidden='false']//ul/li[.='Section']
//div[#aria-hidden='false']//ul/li[normalize-space(.)='Section']
This is what is shown when inspecting the Section node:
<li id="GOS--/40" class="nodecollapsed item parent-node xh-highlight" style="" xpath="1">
Section <span class="child-count"></span>
</li>
This is what is shown in the element properties:
id: "GOS--/40"
innerHTML: "↵ Section <span class="child-count"></span>↵ "
innerText: " Section "
Here is the xml which shows the other partial matches that are returned:
<div class="selection-list-dialog modal-dialog Dialog">
<div class="modal-content">
<div class="modal-header SectionHeader">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<span class="modal-title" data-lang="StandardItems">Standard Items</span>
</div>
<div class="modal-body selection-list-container" style="margin-top: 30px" id="base">
<div>
<span data-lang="SelectItemInstructions">Select the items you are interested in from the list.</span>
</div>
<br/>
<div class="pull-left selection-tree-container">
<h4 class="selection-list-title">
<span data-lang="Available">Available</span>
</h4>
<ul class="selection-list selection-tree-list">
<li id="CS--/14" class="nodecollapsed item parent-node">
Country Section <span class="child-count"></span>
</li>
<li id="Sec1--/23" class="nodecollapsed item parent-node">
Section 1 <span class="child-count"></span>
</li>
<li id="Sec2--/24" class="nodecollapsed item parent-node">
Section 2 <span class="child-count"></span>
</li>
<li id="GOS--/40" class="nodecollapsed item parent-node">
Section <span class="child-count"></span>
</li>
<li id="RS--/43" class="nodecollapsed item parent-node">
Regional Section <span class="child-count"></span>
</li>
This was a tough one. The problem is that you have a number of similar options all containing "Section" in some flavor and it's hard to distinguish them apart. What adds to this is that each one contains a non-breaking space which means that normalize-space() won't work (directly) either.
But... I found that the below XPath will work.
//li[normalize-space()='Section\u00a0']
normalize-space() removes whitespace (but not  ) so you have to add it in there with \u00a0. I've tested this locally and it's working.
Try following xpath see if it helps.
//li[starts-with(#id,'GOS')][#class='nodecollapsed item parent-node xh-highlight']
OR
//li[#class='nodecollapsed item parent-node xh-highlight'][#xpath='1']
you can try the below XPath to find a section node
Try if it helps
//li[#id='GOS--/40'][contains(text(),'Section')]
Let me throw my hat into the ring....
//li[(normalize-space(text()) = 'Section')]
Here is the method that will fetch the text from the parent only. (exclude the text in the child(ren))
In Python:
def get_pure_element_text(element):
return driver.execute_script(
"""
var parent = arguments[0];
var child = parent.firstChild;
var textValue = "";
while(child) {
if (child.nodeType === Node.TEXT_NODE)
textValue += child.textContent;
child = child.nextSibling;
}
return textValue;""",
element).strip()
This method will iterate all the firstChild (direct children) and extract all text from all the text nodes.
In this context If you want to retrieve the text of li which have the id GOS--/40 then use the method as below.
element = driver.find_element_by_xpath("//li[#id='GOS--/40']")
print(get_pure_element_text(element))
Sharing this method, at least might help the others (if not the OP in this context).
C# implementation:(not tested)
string get_pure_text(IWebDriver driver, IWebElement element){
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
return (string)js.ExecuteScript(""""
var parent = arguments[0];
var child = parent.firstChild;
var textValue = "";
while(child) {
if (child.nodeType === Node.TEXT_NODE)
textValue += child.textContent;
child = child.nextSibling;
}
return textValue;""",
element");
Usage:
string output = get_pure_text(driver,element)
I wanted to identify the CheckBox based on the name given to it by using the xpath, but was not able to reach till the text uniquely.
The html code is in below. How can I get the dynamic xpath for 'text1' or 'text2' mentioned in the html?
<html>
<body>
<div class="section-content">
<div>
<input class="cls" type="checkbox"/>
text1
</div>
</div>
<div class="section-content">
<div>
<input class="cls" type="checkbox"/>
text2
</div>
</div>
<div class="section-content">
<div>
<input class="cls" type="checkbox"/>
text3
</div>
</div>
<div class="section-content">
<div>
<input class="cls" type="checkbox"/>
text4
</div>
</div>
</body>
</html>
The below code worked for me
driver.findElement(By.xpath("//div[contains(.,'text4')]/input")).click();
To identify the node with text as text1 you can use the following line of code :
WebElement element_text1 = driver.findElement(By.xpath("//div[#class='section-content']/div[contains(normalize-space(), 'text1')]"));
To get identify the Check Box associated with the node with text as text1 you can use the following line of code :
driver.findElement(By.xpath("//div[#class='section-content']/div[contains(normalize-space(), 'text1')]/input"));
Try this:
WebElement body = dr.findElement(By.xpath("/html/body"));
List<WebElement> div = dr.findElements(By.className("section-content"));
for(int i=1;i<div.size();i++)
{
String checkBoxText = dr.findElement(By.xpath("/html/body/div["+i+"]/div")).getText();
if(checkBoxText.equals("text3"))
{
dr.findElement(By.xpath("/html/body/div["+i+"]/div/input")).click();
break;
}
}
I should get the values between the p tag.
Following is the code from which i need to get the values
<div id="ved-list-totals">
<div id="ved-sidebar-totals" class="clearfix margin-top-10" style="height: 100px;">
<div id="ved-sidebar-totals" class="clearfix margin-top-10" style="height: 100px; background-color: transparent;">
<div class="pull-right margin-left-20 margin-right-10 align-right">
<p class="no-margin">0</p>
<p class="no-margin" style="background-color: transparent;">5.97</p>
<p class="no-margin">0.00</p>
<p class="no-margin">4.95</p>
<p class="no-margin bold dark-text">10.92</p>
</div>
<div class="pull-right margin-left-20 align-right">
<p class="no-margin">Estimated Points</p>
<p class="no-margin">Subtotal</p>
<p class="no-margin">Tax</p>
<p class="no-margin">Service Fee</p>
<p class="no-margin bold dark-text">Estimated Total</p>
</div>
I have tried the following approaches:
String tot = driver.findElement(By.xpath("html/body/div[4]/table/tbody/tr/td[2]/div/div[1]/div[2]/div/div/div/div[2]/div/div/div[1]/p[2]")).getText();
String axd = driver.findElement(By.xpath("html/body/div[4]/table/tbody/tr/td[2]/div/div[1]/div[2]/div/div/div/div[2]/div/div/div[1]/p[3]")).getText();
String tot = driver.findElement(By.xpath("//div[#id='ecart-sidebar-totals']/div/p[4]")).getText();
String axd = driver.findElement(By.xpath("//div[#id='ecart-sidebar-totals']/div/p[3]")).getText();
I was getting the error as :
org.openqa.selenium.NoSuchElementException: Unable to locate element: {"method":"xpath","selector":"//div[#id='ecart-sidebar-totals']/div/p[4]"}
There are two elements with the same id (<div id="ved-sidebar-totals">) should this id be blamed for this error, or is there any thing which am missing.
Use the xpath //div[#id='ved-list-totals']//p[1]. This should return the first p tag value with getText() method.
Wild guess..
//div[#id='ecart-sidebar-totals']/div[#id='ved-list-totals']/p[1]
Try using Css selector
driver.findElement(By.cssSelector("div[class='pull-right margin-left-20 margin-right-10 align-right'] p:nth-child(4)"));