I have been testing a user acceptance testing using protractor and I have got something uncaught terrible bug ElementNotVisibleError: Element is not currently visible and so may not be interacted with
Build info: version: '2.47.1', revision: '411b314', time: '2015-07-30 03:03:16'
....
Here is the element that I need to refer using protractor.
<button style="" class="button back-button buttons button-clear header-item" ng-click="$ionicGoBack()">
<i class="icon ion-ios-arrow-back"></i>
<span style="transform: translate3d(0px, 0px, 0px);" class="back-text"><span class="default-title hide">Back</span>
<span class="previous-title">Power of Attorney/Authentication</span></span></button
>
I use this protractor syntax to locate this element
var btn = element(by.css('button.button.back-button.buttons.button- clear.header-item'));
btn.click(then(function(){
// I do something with it here
});
The css selector which you have written does not seem correct.
var btn = element(by.css('.back-button'));
btn.click(then(function(){
// Do something
});
Since as per your snippet .back-button looks unique so above code should work.
Other css locators you can also try with:
.button.back-button
.button.back-button.buttons.button-clear.header-item
Related
I want to be able to simply and reliable select these two alert buttons for e2e testing with protractor.
I can't use by.partialButtonText since the text is inside a span element.
<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
<span class="alert-button-inner sc-ion-alert-md">Yes</span>
<ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>
<button type="button" class="alert-button ion-focusable ion-activatable sc-ion-alert-md" tabindex="0">
<span class="alert-button-inner sc-ion-alert-md">No</span>
<ion-ripple-effect class="sc-ion-alert-md md hydrated" role="presentation"></ion-ripple-effect>
</button>
Are they always displayed in that particular order in the DOM?
If that is the case, you could try the following:
const yesButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(0);
const noButton = element.all(by.css('.alert-button-inner.sc-ion-alert-md')).get(1);
Those will get the <span> element.
Additionally, you could try to locate them more precisely with the following method:
const yesButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'Yes'));
const noButton = element(by.cssContainingText('.alert-button-inner.sc-ion-alert-md', 'No'));
I am running E2E on my angular application using Protractor. How to write script for toggle button.
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 41px;">ON</span>
<span class="bootstrap-switch-label" style="width: 41px;"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 41px;">OFF</span>
I can't guess the DOM of your page. Firstly, I'd rather not use xpath. IMHO in protractor by should be lowercase.
I assume that after clicking the element class of span changes.
maybe try sth like that:
const button = element(by.css('span.bootstrap-switch-primary'));
button.getAttribute('class').then((classes) => {
if (classes.indexOf('bootstrap-switch-handle-on') === -1) {
return button.click();
}
}
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
I am using Twitter Bootstraps "dropdown menu" on WordPress for some widget I created and it works fine. But I want to change the icon to "minus" when it drops the content and when another "plus"-icon is clicked the "minus" should close. At the moment it will only toggle the current "plus".
<div class="dropdown toggle-details">
<img src="">
<h3>title</h3>
<h4><subtitle</h4>
<a class="dropdown-toggle my-btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-plus-circle"></i></a>
<ul class="dropdown-menu" >
<li> <h6>item 1</h6></li>
<li><h6>item 2</h6></li>
</ul>
</div>
my script is
jQuery('a').click(function() {
jQuery(this).find('i').toggleClass('fa-minus-circle');
jQuery(this).find('fa-minus-circle').toggleClass('fa-plus-circle')});
You're missing a dot in your jQuery, so right now jQuery is looking for an html element with tag name fa-minus-circle within the "a" element. And obviously not finding it.
jQuery(this).find('.fa-minus-circle').toggleClass('fa-plus-circle')...
actually that probably won't fix it either, because after that statement you'll end up with both classes on the i element. I guess you could work around that with css, but cleaner would be to have the "i" element default to a + icon, and then toggle a more semantic class name like "open".
So css:
i { /* show plus icon */ }
i.open { /* show minus icon */ }
And jQuery:
jQuery("a").on("click", function() {
jQuery(this).find("i").toggleClass("open");
});
Heh - now that I just typed everything out I see what you were doing with that second statement. So yeah, you just need a dot so jquery looks for the classname not the element.
I have been looking everywhere for this without any luck. If you go to google.com on the iphone when you focus in on the search field a little 'x' appears all the way in the right and if you touch it it clears the current value of the field. Anybody know how to accomplish this?
I used the develop menu in Safari and changed the user agent to iPhone. Viewing the source on Google, it looks like they've set their html up like this:
<div class="gp2">
<input class="gp7" id="query" type="text" name="q" size="30" maxlength="2048" autocorrect="off" autocomplete="off" />
<a class="clear" id="clearQuery" href="#">
<img src="data:image/gif;base64,R0lGODlhAQABAID%2FAMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" alt="" />
</a>
and are using this javascript:
function initClearQueryLink(query,clearQuery){
clearQuery.setAttribute("title","Clear");
clearQuery.addEventListener("mousedown",clearQueryBox,true);
query.addEventListener("keyup",_handleClearQueryLink,false)
}
function _handleClearQueryLink(){
var query=document.getElementById("query");
var clearQuery=document.getElementById("clearQuery");
if(clearQuery)
if(query.value.length>0){
clearQuery.style.display="inline";
clearQuery.style.visibility="visible"
} else{
clearQuery.style.display="none";
clearQuery.style.visibility="hidden"
}
}
function clearQueryBox(event){
var query=document.getElementById("query");
var clearQuery=document.getElementById("clearQuery");
query.value="";
clearQuery.style.display="none";
clearQuery.style.visibility="hidden";
hideSuggest();
if(event)event.preventDefault()
}
This is a special type of input developed by Apple and not approved by the W3C. If you use it, it works fine on browsers that don't recognize it.
<input type="search" name="q" />
There are other parameters, including domain name and search results so the user can use their search history. Google for how to use those.
The trick is to listen for/bind event on mousedown that way the click event never fires and your input element doesn't lose focus. As in the google example above.
A really good resource for iPhone web development is iphonewebdev.
However it seems like this particular feature is not part of Apple's API (at least from my research), rather a pure javascript / css implementation.
You can re-create it with something like this:
<script>
window.onload = function() {
var btn = document.getElementById("clear_input");
btn.onclick = function() {
var div = btn.parentNode;
var input = div.getElementsByTagName("input")[0];
input.value = "";
return false;
}
}
</script>
<div>
<input type="text" />X
</div>
You should style the X to be an image so that it blends inside the input. And of course I strongly recommend using a JavaScript framework if you can.
Jquery mobile provides this:
http://jquerymobile.com/test/docs/forms/search/
And this is my jQuery version, it hides it at the start, and if the user deletes what is typed it will remove the 'x'. Also when they have removed the text with the button it will hide the 'x' too.
html:
<input type="search" name="search" id="search" />
X
JavaScript:
$('.clear_input').hide();
$('#search').keyup(function() {
var search = $(this).val().replace(/^\s+|\s+$/g,"");
if (search.length >= 1) {
$('.clear_input').show();
} else {
$('.clear_input').hide();
}
$('.clear_input').click(function() {
$('#search').val('');
$('.clear_input').hide();
});
});
The JavaScript version is faster than the jQuery version of course.