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();
}
}
Related
I am trying to click a button which is displayed/visible/present.
When doing it manually, user was able to click the button.
If the test was executed, you will notice that it is trying to click the button, but nothing is happening.
I also tried to put a very long wait and tried to click it manually during automation.
But, when clicking it, nothing also happens.
I cannot share the site since it is in a proxy.
This is the HTML of the button and it looks normal:
<a class="x-btn x-unselectable x-box-item x-toolbar-item x-btn-default-small" style="min-width: 75px; right: auto; left: 328px; top: 0px; margin: 0px;" hidefocus="on" unselectable="on" role="button" aria-hidden="false" aria-disabled="false" id="button-1011" tabindex="-1" data-componentid="button-1011">
<span id="button-1011-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-small ">
<span id="button-1011-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-small x-btn-text x-btn-button-center ">
<span id="button-1011-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-default-small " style=""></span>
<span id="button-1011-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-small">Save</span>
</span>
</span>
</a>
Code:
global.elmCBSave = element.all(by.cssContainingText('span', 'Save')).last();
it('should click the Save button.', function() {
global.elmCBSave.click();
});
I also tried using browser.executeSrcipt, this is working when executed thru console:
browser.executeScript('$(".x-btn-inner.x-btn-inner-default-small:eq(3)").click()')
There are a few things you can try.
Be sure to pass done into your callback and handle the returned promise from the click event
it('should click the Save button.', function(done) {
global.elmCBSave.click().then(function(){
done();
});
});
Also, I tend to put an expected condition to wait for element to be clickable: http://www.protractortest.org/#/api?view=ProtractorExpectedConditions.prototype.elementToBeClickable
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be clickable.
it('should click the Save button.', function(done) {
browser.wait(EC.elementToBeClickable($('#abc')), 5000).then(function(){
global.elmCBSave.click().then(function(){
done();
});
});
});
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
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 HTML similar to this :
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<Div class="blackBox" style="visibility:hidden;"></div>
<Div class="SubFotm" style="visibility:hidden;"></div>
</div>
Now I can properly find the trigger for my button click in my script, but I'm not able to target only the closet blackbox to turn it visible.
Currently I'm doing :
if (PButtonName=="Fermer") {
$(this).closest("div .ProfileForm").remove(); // Closing Profile Form
} else if (PButtonName=="plusAdresse") {
alert('In');
$(this).closest("div .BlackBox").css("visibility","visible");
}
I can get the alert "In" to show, but not the BlackBox
If I change the
$(this).closest("div .BlackBox").css("visibility","visible");
for :
$("div .FormBlackBox").css("visibility","visible");
It will show, but will also show all the black box in the document.
If you are using the above HTML, or something similar, I would do it using a reference to the parents.
instead of:
$(".MainForm").closest("div .BlackBox").css('visibility','visible');
use
$(this).parents('.MainForm').children('.BlackBox').css('visibility','visible');
This is assuming you have more than one MainForm div and they all have a single child with the BlackBox class.
here is an example.
Instead of what you have done just add styles display:none; to your divs and then show them whenever you want.So you can do this as below:
<div class="MainForm">
<form name="FromName">
<button name="Button1"></button>
...
...
</form>
<div class="blackBox" style="display:none;"></div>
<div class="SubFotm" style="display:none;"></div>
</div>
and then in your script
if (PButtonName=="Fermer")
{
$(".MainForm").closest("div .ProfileForm").remove(); // Closing Profile Form
}
else if (PButtonName=="plusAdresse")
{
alert('In');
$(".MainForm").closest("div .BlackBox").show();
}
And I will recommend you using Switch case instead of loops at this place.
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.