I want to click on below link in a page with several other links like this one.
I have tried cy.get() with a number of alternative ways. I also tried cy.contains('Content 6') but received an error.
<div class="column">
<a href="/admin/contents/109">
<div class="ui segment">
<div class="ui center aligned header">
Content 6
<div class="sub header">Add description to content packages
</div>
</div>
</div>
</a>
</div>
This was my final solution:
cy.get('a[href*="admin/contents"]').contains('Content 6').click()
I found the solution on this page and with help from user called Udo: https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-get-an-element’s-text-contents
The href code gives more example on how to handle this problem then other examples for same problem.
you have to "get" the correct element to click on. in your case it could be handled like this:
// find the link with href attribute containing "admin/contents" and click it
cy.get('a[href*="admin/contents"]').click()
Related
I am displaying the list of incidents on the page using AngularJS.(It works)
I also have 3 buttons on the page. 'Open'-shows open incidents, 'Closed' -shows closed incidents, 'All' -shows all incidents.(It works)
Issue: when I try to set the page default to show only "Open incidents", when the users opens the page.
Note: By using below code, I am able to set the page default to "Open incidents", when the list have 1 incident. But, if it have more than 1 incident, the code is not working and showing empty page.
I am putting the total code in plunker. As I am using this code in a Tool, it is not possible to run this code in plunker. The tool have separate script to get all the incidents in JSON format. I am also attaching the JSON format in JSON file. Any help would be appreciated. Thank you.
<div class="myRequests">
<div class="row" ng-repeat="inc in IncItems | filter:{status: IncStatus}">
<div class="panel panel-default {{inc.status}}">
<div class="panel-heading">
<h4 class="panel-title">{{inc.number}}</h4>
</div>
<div class="panel-body">
<div class="col-md-3 pace">
<p><b>Status:</b> {{inc.status}}</p>
<p><b>State:</b>{{inc.state}}</p>
</div>
</div>
</div>
</div>
</div>
Plunker: My code
I'm working on a project where the client has supplied a pile of html where I need to plugin the data from our database and have hit a problem that I'm finding difficult to solve....
So first problem is with routing
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information collapse">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
he has supplied some javascript to handle the click on class-overview
$('.class-overview a').on('click',function(e) {
e.preventDefault();
});
$('.class-overview').on('click',function() {
$('.class-overview.active').removeClass('active').next('.class-information').collapse('hide');
$(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show');
});
and i have a line like this in my state provider
// default route
$urlrouterProvider.otherwise("/")
So the problem is that the ui-router handles the click and sends me back to the home page.
The ideal solution is to leave as much of his markup intact, so can anyone tell me how I stop ui-router handling the click?
or failing that, how I might use ng-click and ng-show to get the same effect, i.e. hiding and showing the class-information div...
If I understand well your question, you want to display the .class-information div when you click on the .class-overview element.
That can be done by using a variable in a ng-show like this:
<div ng-repeat="class in vm.classes">
<div class="class-overview">
<a href="#" ng-click="display = !display">
<span class="class-title">{{class.description}}</span>
... more stuff here
</a>
</div>
<div class="class-information" ng-show="display">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
</div>
The display variable will be falsy when you land on the page, therefore the ng-click will be executed, this variable will be set to true.
I see that you are using a collapse class to hide the content if it is collapsed. Then you could use angular ng-class to put the collapse class when the display variable is false. Your div.class-information would look like this:
<div class="class-information" ng-class="{collapse: !display}">
<div class="full-width">
{{class.longDescription}}
</div>
</div>
I have a bootstrap modal given below, which is inside an angular contoller registrationCtrl, which pops up if re-registration is attempted. There is a LOGIN link at the footer of modal, however when I click the link, only the url in browser's addressbar changes. But the page does not navigate to /login, as it is supposed to.
<div class="modals">
<div id="registered" tabindex="-1" role="dialog" aria-labelledby="registeredModal" aria-hidden="true" class="modal fade">
<div class="modal_container">
<div id="modal-head"><span>Already Registered</span></div>
<div class="modal_body">
...
</div>
<div class="modal_footer">
<div id="notice"><span>*Please login to continue or cancel to register with different </span></div>
<div class="buttons button-toolbar">
<div class="login btn-vert-block">
<span>LOGIN</span>
<div class="cancel btn-vert-block"> <!--the link that is not working-->
<span>
<button type="button" data-dismiss="modal">CANCEL</button>
</span>
</div>
</div>
</div>
</div>
The modal works perfectly when used as an independent html. What am I missing here?
The link problem was in whole html page and not exclusive to the modal. I found out the problem arose from setting the html5Mode to true:
angular.module("MyAPP",[],function($locationProvider){
$locationProvider.html5Mode(true);
});
The link navigates if we put target='_self' in the anchor tag. I found the solution from here. But I couldnt find the actual reason and explanation. If someone can give me the explanation that would be great help, as I am an angular beginner.
I am trying to put href link to slider images and text in ion-slide.
Here is the code of mine.
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs">
<div class="box">
<a ng-href="#/menu/tab/featured-post/{{post.id}}" style="text-decoration:none;">
<img src="{{img.url}}" ></img>
<p class="prodblk2" ng-href="#/menu/tab/featured-post/{{post.id}}" >
{{img.title}}
</p>
</a>
</div>
</ion-slide>
</ion-slide-box>
The link is appearing, but its not working when I click on it. I guess, the ion-slider properties like sliding or dragging overriding the mouse actions.
I tried ng-href and even ng-click by adding some JS function.
I hope nothing wrong about the code. I think, I need to add some property to the ion-slide tag.
I searched for similar questions but I haven't found. If anybody knows it please help me.
Thanks in advance.
I end up with the same problem as you, my solution was to use ng-click on the ion-slide directive, because in there it will fire up.
So you can create a method, pass the id's you need as parameters and then handle the route in the controller. Here's my solution for your problem:
HTML:
<ion-slide-box ng-show="!cloading">
<ion-slide ng-repeat="img in simgs" ng-click="slideClick({{post.id}})">
<div class="box">
<a style="text-decoration:none;">enter code here
<img src="{{img.url}}" ></img>
<p class="prodblk2 >
{{img.title}}
</p>
</a>
</div>
Then create some method on your controller using $location to go to your URL.
JS:
$scope.slideClick = function(postId) {
$location.path("/menu/tab/featured-post/" + postId);
}
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]"