In my HTML I have element such as below
HTML:
<hmtl>
<head>
<style>
label::after {
content: " *"
}
</style>
</head>
<body>
<label> I'm mandatory</label>
</body>
</hmtl>
So what gets displayed on browser is:
I'm mandatory *
Query Selector
>getComputedStyle(document.querySelector('label')).content
<"normal"
So I see normal instead of *.
I can't see where is normal coming from. Is this the correct way to test content of ::after CSS selector?
I want to test that there's a "*" after the label, but can't seem to be able to get the value of "content" property correctly. Once I'm able to find it in using browser DOM API, I'd eventually want to test it in protractor.
Update
I found the answer at - Selenium WebDriver get text from CSS property "content" on a ::before pseudo element.
Now the question remains how I would test this on protractor.
Window.getComputedStyle()
The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.
Syntax:
var style = window.getComputedStyle(element [, pseudoElt]);
element
The Element for which to get the computed style.
pseudoElt (Optional)
A string specifying the pseudo-element to match. Omitted (or null) for real elements.
The returned style is a live CSSStyleDeclaration object, which updates automatically when the element's styles are changed.
You can find a related discussion in WebDriver select element that has ::before
Usage with pseudo-elements
getComputedStyle() can pull style info from pseudo-elements (such as ::after, ::before, ::marker, ::line-marker.
As per the HTML, the <style> is as follows:
<style>
label::after {
content: " *"
}
</style>
Implemented as:
<label> I'm mandatory</label>
To retrieve you need to:
var label = document.querySelector('label');
var result = getComputedStyle(label, ':after').content;
console.log('the generated content is: ', result); // returns ' *'
Reference
CSS Pseudo-Elements Module Level 4
const label = document.querySelector('label'); // "normal";
console.log(label);
const labelAfter = getComputedStyle(label, ':after').content;
console.log(labelAfter == "normal");
label::after {
content: " *"
}
<label> I'm mandatory</label>
Since my question was specifically w.r.t protractor I'm posting the solution that I got working. Coming to the part I was stuck initially - why do I get "normal" instead of " *"
>getComputedStyle(document.querySelector('label')).content
<"normal"
So earlier I was unaware that ::after creates a pseudo child element inside the label element.
Inspecting <label> element in Chrome shows the below HTML
<label>
I'm mandatory
::after
</label>
If I click<label> element and checked the Computed tab, I could see that the value for content property is normal.
However, if I click on ::after pseudo-element, I can see in the Computed tab the value for content property is " *".
As mentioned in the other answers getComputedStyle() with the pseudo element as second parameter, is the only way to get value of CSS property for "::after". The crux of the problem is that protractor does not have an equivalent for getComputedStyle(), so we have to rely upon browser.executeScript() as shown below:
let labelHeader = 'I'm mandatory *';
// Passing label element separately as in the real test case, it would be extracted from parent
// enclosing element and need to be able to pass it as a parameter to browser.executeScript().
let label = element(by.css('label'));
browser.executeScript("return window.getComputedStyle(arguments[0], ':after').content",
label)
.then ((suffixData: string) => {
// suffixData comes out to be '" *"', double quotes as part of the string.
// So get rid of the first and last double quote character
suffixData = suffixData.slice(1, suffixData.length - 1);
labelText += suffixData;
expect(labelText).toBe(labelHeader);
});
Related
I was wondering if CSS changes the DOM.
The reason I am asking, is that whenever I change an Element with CSS, I don't see it's value changed in the "element".style properties.
No, CSS does not change the DOM.
No. CSS does not change the DOM.
Nor content injected using :after or :before alter the DOM.
Actually... there are a few cases where CSS can change the DOM, but it's a bit far-stretched, as it won't change the DOM-tree structure, except in one yet even more far stretched case...
There is a being rendered definition in the HTML specs that does impact the behavior of the DOM in some cases, based on CSS computed styles.
For instance,
an HTMLImageElement can have its width and height IDL attributes value change whether it is being rendered or not:
onload = (evt) => {
console.log( 'rendered', document.getElementById( 'disp' ).width );
console.log( 'not rendered', document.getElementById( 'no-disp' ).width );
}
img { width: 100px; }
#no-disp { display: none; }
<img id="disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
<img id="no-disp" src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png">
Elements that are not being rendered can not be focusable elements:
document.getElementById( 'rendered' ).focus();
console.log( document.activeElement ); // <input id="rendered">
document.getElementById( 'rendered' ).blur();
document.getElementById( 'not-rendered' ).focus();
console.log( document.activeElement ); // <body>
#not-rendered {
display: none;
}
<input id="rendered">
<input id="not-rendered">
And the one case where the DOM tree is modified, concerns the DOM tree of an inner Document: When an <object> or an <embed> element has its style set to display:none, per specs, its inner Document should be reloaded:
Whenever one of the following conditions occur
[...]
the element changes from being rendered to not being rendered, or vice versa,
...the user agent must queue an element task on the DOM manipulation task source given the object element to run the following steps to (re)determine what the object element represents.
So this means that simply switching the being rendered state of such an <object> or <embed> element is supposed to reload entirely its inner Document, which means also its DOM tree.
Now, only Safari behaves like that, Firefox never implemented that behavior, and Chrome did recently change their to match FF's one, against the specs.
For Safari users, here is a fiddle demonstrating it.
Below is the dom structure of the page :
I have tried
button:contains("srave")
I also tried
button[innerText="srave"]
button[text="srave"]`
button[innerHtml="srave"]`
none of them work.
Need way to get elements when element attribute is not defined.
PS: textContent() return srave as outcome.
Edit:
I have many such button elements on the page. I know I can iterate through all of them and check text. But I want to get web element directly based on the text it contains to reduce the execution time
Did you try: button[class='k-button k-button-icontext'] or button[dir='ltr'] I don't think the cssSelectors you were attempting in your example are correct because you pluralized button. If neither of these work, it may be that there are more than one button on the page with the same selector. In which case it might be better to use xpath or you could get a list of all the elements with the same selector and then get whichever one from that list you created and click it.
No, you can't use CSS Selector. You can use XPath.
//button[text()='srave']
Or
//button[contains(text(),'srave')]
You can use jquery for get the same because css is not select the text.
Working fiddle
fiddle link
Try this
alert($('button').find('span').html());
You can use following css to get the button name with "srave".
HTML
<button data-name="srave">
<span>Brave</span>
</button>
css
button[data-name="srave"] {
background:tomato;
}
To add to danidangerbear here is a java method that will do what you want:
public String getElementText(String elementText){
List<WebElement> elements = driver.findElements(By.cssSelector("button"));
String elementText = null;
for(WebElement element : elements)
if(element.getText().equals(actualValue)){
elementText = element.getText();
break;
} else {
elementText = "element text does not exist";
continue;
}
return elementText;
}
I'm looking into custom CSS properties and have come up with the code below.
If I put the CSS inline using a STYLE attribute on the canvas tag (like this: style="--rgLinewidth: 3" ) then I can get the custom CSS values using the script shown below.
But using a tag, as below, then it doesn't show the custom CSS properties.
Is it possible to? And if so how?
<html>
<head>
<style>
canvas#cvs {
--rgLinewidth: 3;
background-color: red;
}
</style>
</head>
<body>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script>
canvas = document.getElementById("cvs");
styles = window.getComputedStyle(canvas);
alert(styles.getPropertyValue('background-color'));
alert(styles.getPropertyValue('--rgLinewidth'));
for (var i=0; i<styles.length; i++) {
if (canvas.style[i].indexOf('--rg') === 0) {
var value = styles.getPropertyValue(canvas.style[i]);
alert([canvas.style[i], value]);
}
}
</script>
</body>
</html>
It does not work because you query for computed style and then attempt to retrieve values of corresponding properties from the inline style, where they do not exist -- your canvas does not define an inline style. You need to query the values through the same styles object where you find the properties.
Consider the following function which when passed an element, will search through its computed style and return the value of the first CSS variable whose name starts with --rg:
function find_first_rg_value(el) {
var styles = getComputedStyle(el);
for (var i = 0; i < styles.length; i++) {
if (styles[i].startsWith('--rg')) {
return styles.getPropertyValue(styles[i]);
}
}
}
(Use like find_first_rg_value(canvas))
The difference between my approach and yours is, as I said, that you attempt to fetch the value from canvas.style[i], but canvas.style is effectively empty. Use styles instead.
Computed style (getComputedStyle), as the name implies, contains "summary" style computed per CSS cascading, inheriting, and so on, with inline style, if any, applied on top (overriding priority). Assigning inline style therefore affects the computed style, but querying inline style only gives you inline style you assigned, no more.
This means that in most cases like yours one would want to use getComputedStyle. Additionally, since CSS variables cannot be queried using style.fontName syntax, you need to use getPropertyValue function for these (all dashes intact in the passed property name), regardless if you are dealing with an inline or computed style object.
Is there any way to know if an element height or width was set (not auto) in javascript/css ?
elm.style.height will only return a value if the height is defined inside the element attribute list : <div style='height:200px' .... ></div>, otherwise it will always return an empty string even if you define the height inside a style tag or a css file : .myElmCss{height:200px}.
On the other hand, using window.getComputedStyle() or elm.currentStyle will always return a value even if no height was defined neither inside the element attribute list nor in a css file/style tag.
Thanks.
Check this post How do you read CSS rule values with JavaScript?
To do what you're looking for it appears to be a matter of iterating over the stylesheets to find declared properties. You would probably also cross reference with inline styles like you mentioned in your question.
from #InsDel's post:
function getStyle(className) {
var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
for(var x=0;x<classes.length;x++) {
if(classes[x].selectorText==className) {
(classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
}
}
}
Hay I have an element like this
<span class='a.b'>
Unfortunately this class name comes from an eCommerce application and cannot be changed.
Can I style a class name with a dot in it?
like
.a.b { }
.a\.b { }
However there could be browsers around that don't support this.
Coming very late to this party, but you can use attribute selectors.
In your case, to target the class='a.b' element, you could use:
[class~="a.b"] {...}
// or
span[class~="a.b"] {...}
Additionally, here is the full list of attribute selectors.
Attribute Present Selector
// Selects an element if the given attribute is present
// HTML
<a target="_blank">...</a>
// CSS
a[target] {...}
Attribute Equals Selector
// Selects an element if the given attribute value
// exactly matches the value stated
// HTML
...
// CSS
a[href="http://google.com/"] {...}
Attribute Contains Selector
// Selects an element if the given attribute value
// contains at least once instance of the value stated
// HTML
...
// CSS
a[href*="login"] {...}
Attribute Begins With Selector
// Selects an element if the given attribute value
// begins with the value stated
// HTML
...
// CSS
a[href^="https://"] {...}
Attribute Ends With Selector
// Selects an element if the given attribute value
// ends with the value stated
// HTML
...
// CSS
a[href$=".pdf"] {...}
Attribute Spaced Selector
// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated
// HTML
...
// CSS
a[rel~="tag"] {...}
Attribute Hyphenated Selector
// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated
// HTML
...
// CSS
a[lang|="en"] {...}
Source: learn.shayhowe.com
Perhaps you could scan the elements for these classes and add a class that you could style.
For instance, scan all elements with the “a.b” class and then add a new “style-ab” class or some such.
I haven’t posted any example code for this as people may want to use vanilla Javascript or jQuery and it’s a simple enough thing to do.
To clarify, my gaming framework does exactly as the OP described so translations could be applied to certain divs and spans. It’s not a nasty way to decide class names, it’s just useful for people creating markup when using a dictionary that has keys for phrases
Yes you can.
The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.