Sometimes my user reports that accordion in my application is not working . So i want test whether the accordion is working or not working. I am using Angular js in frontend. Currently i am testing using protractor e2e framework.
My accordion markup looks like
before clicking the accordion division
<div id="accordion"></div>
after click
<div id="accordion-expand">
so the change is id
I find difficult while identifying css change in protractor. is there any other way to test this?
Try this:
// Given
var accordion = element(by.id('accordion'));
expect(accordion.isPresent()).toBeTruthy();
// When
accordion.click();
// Then
expect(accordion.isPresent()).toBeFalsy();
expect(element(by.id('accordion-expand')).isPresent()).toBeTruthy();
Hope this helps.
Related
the angular md-menu-bar demo shows a nested Menu under new. Check the code from the demo on codepen here: https://material.angularjs.org/latest/#/demo/material.components.menuBar
As you can see, from the codepen, the nested menu opens on hover, but in the HTML you can see the button element has a ng-click="$mdOpenMenu()" function. I cannot see how to this even works. Am also failing to get the side arrow to appear for the submenu.
Are people able to replicate this demo? My code is a follows:
md-menu-bar
md-menu(md-position-mode="target-right target", md-offset="0 40", width="4")
button.ts-chart-icon.refresh-icon.glyphicon.glyphicon-certificate(ng-click="$mdOpenMenu()", md-menu-origin)
md-tooltip(md-delay="0") Add Overlay
md-menu-content.ts-menu-content(width="5")
md-menu-item(md-menu-align-target)
md-button(disabled="disabled", ng-if="!chartConfig.series") Add 50D Moving Average
md-menu.nested-menu(ng-if="chartConfig.series")
md-button(ng-click="$mdOpenMenu()") Add 50D Moving Average
md-menu-content(ng-show="chartConfig.series", width="5")
md-menu-item(ng-repeat="s in chartConfig.series")
md-button(ng-click="handleAdd50DMA_(s)") {{ s.name }}
I upgraded from angular-material 0.10.1 to 0.11 and it is working fine now.
I have an accordion (expandable / collapsible) using Angular UI Bootstrap which has three panels.
I don't want the user to be able to open multiple panels at a time. The documentation give this option
<accordion close-others="oneAtATime">
With this in the controler
$scope.oneAtATime = true;
But I'm still able to open multiple panels at a time. What am I missing?
use it like this
<accordion close-others = "true">
</accordion>
Check this plunker
If these changes are not giving you expected results, then something else is not correct in your program, check the dependencies and create a plunker and post the link
I am building an app with Ionicframework in which I have a modal with a list of directives. I am now writing some protractor E2E tests and all was going well until I had to click on one of the directives.
The error I get is:
UnknownError: unknown error: Element is not clickable at point (185, 212). Other element would receive the click: <div class="modal-backdrop active">...</div>
This could have something to do with the animation of the modal sliding in, so I found this 'solution':
it 'is very annoying', ->
members = element.all(By.css('member')) # The directives are: <member >
EC = protractor.ExpectedConditions
if members.first()
browser.wait(EC.elementToBeClickable(members.first()), 5000).then ->
element.all(By.css('member')).each (member) ->
member.click()
I still get the error however.
'Tricks' like browser.sleep(2000) have also not worked so far.
Does anyone know how I can get it to work?
As always when asking a question like this you are forced to cut down everything to the basics and start thinking out of the box (at least your own box).
The solution:
element(By.cssContainingText('member .member-name', "Mark Twain")).click()
This is because Angular pops-out a div from the directive and binds all events on this. .member-name is a p inside of the member and clicking that apparently does the trick.
:)
I'm trying to use protractor to implement some e2e tests.
I'd like to simulate user interaction with the autocomplete typeaheaded control.
I can't find a way to select (click) one element from the autocomplete list.
Some suggestions?
I'm using AngularJSv1.3.3 and Bootstrap v3.3.0.
This worked for me:
// type into the typeahead
element(by.model('job')).sendKeys('123');
// uib-typeahead uses match in matches...
element.all(by.repeater('match in matches')).get(0).click();
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?