Protractor - locate element by both className and text - javascript

I have a situation in my web application where some listed items do share common className that is used by our automated test suites. Now, I have to click on specific element and need to locate it by it's class and text of that element.
Here is an example:
<ul>
<li class="autotest-list">Milk</li>
<li class="autotest-list">Sugar</li>
<li class="autotest-list">Candy</li>
</ul>
I need a way how to click on ie.Sugar.
Something like this:
element(by.className('autotest-list').text('Sugar');
or this
element(by.className('autotest-list')&&text('Sugar');
Thank you all in advance!

element(by.cssContainingText('.autotest-list','Sugar')

If you don't mind, you could use by.xpath:
element(by.xpath('li[#class="auto test-list" and text()="Sugar"]'))

Related

JQuery hide list elements by partial class name

I need to find and hide all li tags in my page that have the partial class of 'fos-crs-'.
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
where the XXX is some course-code that comes from a database call. The "fos-crs" class is one I added so I can specifically find and manipulate these specific li tags. The other classes in the li tags are part of work created by off-site developers using Foundation. In other areas these have not been a problem for my JQuery.
I have tried:
$('[class^="fos-crs-"]').hide();
... and ...
$('li[class^="fos-crs-"]').hide();
Would someone tutor me in this? Much appreciated.
You are targeting the class that starts with(^) operator. Rather you should target with any occurrence(*).
i.e,
$('li[class^="fos-crs-"]').hide();
should be
$('li[class*="fos-crs-"]').hide();
http://jsfiddle.net/d4uk2fmg/
The attribute selector looks at the entire attribute, not each class in the attribute. So what you're code is looking for is elements whose class attribute starts with "fos-crs". You need to check if that string is contained within the attribute at all, so you need the * modifier.
$('li[class*="fos-crs-"]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container fos-crs-XXX">...<li>
<li class="minimal-product-wrapper toggle-container">...<li>
</ul>

qtip2 for HTML elements created in an angularjs function

I have this part of HTML
<ul class="list-group" ng-repeat="thing in things">
<li class="list-group-item" ng-bind-html="tmpfcn(thing.text, thing.objects)"></li>
</ul>
Which for every iteration returns some text with hyperlinks inside. e.g.
I like the winter
I want to use qtip for each of the hyperlinks with different content for each hyperlink.
I've defined a qtip directive which I've tested with an HTML element like this
<span qtip="This is the message printed"> hover over me</span>
and it works just fine.
I've looked at many solutions for similar problems like this but I couldn't get my code to work.
Could someone provide some guidelines? An example would bereally helpful as well.

Trying to use the same string properties in angular to do multiple things

I have a folder in my angular apps directory called demos that I want to load into an iframe and a navigation that I want populated based off of the folder name. Then I want it to list only 10 of the demos and it should be a random selection.
Here is my code but I am missing some steps obv.
app/demos/democara
app/demos/randomeDemo
app/demos/anotherDemo
//UL generated from app/demos/ structure
<ul class="randomDemoNav">
<li ngClick="{{cPDemo}}"><span class="pseudo">/democara</span></li>
<li ngClick="{{cPDemo}}"><span class="pseudo">/randomeDemo</span></li>
<li ngClick="{{cPDemo}}"><span class="pseudo">/anotherDemo</span></li>
</ul>
<iframe class="demo-loader" ng-src="{{cPDemo}}"></iframe>
<script>
and that's about as far as I get.
</script>
Any thoughts on what I should search in API to accomplish this? I would also be ok using just jquery for this.

Protractor - clicking a link in a list

Given a todo app that has a list of tasks: Walk the dog, Eat lunch, Go shopping. Each task has a 'complete' link.
Using Protractor, how do I click the complete link for the second task 'Eat lunch'? Preferably I'd like to do this without using indices in my test.
The html structure is like so...
<ul class="pending">
<li ng-repeat="task in tasks">
{{task.name}}
<a href='#'>Complete</a>
</li>
</ul>
This seems like a common situation so surely there has to be a simple solution that I'm overlooking. Thanks in advance
element.all(by.repeater('task in tasks')).
get(1).
element(by.linkText('Complete')).
click()
or
element.all(by.repeater('task in tasks')).
get(1).
$('a').
click()

How to open a new jsp page with JavaScript

I have the following dropdown menu how can i redirect each menu to corresponding page by clicking each of menu? is it possible by using one javascript function if yes how?
thanks in advance...
<div>
<ul>
<li id=home onclick="show(this.id)">Home</li>
<li id=collection onclick="show(this.id)>Collection</li>
<ul>
<li id=men onclick="show(this.id)>Men</li>
<li id=women onclick="show(this.id)>Women</li>
</ul>
<li id=contact onclick="show(this.id)>Contact</li>
</ul>
</div>
Yes you can.
Use window.open("URL") in your case URL is this.id
Also you can update window.location
read more here http://www.tizag.com/javascriptT/javascriptredirect.php
Like Niko said you need closing quotes
.. onclick="window.open(this.id)" ..
If you only need o JS function to redirect based on a parameter that, in your case, is the component ID, this will do the work:
<script type="text/javascript">
var show = function(id) {
window.location.href = id + '.jsp';
};
</script>
If you want to navigate DOM and get link's href attribute use:
document.getElementById(id).firstChild.href
Considering that the first element inside the component referred by ID is a link tag.
Try this?
$("div > ul li a").click(function() {
window.location.href += "/" + $(this).parent()[0].id;
});
I tried to use a selector that didn't modify your HTML, so that's why it looks so icky.
This makes no sense.
I understand that your particular functional requirement is to invoke the link when the enduser clicks somewhere in the space of the <li> outside the link. To achieve that just set the CSS display property of the <a> element to block. This way the link will span the entire space of its parent element.
<ul id="menu">
<li>Home</li>
<li>Collection</li>
<ul>
<li>Men</li>
<li>Women</li>
</ul>
<li>Contact</li>
</ul>
with this CSS
#menu li a {
display: block;
}
No need for ugly JavaScript hacks. Opening a new JSP page location in the current window is by the way to performed by window.location = 'some.jsp';. But this is not necessary if you use the right solution for the concrete problem. In the future questions, try to elaborate more about the functional requirement instead of concentrating only on the solution of which you thought that it's the right solution for the particular functional requirement.

Categories