<a href="editauthority.jsp" title="Add a new connection" class="link btn btn-primary" role="button">
<i class="fa fa-plus-circle fa-fw" aria-hidden="true"></i>
Add a new connection</a>
I have an HTML element as above with an font-awesome icon. I want to find an element from html using its text.
This is what I have tried so far
//a[contains(#class,'btn') and contains(normalize-space(text()),'Add a new connection')]
But the problem is //a[contains(#class,'btn') and contains(normalize-space(text()),'')] returns the expected value with a new line before and few space at the start, which doesn't match with the expected value of Add a new connection
How can I match the element text ignore all new line and extra spaces.
I am using the above XPATH to find elements in selenium testing.
Update
Adding Selenium code
/**
* Clicks a button based on visible text, this type of button is created using anchor tag with .btn class
* #param text
*/
public void clickButton(String text)
{
WebElement element =
waitElementClickable(
By.xpath("//a[contains(#class,'btn') and contains(normalize-space(text()),'" + text + "')]"));
element.click();
if (!isAlertPresent())
{
wait.until(ExpectedConditions.invisibilityOfElementLocated(By.id("loader")));
}
}
It is important to realize the difference between Testing text() nodes vs string values in XPath.
Change this clause,
contains(normalize-space(text()),'Add a new connection')
to this
normalize-space()='Add a new connection'
So your complete XPath would read,
//a[contains(#class,'btn') and normalize-space()='Add a new connection']
You might also want to avoid inadvertent substring matching on #class by using this technique.
You can try this expression:
//a[contains(#class, "btn") and contains(.,"Add a new connection")]
Example
Related
Im trying to show a span upon clicking a button. Hiding the button itself works perfectly but now im trying to show the phonenumber by selecting the span from the curentTarget. I tried it like this but its not working.
<li class="phonenumber">
<em class="fa fa-clock-o text-blue"></em>
<button type="button">Telefonnummer anzeigen</button>
<span class="phonenumberspan" style="display:none">phone</span>
</li>
As mentioned, the hiding of the button works but somehome the selection from the currentTarget to the span is wrong. Thanks for any help.
private _showPhoneNr(e: Event) {
var target = $(e.currentTarget);
target.hide();
var parent = target.parent("phonenumber");
var number = parent.find("phonenumberspan");
number.show();
}
to select a parent element you can use this in your code
var number = document.getElementsByClassName('phonenumberspan')[0].parentElement.nodeName;
Is it possible to style the value in the attribute ngModel of an input tag?
Example:
<input class="input" type="text" [(ngModel)] = "myService.text">
Let's say the value of text is '28 packages', can I put 28 in bold?
So if i understand correctly you want to have it bold whenever the value is 28 ?
yes its possible you can use a ng-class with a ternary expression like this
.bold{
font-weight:600;
}
<input type="text" ng-class="myService.text == '28 ? 'bold' : '''" class="input" ng-model="myService.text" />
This is not angular-related rather a CSS related question.
You cannot style only a part of an input in HTML/CSS so you won't be able to do it in angular.
Instead, you can use an input that is hidden behind a div. The idea is that when the user clicks the div, you actually focus the input. When the user types text, you capture the content of the input and fill the div with it, eventually adding <span class"highlight"> around the number of packages.
I prepared you a stackblitz in pure CSS/JS. You can adapt it in angular if you want.
Relevant pieces of code :
HTML :
<span id="hiddenSpan">This is the hidden div. Click it and start typing</span>
<div>
<label for="in">The real input</label>
<input id="in" type="text">
</div>
JS :
const input = document.getElementById('in')
const hiddenSpan = document.getElementById('hiddenSpan')
function onInputChanged() {
let text = input.value
const regex = new RegExp('(\\d+) packages')
let result = regex.exec(text)
if(result) {
hiddenSpan.innerHTML = '<span class="highlight">'+result[1]+'</span> packages'
} else {
hiddenSpan.innerHTML = text
}
}
// Capture keystrokes.
input.addEventListener('keyup', onInputChanged)
// Focus the input when the user clicks the pink div.
hiddenSpan.addEventListener('click', function() {
input.focus()
})
CSS :
#hiddenSpan {
background-color: pink;
}
.highlight {
font-weight: bold;
background-color: greenyellow;
}
Note : the downside is that the blinking caret is not visible anymore. You can take a look at this resource if you want to simulate one.
It is not possible to style certain parts of a text <input> field in bold. However, you can use a contenteditable div instead of a text <input> field. Inside the contenteditable div you can have other HTML tags like <strong> to style certain parts of the text however you like.
I created an Angular directive called contenteditableModel (check out the StackBlitz demo here) and you can use it to perform 2-way binding on a contenteditable element like this:
<div class="input" contenteditable [(contenteditableModel)]="myService.text"></div>
The directive uses regular expressions to automatically check for numbers in the inputted text, and surrounds them in a <strong> tag to make them bold. For example, if you input "28 packages", the innerHTML of the div will be formatted like this (to make "28" bolded):
<strong>28</strong> packages
This is the code used in the directive to perform the formatting:
var inputElement = this.elementRef.nativeElement;
inputElement.innerHTML = inputElement.textContent.replace(/(\d+)/g, "<strong>$1</strong>");
this.change.emit(inputElement.textContent);
You can change the <strong> tag to something else (e.g. <span style="text-decoration: underline"> if you want the text to be underlined instead of bolded).
When performing the formatting, there is an issue where the user's text cursor position will be unexpectedly reset back to the beginning of the contenteditable div. To fix this, I used 2 functions (getOriginalCaretPosition and restoreCaretPosition) to store the user's original cursor position and then restore the position back after the text formatting is performed. These 2 functions are kind of complex and they're not entirely relevant to the OP's question so I will not go into much detail about them here. You can PM me if you want to learn more about them.
<div class="aw-widgets-cellListCellTitleBlock">
<h3 title="block1" class="aw-widgets-cellListCellTitle" id="CellTitle">block1</h3>
<label class="aw-widgets-cellListCellItemType aw-base-small">000027</label>
</div>
In given snippet title="block1" i want to take it in the form of variable foe
e.g. String sample="block1" and then it used as title=sample or //div[text()=sample].
I tried this one but its not working. Did you have any solution for it?
If you want to get the title value from HTML code, then you can use any one from the following code.
WebElement element = driver.findElement(By.xpath("//h3[contains(text(),'block1')]"));
or
WebElement element = driver.findElement(By.xpath("//h3[#id='CellTitle']"));
or
WebElement element = driver.findElement(By.xpath("//div[#class='aw-widgets-cellListCellTitleBlock']/h3"));
//get text
String text = element.getAttribute("title");
I'm new to Angular but I'm trying to implement a textbox that allows users to enter in links. I only want to support links, and otherwise I want to block all html from being presented as such. I could theoretically use something other than a textarea, but my requirements are that it must be bound to a variable in my scope (right now with ng-model) and I cannot accept html tags other than '< a >'
Here is my example plnkr
In the example, I would like the second seeded item to display as a link, blue and underlined. However, the third item should display as it is currently shown (without interpreting it as html).
HTML:
<textarea maxlength="160" ng-model="val.text"></textarea>
<div class="btn" ng-click="submit()">Submit</div>
<br><br>
<div ng-repeat="item in items">
{{display(item)}}
</div>
JS:
$scope.submit = function() {
if (!$scope.val.text) return
$scope.items.push($scope.val.text);
}
$scope.display = function(txt) {
return txt;
// something here? if txt contains <a> and </a> indicate
// that we should display as html
}
If a text input tag is placed inside an anchor, then in Firefox (on Windows) it is not possible to manipulate text inside the text box — text cursor doesn't change its position, and it is not possible to select the text. In Chrome you can change cursor position, but not select the text.
In some cases we can set the parent to be something else than anchor, yet is there a way to avoid this behaviour in general?
Here's the HTML code:
<p>No text select in FF:</p>
<a href="#">
<input type="text" value="7777" />
</a>
<p>Working text select in FF:</p>
<span>
<input type="text" value="8888" />
</span>
And the fiddle.
You can remove the href attribute when the input element is focused. As long as there is no href attribute, you will be able to select text inside the input field (tested in safari, chrome and firefox).
<a href="http://www.google.de" id="link">
link
<input type="text" id="input">
</a>
(function () {
var link = document.getElementById('link');
var input = document.getElementById('input');
var saveHref = null;
input.addEventListener('focusin', function () {
savedHref = link.href;
link.removeAttribute('href');
});
input.addEventListener('focusout', function () {
link.href = savedHref;
savedHref = null;
});
})();
Working example:
http://codepen.io/jjd/pen/JYwLVr
its because of the implementation error in browser.
actualy when we clicking browser it will look for the type of object
in this way
1.is this a link
2.is this any other type( input area,image,
why it first checking for type "link"
because clickig is firstly implemented for opening links,
anf its main usage is for open links
it detect first it as a link then it will call the
. openlink(example) function