click on hyperlinks in unit testing using protactor in angularjs - javascript

I am new in unit testing in angularjs. I read the tutorial from:
https://github.com/angular/protractor/blob/master/docs/tutorial.md.
I want to click on hyperlink but i dont know how can i achieve this.
Here is my code:
<li ng-repeat="menu in sidebarLinks" ng-if="menu.visible == true " ng-class="{active: isActive('/{{menu.action}}')}">
<a ng-href="#/{{menu.action}}" title="{{menu.name}}" ng-click="loadSubmenus(menu.action)" ng-class="{active: isActive('/{{menu.action}}')}">
<div class="icon {{menu.icon}}" ng-class="{active: isActive('/{{menu.action}}')}"></div>
<span>{{menu.name}} </span>
</a>
</li>
In unit testing:
describe('Protractor Demo App', function() {
browser.driver.get('https://localhost:8443/login.html');
browser.driver.findElement(by.id('name')).sendKeys('test');
browser.driver.findElement(by.id('password')).sendKeys('test');
browser.driver.findElement(by.id('login')).click();
});
After login url is https://localhost:8443/#/dash
After click on link url should be https://localhost:8443/#/hypera

Since your links won't work for anyone else because you're running it locally on your machine, I can only tell you the best way to do it.
If you're dealing with hyperlinks, you need to get the element that you've set with 'login'. I'm not seeing it in your HTML snippet so I can't give you the correct path.
If it was a basic hyperlink, you could find it easily by using something like:
element(by.linkText('login')).click()
If your login button's text is indeed 'login'. If it is something else, like a button, you'll need to find the exact element and it will look like:
element(by.css('span[class="login"]')).click()
If your login button is under a 'span' tag in your HTML page.

Related

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.
This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

AngularJS: Creating a class that I can use in my app.js file to use hyperlink pictures

In my app.js file I have classes that are data driven, such as text and picture classes. I have a hyperlink class for which I used Href that looks like this:
div class = "links" ng-if="field.fieldLink">
<a ng-if="content.LinkField.fieldLinkNewTab !== false" target="_blank"
ng-href="{{ content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }}</a>
<a ng-if="content.fieldLink.fieldLinkNewTab === false" ng-href="{{
content.fieldLink.fieldLinkHref }}">{{
content.fieldLink.fieldLinkText }} </a>
</div>
So this way I can easily use it like this in my .JS file:
fieldLink
{
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
The problem that I am having is making a field for an image:
fieldLinkImage: "documents/pictures/etc.jpg"
fieldLinkHref: "www.etc.com",
Clicking the picture should redirect me to the url.
I can do this in my .html file just fine, by simply wrapping the image in the class, but I want to select the image in my .JS file.
How do I make this happen without hard coding the links and images in the .html file ?
Thank you!
Sorry about this but I will criticize your code a bit.
First to point out that you have a typo, LinkField should probably be fieldLink in your first <a> element.
Next, why are you comparing !== false when you can just check if var is true or truthy (just put variable in condition - no need to compare with anything - if it's there or is true it will be truthy).
Also to create a new element just because you need to have different attribute is bad, you will get tons of code and get lost at some point. Instead use ng-attr-target which will give you same thing in one line - puts target (or any other) attribute based on condition.
But all of that can be fixed of course, I will take a wild guesses on your data structure during this since you haven't provided jsfiddle or similar. I guess that you have a list of objects that hold images or links and you want to put them together in some ng-repeat based on the type either show link or image.
So this would be your data object:
let contentObj = [{
fieldLink: {
fieldLinkNewTab: false,
fieldLinkHref: "www.etc.com",
fieldLinkText: "click here for random website",
}
}, {
fieldLink: {
fieldLinkNewTab: true,
fieldLinkHref: "www.etc.com",
fieldLinkImage: "https://images.pexels.com/photos/590490/pexels-photo-590490.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb",
}
}];
and this would be your html, if fieldLinkText is there it will show text, if fieldLinkImage is there it will show image, keep in mind if you have both it will show both, also by utilizing power of ng-attr-target you show one element in html and not two with ng-if:
<div class="links" ng-repeat="content in contentObj" ng-if="content.fieldLink">
<a ng-attr-target="{{(content.fieldLink.fieldLinkNewTab) ? '_blank' : undefined}}" ng-href="{{ content.fieldLink.fieldLinkHref }}">
<span ng-if="content.fieldLink.fieldLinkText">{{ content.fieldLink.fieldLinkText }}</span>
<img class="image-class" ng-if="content.fieldLink.fieldLinkImage" src="{{content.fieldLink.fieldLinkImage}}" alt="" />
</a>
</div>
I hope this is helpful, I didn't mean to be too critic, if I was sorry about that, but these things will help you in future. And here's the fiddle that you can play on change your data tweak it up a bit: https://jsfiddle.net/pegla/j392Lvdp/3/

Unable to locate element in angular js application

I am new to protractor and i am trying to write a script which will click on the next navigation ">" in the page. I am trying to locate the id from the below code
<ul class="pager compact">
<li id="next-page" class="pager-next" ng-show="manager.hasNext" ng- click="next()">
Next
</li>
and below is the script i am using
browser.driver.wait(browser.driver.isElementPresent(by.id('next-page')),6000);
var paginationnext = browser.driver.findElement(by.id('next-page'));
return paginationnext.click();
But I see error as mentioned below
Unable to locate element:{"method":"css selector","selector":"*[id=next-page"]"}
Please help on this front

How to resolve NoSuchElement exception in selenium?

I had one link initially. Now I received the requirement of showing button instead of a link for A/B testing. I have to make their ids same since I don't want to write a new test for the button.
To decide which to display I added two unique classes in the li item. This is working fine.
But on testing it starts failing, giving the message "Subscriber link is not available" although button is present there.
I thought that it might failing because of two same ids are there so i added two same classes and change the selector from id to class. But it still failing.
<li class="not_subscriber subscriber-text-link " style="display:none">
<a class="link-orange subscribe" href="" id="subscribe_link"> Subscribe </a>
</li>
<li class="not_subscriber subscriber-orange-btn " style="display:none">
<a class="btn-orange subscribe" href="" id="subscribe_link" > Subscribe </a>
</li>
#FindBy(css = ".subscribe")
#NoSuchElementDescription("Subscriber link is not available")
protected WebElement _subscribeLink;
Is there any way such that i dont have to write new test and change ids and test will start passing??
Can you please try below Xpath:-
//li[#class='not_subscriber subscriber-orange-btn ']/a[#class='btn-orange subscribe']
Hope it will help you :)
Change the selector to xpath. Almost every element has an xpath. And be sure to replace the double quotes to single quotes. It should be more reliable than class or id selectors.

Fancy Box Not Working?

Unable to pin with fancy box is not working. I followed the directions on this link...
http://fancyapps.com/fancybox/
<h5 class="product-title">$25.00 Off First Lyft Ride</h5>
<p class="product-desciption">Get a free $25.00 towards your ride with Lyft when you use the activation code below! If you need a return ride make sure to use the Uber Promo Codes, and get a free ride back!<br><br><font size="2"><b><a class="fancybox" rel="group" href="https://www.youtube.com/watch?v=WyJsb4ANIy8"><font color="#858585">Watch Video Review<font></a></b></font></p>
All javascript and link rels are correct. A class looks correct as well. Any ideas?
Web page is www.couponcodeshero.com
You have to use youtube.com like :
<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
Also i have found error in your console for fancybox. Error is :
Uncaught TypeError: $(...).fancybox is not a function
So this means that you have not found fancybox.js file data on this page. OR your fancybox js jQuery is conflicting with other jQuery library.

Categories