I want to get the value of the attibute of an image like 'src'. also the image have a classname, i select the image using the class name, but how can i get the attribute?
<img src="http://somelink.jpg" class="img-fluid">
here's how i use the xpath selector to select an image using the classname
//img[#class="img-fluid"]
how can i get the value of an attr of an image "src"?
so i'll have the link "http://somelink.jpg"?
You can use the below xpath to get the src value.
//img[#class="img-fluid"]/#src
For example, you can get src attribute of all avatar images in this page using the below xpath.
//*[contains(#class, "user-gravatar")]//img/#src
You may also take a look at this xpath cheatsheet.
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
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}')]
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"]
I am trying to build a RSS feed, so first I get the page with XPath Fetch Page (XPath is //div[#class='topic']/h2/a), then I Loop for each item and XPath Fetch Page again with URL equal to item.href and extract images there with XPath equal to //*[#id="topic"]/div[4]/div/div/a/img.
In result I get a description, which contains set of images like:
0
alt Sample title
height 925
src http://cdn.example.com/f2dd/3702212_6cddf28e.jpg
style width:640px; height:925px;
width 640
1
alt Sample title
height 920
src http://cdn.example.com/1cc7/3702213_00acefab.jpg
style width:640px; height:920px;
width 640
...
How should I convert it to one text string with a number of <img src="..."> elements? If I Loop thru each item (what is shown on the image below), then I get just one (first) element.
So you want to join / concatenate a list of images... I don't think there's an operator for that.
The next best thing is a dirty hack like this:
In your loops, assign to x instead of description
Add a Regex operator with params:
in: item.description
replace: .*
with: ${x.0}${x.1}${x.2}${x.3}${x.4} (and so on)
UPDATE
As #LA_ commented, the replacement should be like this instead: <img src="${x.0.src}"><br><img src="${x.1.src}">
Lets say I want to display tool tips for links using the title attribute:
<a class="editcommand" title="Edit" ...>
Is there a way to specify the title text for all elements of the same class using CSS, so I don't have to repeat it within each element?
CSS is only for the content of the style="" attribute, not other HTML tags. This sounds like a job for Javascript. If you're using jQuery here's an example:
$('a').attr('title', 'My universal title');
Unfortunately, no, CSS does not provide that ability. Since title is an HTML attribute (besides the <title> element of course), it's up to the markup structure (DOM) to define it, not the style (CSS).
With JavaScript it's just a matter of attaching the attribute to a set of DOM elements with that class. But again, that's modifying the DOM elements themselves, not their style properties.