Trying to check if the element set focus to using class header matching by text and getting error unable to locate the element. I know the header title which is 'My Details' in this example, and using this title, how to locate the element?
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">My Details</h3>
</div>
Element should be focused //div[contains(.,'My Details')
To locate the h3 in your example code, use this xpath //h3[contains(text(),'My Details')]
To locate the div which has card__header in class, use this xpath //div[contains(#class,'card__header')]
It worked fine with this keyword and the X-path reference. Thank you all for guiding me to find the solution
Element should be enabled //h3[contains(text(),'${MyLinkText}')]
Related
I have a loop where i display dynamically icons, the position of the icons are styled by css on style.css, but the classes name are actually an elements of json object.
The problem is how to use the value of the json element which is style in order to style the icons.
The *ngFor looks like this:
<div *ngFor="let count of counters; let i = index" class="{{count.style}} dispanserDiv ">
<span class="dispLabel"> {{count.name }}</span>
<img (click)="openStockModal(stockModal)" class="dispanser" src="../assets/icons/dispanserIcons/0.png">
</div>
also i tried [ngClass] but not working, any help is appreciate.
Well, after i opened the inspect element, and i hover over the tags i found on screen a title message with a direction arrow out of the height of the scree, so i changed the margin-top attr th icon appear again.
but i am pretty sure that when i set the class name without using the json element value, it display fine, but when i use the json element the icons appear at a different position, but i have no idea why this is happening. but it finally worked
Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.
Is there a way to display an object/text that only exists as an attribute?
For example, this is my HTML:
<body var="text I want to insert">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.
You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:
.titlepage:before {
content:var(--var);
}
<body style="--var:'text I want to insert'">
<div class="titlepage">
<p class="titlepagetext">this should also be displayed</p>
</div>
</body>
AH Formatter has an -ah-attr-from() extension function that will let you get the contents of an ancestor's attribute (see https://www.antennahouse.com/product/ahf66/ahf-ext.html#attr-from).
You could use -ah-attr-from() in a rule for .titlepagetext::before.
When you using css, you can't target parent. There is no way to get parent selector. And content: "" can apply only for pseudo-classes.
I have below code and want to locate the element for css or xpath.
<div class="arrowIconDiv" data-dojo-attach-point="arrowIconDiv">
<div class="i-arrow-double" data-dojo-attach-point="NavAreaExpander"> /div>
<div class="i-arrow-double-hover" data-dojo-attach-point="NavAreaExpanderHover"></div>
Tried multiple things but was not able to locate and click on the element.
(by.css(".arrowIconDiv"))
(by.css('[data-dojo-attach-point="arrowIconDiv"]'))
(by.xpath('.//div[#class="i-arrow-double-hover"][.="NavAreaExpanderHover"]'))
Thanks in advance
NavAreaExpanderHover is value of data-dojo-attach-point attribute, not the content of the div element. So instead of using . in the XPath, use the attribute name :
.//div[#class="i-arrow-double-hover" and #data-dojo-attach-point="NavAreaExpanderHover"]
<input class="ui-autocomplete-input"/> represents the text field to be autocompleted.
<ul>...</ul> contains the list of matching items from the text field input. It is added to the document by remote call as you type.
<ul>...</ul> is added just inside the closing </body> tag. I was expecting the <ul>...</ul> to be placed just after the <input class="ui-autocomplete-input"/>. Because this does not happen, the <ul>...</ul> falls outside of the containing div and the resulting style is broken.
Suggestions? Can I specify where the <ul>...</ul> gets placed in the document? Thanks in advance for your time.
Post your source (so we can see exactly what we're working with here) but basically you need just need to find the parent and then appendTo
$("ul").appendTo($("input.ui-autocomplete-input").parent());
Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.
e.g. I have a label
I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).
So, the question in a nutshell is: Is there a flex equivalent of the following HTML?
<p class="english">bro<span class="highlight">th</span>er</p>
If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?
Thanks to anyone who can help!
Dan
yes, try the following
var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';
Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.
<mx:Label>
<mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>
The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :
Paragraph tag
The <p> tag creates a new paragraph.
The text field must be set to be a multiline text field to use this tag.
The <p> tag supports the following attributes:
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Span tag
The <span> tag is available only for use with CSS text styles.
It supports the following attribute:
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Ultimately, there are quite a few ways to do what you want.