We Keep Coding

How can this element button be clicked using protractor?

I'm trying to select this button using protractor:
<button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$arrowAction(-1, 0)">
<i class="glyphicon glyphicon-chevron-up">
</i>
</button>
the only unique element in this is ng-click="$arrowAction(-1, 0)"
Nothing I have tried works:
element(by.css("//button[#ng-click='$arrowAction(-1, 0)']")).click();

//button[#ng-click='$arrowAction(-1, 0)'] is not a valid CSS selector. It actually looks like this is an XPath expression and you meant to use by.xpath() locator.
You can though use the partial attribute check instead:
$("button[ng-click*=arrowAction]").click();
$ here is a shortcut to element(by.css(...)), *= means "contains".
Or, do an exact match:
$("button[ng-click='$arrowAction(-1, 0)']").click();
I still don't like the location technique used in this case, but, given what we have, it is probably the best we can do. Ideally, if you have control over the application code and templates, add a meaningful id, class or a custom data attribute to uniquely identify the element.

Access ng-pattern in error message

I have an ng-repeat for a list of attributes and want to show error messages for each input. For a pattern error I also want to show the specific regex it has to match.
Can I access an input's pattern somehow? I know I could add an attribute containing the regex but I would like to know if there is an angular way somehow.
(This is an oversimplified example, the regexes can be different for different attributes)
<form name="form">
<div data-ng-repeat="(attributeName, attributeMetaData) in configuration.metaData">
<input data-ng-model="configuration[attributeName]" type="text" name="{{attributeName}}" data-ng-pattern="/^[0-9][0-9]:[0-9][0-9]$/">
<span data-ng-show="form[attributeName].$error.pattern && form[attributeName].$dirty">
Please check your input format [pattern should go here]
</span>
</div>
</form>
jsFiddle: http://jsfiddle.net/lisapfisterer/ndu2g0ev/

Based on your restriction that the model cannot be changed, I guess your best bet is to have a separate model containing just regexes

How do I encode html for Bootstrap popover and tooltip content

This may be a duplicate; it's hard to tell because the key words contain "html" and "content" and even Bing and Google were returning a lot of false positives.
Bootstrap tooltips and popovers support html values for the data-content attribute when data-html=true. However, this isn't valid
<input id="email" class="form-control" type="email"
data-bind="value: Email, valueUpdate: 'afterkeydown'"
data-container="body" data-toggle="popover" data-placement="bottom"
data-title="Email" data-html="true"
data-content="<p>This is <i>your</i> email address.</p>" />
because you can't just put html in the value of an attribute that is itself HTML. It may confuse the parser and is not permitted by the HTML specification.
While it seems to work with Internet Explorer, I really don't feel like testing with fifty different browsers and versions. It certainly does confuse the parser in the Visual Studio 2013 HTML editor. That editor thinks there's no closing quote.
I could dodge this by assigning the attribute from JavaScript in a separate file, but that's clumsy and defeats the separation of concerns.
So, what's the right way to mark this up?

As the accepted answer points out, you can't have a quote " inside a string quoted with ". This problem occurs often. If you want to display text that looks like HTML, then how is the browser supposed to know what it should parse as HTML and what it should simply display.
For example, how do you get a browser to display the text <p></p>
The answer is escaping. Instead of characters like " and <, you use placeholders like " and <
However, the solution of escaping the quotes doesn't work here. Precisely because the browser will not parse it as HTML. If you put escaped quotes in your html, they don't look like quotes to the browser, they look like text.
There is a different solution however: A string that is quoted with " can contain ' without problems. The following is valid:
data-content="<div id='string_in_string' ></div>"
This can be applied to your bootstrap popovers, I've set up a fiddle, it shows how the single quote strings are correctly parsed, while the escaped strings confuse the browser: https://jsfiddle.net/z4t2sud3/3/
This is the code inside the fiddle (the fiddle environment automatically imports bootstrap, jquery, etc)
<mark data-content="
<button class="btnr" type="button">
Doesn't work
</button>
<button class='btn btn-info' type='button'>
Works
</button>
" data-html="true" data-toggle="popover">
Popovered
</mark>
And be sure to activate the popover via Javascript:
$(function () {
$('[data-toggle="popover"]').popover()
})

You can add whatever you want to an HTML attribute as long as it is a valid html attribute value. What is a valid attribute value? What does not contains tags, quotes and so on. So.... and what? The solution is: Scape the string before append it inside the html attribute.
If you are using PHP: http://fi2.php.net/htmlspecialchars
Or Twig: http://twig.sensiolabs.org/doc/filters/escape.html
If you are using jquery, when you do $el.data('my_scaped_json) will be converted to whatever it was originally, such a json object or html-string: $( $el.data('my_scaped_html) );

Loop to change content of href for many anchors

The content of my posts in Wordpress is a big markup. It is coming from MS Word so it is text wrapped by HTML nested tags and inline styles.
I have a segment of code that is repeated many times in the content (It represents text footnotes). This segment, for the first footnote for example is:
<sup><a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftn1" name="_f
tnref1">
<span class="MsoFootnoteReference">
<span dir="LTR">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 16pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a></sup>
.....
<a title="" href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1" name="_ftn1">
<span class="MsoFootnoteReference">
<span dir="LTR" lang="EN-US" style="font-size: 12.0pt; font-family: 'Simplified Arabic','serif';">
<span class="MsoFootnoteReference">
<span lang="EN-US" style="font-size: 12pt; line-height: 115%;">
[1]
</span>
</span>
</span>
</span>
</a>
My goal is to change the 2 hrefs from:
href="file:///C:/Users/hp/Desktop/file.docx#_ftn1"
href="file:///C:/Users/hp/Desktop/file.docx#_ftnref1"
to:
href="#_ftn1"
href="#_ftnref1"
so that the user can jump from one anchor to the other.
Questions:
1- Is is better to use server side language instead of jquery?
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Thank you very much in advance for your invaluable assistance.
Solution:
With the use of Regular expression provided by Broxzier + PHP, the code below is working and can be applied to any data before persisting it on the database.
if(preg_match_all('/href\s*=\s*"[^"]+(#[^"]+)"/',get_the_content(),$match))
{
echo preg_replace('/href\s*=\s*"[^"]+(#[^"]+)"/','href="$1"', get_the_content());
}

1- Is is better to use server side language instead of jquery?
Neither. The best and fastest option would be to totally remove the website and page name from the link if they're the same as the current page.
One way would be using Regular Expressions, this could be done via JavaScript, but I strongly suggest doing this by using a text editor and replace the old data (Wordpress saves revisions anyway).
The following regex will grab the href attribute
href\s*=\s*"[^"]+(#[^"]+)"
Replace this with:
href="\1"
And you're done.
2- How to loop over the repetitive segments and change the href contents of each couple of anchors?
Use a global flag to do this. Since it's content I advice you to do it manually or change the regex so that it will only match the current url.
Please note that this will also replace occurrences in the content, if there is any text like href="website#flag" in there. I assumed this was not the case.
--

Using jQuery.attr() and hash property of <a>
$('a').has('.MsoFootnoteReference').attr('href',function( idx,oldHref){
return this.hash;
});
You might want to use some html cleaning on your WYSIWYG html submissions that will clean out unwanted classes and modify the href's for you.
For example SimpleHtmlDOM php library uses css type selectors to modify html and you could use it to modify any href with file:// in it for example

JQuery Selector Selecting Selectively

I have the following HTML
<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="1" />
I can select .up_icon#1 but not .down_icon#1
var u = $(".up_icon#1"); //= [<i class=​"up_icon" id=​"1">​</i>​]
var d = $(".down_icon#1"); //= []
What am I missing here?

You should not duplicate ID like that. ID should be unique across document.
In your case you can use jQuery attribute selector function. See below,
<i class="up_icon" data-id="1"/>
<p class="position">1</p>
<i class="down_icon" data-id="1"/>
And then you can access them by .up_icon[data-id=1] and .down_icon[data-id=1]

You should NEVER assign the same ID to several tags
Also:
From the HTML specification:
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").

can select .up_icon#1 but not .down_icon#1
This is due to the fact that duplicate Ids are invalid HTML and throw off the selector.
jQuery requires you to have unique IDs across your page or you will experience unexpected behaviours.
Taken from jQuery id selector documentation
Each id value must be used only once within a document. If more than
one element has been assigned the same ID, queries that use that ID
will only select the first matched element in the DOM. This behavior
should not be relied on, however; a document with more than one
element using the same ID is invalid.
Change your HTML to:
<i class="up_icon" id="1" />
<p class="position">1</p>
<i class="down_icon" id="2" />
Now you can select .up_icon#1 or .down_icon#2.
Obviously if you can find a way to apply more descriptive identifiers, other than plain numbers, to keep anything from repeating the better.
You could also use optional data-attributes data-value="1" to store any sequence or record id if needed. jQuery selectors have no issues with same values in data-attributes or classes.

You should switch you class and id definitions. Try this instead:
<i id="up_icon" class="1" />
<p class="position">1</p>
<i id="down_icon" class="1" />
var u = $("#up_icon.1");
var d = $("#down_icon.1");