Develop Reference

How to grab the h3 text within a div

My website HTML has the following:
To grab the H3 text (SOME TEXT) as a variable in Tag Manager - when a user clicks on the div class "c-card c-card--primary c-parkcard " I think I need to use a DOM Element variable
But it's not returning the text.
Should the Element Selector be:
.c-card.c-card--primary.c-card__body.u-h6.c-card__title
However, it returns a null value in Tag Manager

The solution was to create a custom JS variable that when the image was clicked on would find the "c-card c-card--primary c-parkcard " div (9 parents up) and then go back down to find the h3 element by class and then return the text:
function(){
var z = {{Click Element}}.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.getElementsByClassName('u-h6 c-card__title')[0].innerText;
return z;
}

use of getElementsByClass is as simple as:
$dom = new DOMDocument('1.0', 'utf-8');
$dom->loadHTML($html);
$content_node=$dom->getElementByClass("c-card__body");
$div_a_class_nodes=getElementsByClass($content_node, 'h3', 'u-h6 c-card__title');

You have set "h3" as "attribute name. "h3" is not an attribute (but the name of the tag). You do not want to set an attribute name at all, because you do not want to return the value of an attribute, but the innerText of the tag, and that is the default behaviour anyway.
If you use a DOM variable this will return the first instance on the page. If your selector matches several DOM nodes, you will still just get the first one, regardless if what the user clicks. If you expect this to update depending on the clicked element, you should rather use the {{Click Text}} variable (a built-in variable that you might have to enable first).
Chances are that the actual click element is not the h3, but the nested link inside, but that does not really change things for you (as in both cases the innerText will be the contained texted nodes, which in this case is the same).

Protractor - checkbox with dynamic id cannot be defined

I need to define a specific check box and (later on) click on it to complete the account creation. The problem is that part of the input id is dynamic and changes with each run. Therefore, my approach below is not working:
var nativeChannels = element(by.css("label[for='dp-native-9597']"));
When I inspect the element, it displays the following:
div class="switch"input id="dp-native-9597" type="checkbox" ng-model="controls.allNativeChannels" class="cmn-toggle cmn-toggle-round ng-pristine ng-untouched ng-valid" autocomplete="off">label for="dp-native-9597">/label/div
label for="dp-native-9597"/label
I searched for a way to put a wild character after dp-native- but looks like this is not allowed. Is there any way to define this type of check box, so that I could move on with tests?
Thank you for your help in advance!

Try using the below xpath.
.//label [contains(#for,"dp-native-")]

There are wild card selectors in CSS (http://www.w3schools.com/cssref/css_selectors.asp) :
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"
Try one of these. I think you might search like this:
$(".switch[id*='dp-native'] label")
or by model (http://www.protractortest.org/#/api?view=ProtractorBy.prototype.model) :
element(by.model('controls.allNativeChannels')).$('label');

How to find any text within a value of an attribute of a tag using jquery

hi is there any way i can find specific text within a value of an atrribute of an HTML tag, To be more specific, im trying to find out if the tag has "selected" within its "src" attribute e.g in this case i need to find out if selected exists, I can go in other routes to do this but i need this as a condition.
I am selecting the src of the img tag and adding this special text, but i dont want it to keep on adding e.g in this case its defeating the purpose of what im trying to do. I need to know if Selected has been inserted then ignore the particular image.
$(this).hover(function(){
var currentName = $(this).attr("src");
var theNumToSub = currentName.length - 4;
$(this).attr("src",$(this).attr("src").substr(0,theNumToSub)+"selected.jpg");
});
here is my code above for adding "Selected" in the first instance.

You can try with:
$(this).filter('[src$="selected.jpg"]');
it returns the same element if src ends with selected.jpg.
You can also filter if anywhere in src is selected keyword with:
$(this).filter('[src*="selected"]');

You can use the jQuery attribute contains selector :
$("img[src*='selected']");

You can use indexOf()
if($(this).attr("src").indexOf('selected')>0){
//selected is there in src
//your stuff here
}

Search through document and find all inputs with titles

I want to search through my document, and find all inputs with title attribute, but at the same the title attribute can not be empty. So it should look for every input with title attribute that has at least one character in length.
Then I would like to make some event on those inputs (like add them some CSS class).
Is that even possible with jQuery or other javascript library?

I believe this would give you what you want:
$('input[title][title!=""]')
To apply css
$('input[title][title!=""]').addClass('class1 class2 class3');
http://jsfiddle.net/5hkAG/

$("input[title]").not('[title=""]')

var myInputs = [];
$("input").each(function() {
if($(this).attr("title").length > 0) {
myInputs.push(this);
// do other events as usual, using $(this) as selector for current input
}
});
// do something with myInputs, which is an array of all inputs with a title attribute

What is this xPath trying to capture?

I have come across this bit of jQuery and I am failing to understand what the xPath (?) means in this context:
var all_line_height = $(this).find("*[style*='line-height']");
I haven't seen this before, is it looking for an element that contains line-height in its style attribute?
I did a small test and it doesn't pick up on it.

That's not XPath. It's a selector, which selects any element whose style attribute contains line-height from the currently selected element (this).
$(this) // selects the current element
.find(...) // Select all elements which match the selector:
*[style*='line-height'] // Any element (*),
// whose style attribute ([style])
// contains "line-height" (*='line-height')
It could be implemented as follows:
// HTML:
// <div id="test">
// <a style="line-height:10px;color:red;">...
$("#test").click(function(){
// this points to <div id="test">
var all_line_height = $(this).find("*[style*='line-height']");
alert(all_line_height.length); //Alerts 1
})