Develop Reference

How to write xpath for Select name class for the below scenario in Javascript?

Hello,
I'm trying to choose a card from the card list(as shown in the below screenshot) and the locator for the same is highlighted in the "Elements" section. This is a Select name class and the below xpath didn't work for me. Could you please help me if there is other way to write the xpath?
//select[#class='co-dropdown__select co-payment-card__select']//option[2]

Try below css selector
Select select= new Select(driver.findElement(By.cssSelector("select.co-dropdown_select.co-payment-card__select")));
select.selectByIndex(index);

try using this:
WebElement dropDownList = driver.findElement(By.cssSelector(".co-dropdown__select.co-payment-card__select"));
Select card= new Select(dropDownList);
card.selectByIndex(2);

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');

Find closest select box with a class from an element

From the starting point of an element that happens to be a select box (element has a class of: service_category_selection) I want to find another select box (element has a class of: service_selection).
I need to grab specifically the closest element with class: service_selection because I don't want to grab all of the elements with that class.
Snapshot of how far away that first select box is from the second select box:
Assume that $(this) already contains the first select box. Now I just need to draw the route to the closest next select box with the class: service_selection.
I attempted to use .closest but it wasn't working for me.
Example: var el = $(this).closest(".service_selection");

You need to get the overall top parent container - then find the element:
var el = $(this).closest(".row").find(".service_selection");

Doing this kind of navigation is a bit hackish and easy to break since your logic highly rely on your layout. I suggest you to use a unique CSS class on that element and access it directly.

accessing the element in the following element

I know how to get element in jquery by id or class or by using find but I have an element like the following and I want to find it and change the text inside(here is test):
<text x="524" text-anchor="end" zIndex="8" style="cursor:pointer;color:#909090;font-size:9px;fill:#909090;" y="170">test</text>
but the problem is that here this text element does not have any id and I have so many text element in the html file so is there anyway that I can access just this text element(I also can not add id to this text because is created by plugin) ?

To select elements based on content, use $(":contains('text')")
See: http://api.jquery.com/contains-selector/
Ans then you can edit the text like this.
$("text:contains('theTextYouKnowIsInside')").html("newText");

You could access via any of following methods :
$("text[x=524]").html("here is test");
$("text[x=524][y=170]").html("here is test");
$("text[y=170]").html("here is test");
here is the demo JsFiddle

How correct create dynamiclly select with horizontal orientation?

I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle

You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.

I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.

Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle

change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/