How to find a button within <ul> and <li> via Proctractor? - protractor

I am new to automation, and my previous experiences were with non-Angular apps, thus i start to use Protractor.
I want to navigate throught the website, though cannot find the right selector.
The button is highlighted in red on the bottom of the screen:
I've tried below code among many:
element(by.name('Flota')).click()
or
element(by.css('.ng-tns-c11-5')).click()
element(by.css('div[title=Flota]'));

maybe you should target the <a> or <nb-icon> element instead?
Try the following locators:
using a:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active'));
or nb-icon:
element(by.css('.menu-icon.ng-tns-c11-16.ng-star-inserted'));
Additionally, if you need to target the <span> element:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active span'));

I suggest
by.css("a[title='Flota']") //if this is the button you are looking for
Since the shorter is locator - the better

your help was much appreciated!
Unfortunately, i tried all options you provided and didn't work, though i made additional trial and error runs.
The code i worked out is below, maybe it will help another newbie like me:
element.all(by.css('#menu-item ng-tns-c11-4 ng-star-inserted li')).click()

Related

TinyMCE get form content without using submit button

I'm trying to put TinyMCE on my website. I figured out how to get it to show up, but I'm lost on how to process the content. In their example, they just have a link that references the top of the page and clicking on it somehow magically causes their dump.php script to execute. I don't understand what's going on here. Here is the link:
http://www.tinymce.com/tryit/basic.php
The "Submit" button at the bottom is really a link in a span element with href="#". The form action is dump.php. I want to know how they configured this to run without an actual submit button. Any help in understanding this is greatly appreciated!
To Get Content From Tinymce You Can Use GetContent Method of Currently ActiveEditor Instance
tinyMCE.activeEditor.getContent();
method is used to getting Content .. to Set The Content
tinyMCE.activeEditor.setContent("I Want Text To Be in Tinymce");
to find a perticular element in tinymce get body and find element
var body = tinyMCE.activeEditor.getBody();
$(body).find("#elem_id")
to get a full html
tinyMCE.activeEditor.getDoc().documentElement.innerHTML
hope that helps ..
Since I use PHP, I found this which is also useful:
http://www.tinymce.com/wiki.php/TinyMCE3x:How-to_implement_TinyMCE_in_PHP

Preventing page jump - hashed anchor tag - default behavior

I made a type of menu box with css click events using targets and link them with hash anchor tags. The problem is, when I click one of the buttons (One, Twii, Thrii, etc.) the page jumps! I tried using a js script to stop the default behavior but to no luck. Could you please help me stop the page jump so the page does not move when a button/link is clicked!
Heres the JS Fiddle link I made. jsfiddle.net/3ASpX/1/
I need a solution..whether its with using target or something else!
Thank You and I apoligize for any confusion in explanation and the question itself if I have done something wrong, your help is much much much appreciated.
I think you could do this by using <div> instead of <a>.
But if you have to use an <a>, you could remove the target with jQuery:
$( '.link' ).removeAttr("href");

Get rid of Spry Accordion bluebox

I have two questions. First I am using a spry accordion for this website I'm designing, however its the fist time I've used it so I wanted to know how to turn off the blue box that surrounds it everytime you press on it. Does anyone know? I tried to revise the css but I know its not in there.
My second question is how do I make all the tabs closed when you open the website?
Here is the example of the website, I think it will make it easier to visualize.
Spry Panel Example
Thanks!
Sophie
It actually seems to have nothing to do with spry, what I'd do is add this to your CSS:
.Accordion {
border:none;
outline:none;
}
I figured it out, you actually need to erase the tab index at the beginning of the accordion html code:
<div id="Accordion1" class="Accordion" tabindex="0">
Actually none of the above worked for me, what you have to do is instead of saying border and outline NONE it works best if you apply the background colour. so instead of trying to get rid of it - disguise it. works a treat

How do I flip .html pages with pure CSS3?

I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.

facebook comment plugin: remove like button

The FB: comment plugin comes with both a like button and comment box. Does anyone out there know how to remove the like button from the facebook comment plugin?
I got it working:
To remove (hide) the like-button that
comes above the comments-box To hide
the Like botton, you will need to add
2 attributes and create a CSS file.
1. simple="1"
2. css="http://yoursitedomainname.com/fb_comments.css"
<fb:comments expr:title='data:post.title'
expr:url='data:post.url'
expr:xid='data:post.id' simple='1'
css='http://yoursitedomainname.com/fb_comments.css'/>
in the css file add this style code:
div.like, div.like div {display:none;}
If you want you can just link to my
hide CSS file:
http://www.fileden.com/files/2006/10/3/258652/hidelike.css
Thanks to Gil Goldshlager, original post # forum.developers.facebook.net/viewtopic.php?id=58903
I've also searched for this answer but found nothing. I guess it's not possible for the moment. But if someone knows anything about this, I would also like to hear about it!
The answer from mctaco/Gil Goldshlager did not work for me. i assume, they only work with the old comments plugin. But i tried around with the tags and this one was working for me, to remove the like button:
<div class="fb-comments" data-href="{{ request.build_absolute_uri }}"></div>
This code comes from django. if you are using another server side language, then you have to replace {{ request.build_absolute_uri }} with the absolute uri from the page, where you want to have the comments plugin installed.
If you omit the data-href attribute, the like button is displayed.