I'm writing some automated tests on an AngularJS application. I'm trying to click a button but whatever method I try and use, Selenium refuses to find the element.
<div class="row" _ngcontent-c24="">
<div class="column-12 column-center" _ngcontent-c24="">
<div class="buttons column-center" _ngcontent-c24="">
<div class="buttons-container-centred tablet-up" _ngcontent-c35="">
<div _ngcontent-c35="">
<kf-button _ngcontent-c35="" btnstyle="secondary no-outline btn-big" _nghost-c8="">
<button class="secondary no-outline btn-big" _ngcontent-c8="" title="" type="">
<span _ngcontent-c8="">Use a demo room</span>
</button>
</kf-button>
<span _ngcontent-c35="">Instant access</span>
</div>
This is html around the button - button text is "Use a demo room"
I've tried:
element(by.xpath(" full path from FirePath ").click()
element(by. buttonText("Use a demo room").click()
element(by.xpath('//span[#ngcontent("Use a demo room"]')).click
...to mention a few.
Usual error message stating the element cannot be found once the timeout is reached.
Other similar buttons work fine with a full xpath.
Would be really grateful for advice!
Thanks
David
Related
I am making a angularjs app and in this I have a list of users coming fromng-repeat. Now whenever I click on any user a new div box opens. But the problem is that there are multiple boxes opening for the same user and I want only one box for one user.
I tried using ng-if but failed.
I am sharing my code, please check it and provide solutions, thanks in advance.
Code from List of user are coming :
<div class="people">
<div ng-repeat="user in vm.otherUsers | filter : vm.search">
<div directive class="person" ng-click="vm.activateChat(user);bubble=true;" id="chat_{{user.id}}" ng-disabled="true">
<img alt="" />
<span class="name" >{{user.firstName}} {{user.lastName}}
<span ng-if="!bubble && user.counter>0" class="noti_bubble">{{user.counter}}</span>
</span>
</div>
</div>
</div>
and on click activateChat opens the new box for that user.
Code for the box is:
<div ng-repeat="chatUser in vm.multipleUsers">
<div class="msg_box" id="d_{{chatUser.id}}">
--box content--
</div>
</div>
Note: Only one box should open for a single user
You could keep a list of opened boxes per userId in your controller. Then add a function to your controller that you can use in an ng-if or ng-class to show a non-clickable version of your div. Use the same list to check if you should open a new modal in vm.activateChat()
I am wondering, I did not find carousel component in Semantic UI.
I feel it is very common and useful component.
I know one option OWL Carouse. I do not want to use jQuery, though for Semantic UI I will just include jQuery. Rest of the things I want to achieve via Angular.
I need to know the possible options without writing jQuery code.
Semantic UI evidently does not currently have a carousel module, and it is an open issue.
There are, however, some small snippets on that page that can achieve what you'd like to. See slick and Swiper.
Here is another alternative.
fotorama.io
yes there is no carousel in Semantic UI at moment but you can use cards somewhat similar here is one I found to be closest to bootstrap carousel;
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="/images/avatar/large/jenny.jpg" class="visible content">
<img src="/images/avatar/large/elliot.jpg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
hope this helps,
cheers.
Here is the link you can create a coursel in semantic ui.
https://codesandbox.io/s/43pv7wm6n9
Hopefully it will help you.
using ng-bind-html in cordova app trying to open external link .
I have installed InAppBrowser plugin
Then i have followed the exact steps from the following
https://gist.github.com/rewonc/e53ad3a9d6ca704d402e
The code with the filter gets executed and the link in it gets changed that is href to window.open code.
But when i click on the link nothing happens.
Anything else i am missing ?
Below is the html that used the ng-bind-html
<div class="card" ng-if="extendedDescription">
<div class="item item-divider">
Ext Description
</div>
<label class="item item-text-wrap">
<span ng-bind-html="extendedDescription">
</span>
</label>
</div>
The span element was wrapped inside the label element because of which none of the events were fired changed
the <label to only contain <span
After clicking on the accordion element, the accordion panel opens, but the expect() in the following code passes even though the desired panel has been expanded (aria-expanded="true"). I am trying to verify the correct panel has been opened. I am new to protractor - any help will be appreciated.
var el = element(by.css('#brainstormingLink'));
el.click().then(function(){
browser.sleep(1000).then(function(){
expect(element(by.css('#BrainstormingAccordion[aria-expanded="false"])).isPresent());
});
});
The HTML is as follows:
<h3 id="brainstormingLink" class="menuSectionLink ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top" sectionnum="1" role="tab" aria-controls="BrainstormingAccordion" aria-selected="true" tabindex="0">Brainstorm</h3>
<div id="BrainstormingAccordion" class="accordion-inner scrollable ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" aria-labelledby="brainstormingLink" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 282px; overflow: auto;">
Follow these steps to brainstorm ideas:<br><br>
<ol>
<li>Use the add idea button <div class="toolbarButtonIcon inlineIcon"><div id="icon-plus"> </div></div> to enter one idea, fact, or opinion about your topic that you think might be useful.</li>
<li>Continue using the add idea button <div class="toolbarButtonIcon inlineIcon"><div id="icon-plus"> </div></div> to add as many ideas as you can.<br><br>
<div class="buttoncenter"><button class="btn btn-custom" type="button" name="brainstorming" title="brainstorming"> about brainstorming</button></div>
</li>
</ol>
</div>
Your test always passes because you didn't complete the assertion in the expect statement. .isPresent() returns a boolean so you need to finish it with whatever you are expecting the result to be i.e .toBe(false) or .toBeTruthy() etc.
Just note that isPresent is really asking if that element is present in the page, if you want to know if it's currently visible to a user then use .isDisplayed(). Also, since that element has an ID, I think you're better off locating it that way like you did with the first element, the HTML attribute isn't necessary unless you had trouble locating it. I always use ID when it's available because they're unique.
List of available assertions here: http://jasmine.github.io/2.0/introduction.html
I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.
Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.
<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">
<div class="content">
<button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
<button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
</div>
<div class="slide-from-left">
<p>Here is information that slides from off screen left.</p>
</div>
<div class="slide-from-right">
<p>Here is information that slides from off screen right.</p>
</div>
</div>
Set up the ng-class syntax like this for what you want:
<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">
Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:
ng-class="['even', 'odd'][$index % 2]"