I'm trying to find an element which is a button and click on it in protractor but I'm getting an error element is not visible.
<li data-ng-repeat="dog in dogs">
<button type="button" name="dog1" class="dog1">></button>
<button type="button" name="dog2" class="dog2">></button>
<button type="button" name="dog3" class="dog3">></button>
<button type="button" name="dog4" class="dog4">></button>
</li>
When I use ptor.findElement(protractor.By.className('dog1')).click();
I'm getting an error element is not visible.
I tried
var dog;
dog = ptor.findElements(protractor.By.repeater('dog in dogs')).then(function(rows) {
rows.forEach(function (row) {
row.getText().then(function (rows) {
console.log(rows);
});
});
});
and I print the rows but I still cannot click on the nested element.
I use protractor Version 0.12.1
Any idea how to click on that nested element? Thank you
Just use css grammar for this (as in Richards comment):
element(by.css('li:nth-child(3)>.my-class'));
Related
I'm trying to click on a button based on the sibling text.
<li ng-repeat="list in lists" ng-if="!includes(list)" class="ng-scope">
<span class="ng-binding">
<button type="submit" class="btn btn-primary" ng-click="useList(list)">Use</button>
test
</span>
<span class="ng-binding">
<button type="submit" class="btn btn-primary" ng-click="useList(list)">Use</button>
test2
</span>
</li>
As shown in the above code, based on test or test2 I want to click on the button accordingly. How can I achieve that?
I'll write some code that takes takes a variable myText and clicks the button; this should work no matter how many span elements you repeat as long as they are in the format shown in your question.
let buttons = element.all(by.css('button'));
for (var button in buttons) {
WebElement parent = (WebElement) ((JavascriptExecutor) driver).executeScript(
"return arguments[0].parentNode;", button);
if (parent.getText() == myText) {button.click()};
}
Try the below one
select(text:string){
const ele = element.all(by.css('li > span > button');
for(i=0;i< ele.count();i++){
if(ele.get(i).getText() === text){
ele.get(i).click();
}
}
Pass the value of the button you wish to click to the above function.
Hope it helps you
I am trying to create an xeditable form as demonstrated here: https://vitalets.github.io/angular-xeditable/#editable-form.
I have followed the instructions exactly but my form is not working. I want to save a resource, but when I click the Edit button, which should display the form, it seems to skip the editing stage and immediately triggers the saveResource function - which should only happen when the form gets saved.
I've compared my code to the documentation again and again and can't work out what I am doing wrong.
HTML
<form editable-form name="editResourceForm" onaftersave="saveResource()">
<p>
<strong editable-text="resource.title" e-name="title">
{{resource.title}}
</strong>
</p>
<div class="col-xs-12 col-sm-4">
<button ng-click="editResourceForm.$show()" ng-show="!editResourceForm.$visible">Edit</button>
<!-- buttons to submit / cancel form -->
<span ng-show="editResourceForm.$visible">
<button type="submit" class="btn btn-primary" ng-disabled="editResourceForm.$waiting">Save</button>
<button type="button" class="btn btn-default" ng-disabled="editResourceForm.$waiting" ng-click="editResourceForm.$cancel()">Cancel</button>
</span>
</div>
</form>
JS
app.controller('Ctrl', function($scope, $filter) {
$scope.resource = {
title: 'awesome resource'
};
$scope.saveResource = function() {
console.log("Save resource");
}
});
JSFIDDLE HERE
You can see that it is trying to save the form, because every time the Edit button is clicked, the console logs "Save resource". This should not happen when the edit button is clicked.
#ckosloski answered this on Github:
I think it's because your edit button does not specify a button type.
By default, the button type is submit. So you are clicking on the
button and it's submitting the form since it's a submit button. Try
adding type="button" to your edit button.
Adding this solved it, as you can see from the updated JSFiddle.
I was surprised about the icon wasn't shown when I'm put the attribute translate in the button with glyphicons (no glyphicons is fine!!).
My index.html
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My app.js
app.config(function ($translateProvider) {
$translateProvider.translations('th', {
HEAD: {
CART: 'ตะกร้า'
}
});
$translateProvider.translations('en', {
HEAD: {
CART: 'Cart'
}
});
$translateProvider.translations('cn', {
HEAD: {
CART: '大車'
}
});
});
It's OK for the menu, but the button not displaying bootstrap-glyphicons but also show wrong position of label as in the following image.
Right now, I have not enough reputations to post image, I draft you a layout the menu and the cart button like this
menu --> Product | Webboard | Payment | About us [ (Cart) Cart ] <---- button (EN)
menu --> สินค้า | เว็บบอร์ด |การชำระเงิน| เกี่ยวกับเรา [ (ตะกร้า) Cart ] <---- button (TH)
I hope it can display bootstrap-glyphicons and the label is shown in appropriate position something like
[ icon (0) ตะกร้า ] or [ icon (0) Cart ]
The problem is that the directive translate="HEAD.CART" from angular-translate replaces the innerHTML of the element that is being applied to, thus you lose the <span class="glyphicon"></span> inside the button.
A workaround is to use another span as translate directive on a inner element, inside of the wrapping element. For instance:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal">
<span class="glyphicon glyphicon-shopping-cart"></span>
({{ROLineList.length}}) <span translate="HEAD.CART"></span>
</button>
This approach has a better performance than using the filter, because it doesn't set any additional watchers (see the docs).
You might also consider using variable replacement when you have inline values.
Update!! I've changed from using attribute
translate="HEAD.CART"
in to use {{'HEAD.CART' | translate}} instead.
my old code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" translate="HEAD.CART">
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) Cart
</button>
My new code snippet:
<button id="CartButton" class="btn btn-success" data-toggle="modal" data-target="#CartModal" >
<span class="glyphicon glyphicon-shopping-cart"></span> ({{ROLineList.length}}) {{'HEAD.CART'| translate}}
</button>
Finally, It works great right now.
Thanks.
I'm trying to remove an element inside ngRepeat. It's removing well, but after the element is removed, the page is reloaded. How can I prevent this reload action?
Heres the code:
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button ng-click="remove($index)">Click me</button>
</li>
js scope:
$scope.remove = function($index){
$scope.tasks.splice($index, 1);
}
As per the W3C spec, the type is undefined and it's assuming a submit. Adding type='button' should resolve the issue for you.
<li ng-repeat="task in tasks">
<p>{{task.title}}</p>
<button type="button" ng-click="remove($index)">Click me</button>
</li>
Relevant specification if you're curious.
<button> was acting like a submit (thanks to #Antiga), I tried to change it to input[type=button] but still didn't work.
I just made this change:
<button ng-click="remove($index)">Click me</button>
to:
<a ng-click="remove($index)">Click me</a>
And it worked well.
I'm creating a web app using AngularJS + Twitter Bootstrap and Bootstrap-UI. When I place a tooltip on a button, it shows as expected; but if the button gets disabled (by the underlying controller) after being clicked, and the tooltip was being shown, the tooltip is not hidden and stays there forever. Here's a repro:
Plunker: http://embed.plnkr.co/numlaAuLOxh3a03Z7O85/preview
Just hover the button to make the tooltip appear, and then click it. The button is disabled, and the tooltip stays there. How can I avoid this behavior and have my tips correctly hidden?
I found that using simply replacing buttons with anchor tags worked perfectly for me.
<a role="button" type="button" class="btn btn-danger"
ng-click="someAction()" tooltip="Tooltip" ng-disabled="isDisabled">
<span class="glyphicon glyphicon-minus"></span>
</a>
Searching through GitHub issues I found the suggestion (seems to be related to the issue opened by you?) to use wrapping element that has a tooltip around the element: http://jsfiddle.net/RWZmu/
<div style="display: inline-block;" tooltip="My Tooltip">
<button class="navbar-btn btn-danger" ng-click="test()" ng-disabled="isDisabled" tooltip="Here's the tip">
<i class="glyphicon glyphicon-forward"></i>
</button>
</div>
Use the following logic here
HTML
<div ng-app="someApp" ng-controller="MainCtrl"
class="likes" tooltip="show favorites" tooltip-trigger="mouseenter"
ng-click="doSomething()">{{likes}}</div>
JS
var app = angular.module('someApp', ['ui.bootstrap']);
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'mouseenter': 'mouseleave',
'click': 'click',
'focus': 'blur',
'hideonclick': 'click'
});
}]);
app.controller('MainCtrl', function ($scope) {
$scope.likes = 999;
$scope.doSomething = function(){
//hide the tooltip
$scope.tt_isOpen = false;
};
})
Souce
Hide angular-ui tooltip on custom event
http://jsfiddle.net/3ywMd/10/