I have following dom .I need to find the element (::before). This before represents loading spinner . My element will be visible when this loading spinner is invisible .
<h3 class="text-center">
::before
</h3>
I am able to identify till h3 but not able to get this *:: before *.only :: before the part which goes from DOM once spinner is gone & my element is visible.
I have tried different xpath axes bit not able to reach this element
Unfortunately, pseudo-elements like ::before do not really exist in the DOM tree (hence the name), and therefore they cannot be selected using XPath. You need to use a CSS Selector instead:
console.log(
window.getComputedStyle(
document.querySelector('h3'), ':before'
)
);
/* Add a heart before h3 */
h3::before {
content: "♥";
}
<h3 class="text-center">
H3
</h3>
And then use a JavascriptExecutor to inject the JS into the browser and [get the return value][1]:
String script = "return window.getComputedStyle(document.querySelector('h3'),':before').getPropertyValue('content')";
JavascriptExecutor js = (JavascriptExecutor)driver;
String content = (String) js.executeScript(script);
Related
I want to fade in an element using a javascript tween library. When loading the Sveltekit page for the first time, the DOM elements I want to animate flashes for brief moment before onMount kicks in and I can hide it with javascript, and tween it like I want.
This flashing effect is not desired.
It is possible to hide this with using the following code:
<script>
import { onMount } from 'svelte';
let ready = false;
onMount(() => ready = true);
</script>
<div class="always-visible">
{#if ready}
<div class="visible-on-mount">...</div>
{/if}
</div>
But this will hide the content permanent if the browser does not support javascript. I want the content to appear when javascript is not available.
Can not identify button which inside the ShadowRoot in protractor.
I have tried using deepCss as follows,
this.startNowButton = element(by.deepCss('button[class="apply-now"]'));
But I am getting
NoSuchElementError: No element found using locator: By(css selector, * /deep/ button[class="apply-now"])
Is this the correct way to identify the elements inside the ShadowRoot for Protractor? Thanks
my HTML page is similar to as follows,
<div id="modal">
<div class="push-wrap">
<header id ="site-header">
<hmy-cms-header class="hydrated">
#shadow-root (open)
<header>
<div class=notification-banner> ... </div>
<div class="ca">
<button class="apply-now">"Apply"<span>now</span>
The pull request https://github.com/angular/protractor/pull/4786 is not yet merged. I have implemented the suggested workaround (https://github.com/angular/protractor/issues/4367) and then it worked.
Try the below locator options
1. const ele = element(by.css(div.ca>button.apply-now));
2. const ele = element(by.buttonText('Apply'));
If normal click does not works for you, Try the below executor to perform click on the button
await browser.executeScript("arguments[0].click()", ele);
There has been issues with deepcss locator and it doesn't work as expected but there is work around for finding element in shadow DOM. Refer following link for other way of finding shadow dom element.
Protractor - shadow DOM
In my Ionic 2 app I have a template with this code:
<div class="body" [innerHTML]="ticket.Body | safeHtml"></div>
The body is HTML that is returned from a remote API. That HTML can contain images. I want to bind a "click" event handler on those images so that I can open them in an InAppBrowser when a user taps on them.
What would be the best way to do that?
Angular 4.1.3, Ionic 3.3.0
Solution 1
Try binding an event on to the parent to capture clicked target elements.
// HTML file
<div class="body" [innerHTML]="ticket.Body | safeHtml" (click)="bodyDivClick($event)" >
</div>
// TS file
bodyDivClick(event) {
// Check if the clicked target is an Image element.
// You can also check by css class name for specific image elements.
if (event.target && event.target.tagName === 'IMG') {
let imageElem = event.target;
console.log('Image clicked');
}
}
Solution 2
You can also try using ngFor to loop your results (images) into view and bind an event on the image itself.
Assuming that ticket is a JSON parsed object retrieved from the remote API.
<div class="body">
<div *ngFor="let imageUrl of ticket.images; let i = index;" class="image-container" >
<img src="{{imageUrl}}" class="image-style" (click)="imageClick()" />
</div>
</div>
Most probably the first solution might work for you if you are not able to change the response of the Remote API from html to JSON/objects (if it's not implemented by you).
My html:
<div id="contentDiv">
<div id="headerDiv" ><div id="titleDiv"> Queries</div></div>
<div id="valuesDiv" ><div id="yearDiv"> 2015</div></div>
<div id="graphDiv" ><div id="chartDiv">graph</div></div>
</div>
Like this div, I have another div but the content in the div is different.
How to add a new div horizontally when I click on hyperlink using angularjs?
How can I do this? please help me out regarding this
Looks like what you need is a two way binding with the ng-model directive. So the idea would be that you bind the new div to a variable in your scope which is initially in an empty or undefined state (for example, there are better ways). When the hyperlink is clicked it calls the function specified by an ng-click directive which will fill your bound object, which in turn will cause the new div to be rendered.
EDIT:
Based on your comments here is a simple example.
HTML page:
<div id="newDiv" ng-repeat="item in items">
<!-- Div content -->
<!-- example -->
<input type="text" ng-model="item.name">
</div>
<input type="button" ng-click="addItem()">
Controller:
$scope.items=[];
$scope.addItem = function() {
var newItem = {};
newItem.name = "new item name";
$scope.items.push(newItem);
}
What's happening here is the data for each div is stored in an array of objects. The ng-repeat directive will repeat the div for each object in the array. You can then fill the elements in the div using the object. Adding a new div is as simple as adding a new item to the array and angular will take care of the rest for you. Please note that I have not tested this example, but hopefully it's enough to point you in the right direction.
RE aligning the divs horizontally, this will be done with CSS, using the inline-block display mode. So you could give the div a class of, for example, "horizontalDiv" and add the following class to your CSS file:
.horizontalDiv {
display: inline-block;
}
I have a React component that renders some html like below, with one callback method (this.deleteItem) triggered upon click of an x. In the callback method, I try to get the content associated with each of the two refs like this
var date = this.refs.date.getDomNode.value;
var content = this.refs.content.getDomNode.value;
but the result is undefined in both cases. When I simply do this.refs.content.getDomNode (instead of looking for the value) it shows me a div with some span tags inside, and inside of one of those is the content I was seeking. Similarily with the date ref, it is a <small></small> element with spans inside.
Question: how to get the value/content from a div or element when react wraps content in spans?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date"> {date} </small>
<div ref="content"> {content } </div>
</div>
This is a known limitation of react, in that it wraps any floating text nodes in a span because it has to handle the data-reactid of the component. See this question too.
Perhaps if you tried to remove the white space around the content?
<div ref="wrapperdiv">
<span className="delete" onClick={this.deleteItem}>x</span>
<small ref="date">{date}</small>
<div ref="content">{content}</div>
</div>
Also try:
this.refs.content.getDomNode().children[0].textContent
to get the value of the span. (Not sure if there is a react specific function for this). This will have to be done as well as removal of the white space within:
<small ref="date">{date}</small>
<div ref="content">{content}</div>
This is important because react generates span tags to handle the data-reactid. Take a look at: Rid of repeated spans in React.js?.