CODEWITHSUNDEEP
angularjsxpathcss-selectorsprotractor
user5115359
user5115359

Reputation:

What the easiest way to find element with many parameters?

I'm trying to find all the methods that can help me find elements with multiple attributes. For example I have a view like this:

<span class="n-check ng-isolate-scope ng-pristine ng-valid" ng-model="my_model" my_sp_at="1" my_attribute="my_attribute_value" tabindex="0">...</span>

And I want to find the element with attributes "my_sp_at" and "my_attribute". And I'm not sure if the easiest way to find it, is using by.xPath().

element(by.xpath("//span[@my_sp_at='1' and @my_attribute='my_attribute_value']

I'm wondering whether I can use by.css() with many parameters or something like this?

My goal is maximum avoiding of reading marking, names of Tags and so on.

Upvotes: 1

Views: 364

Answers (1)

Michael Radionov
Michael Radionov

Reputation: 13309

You can use a so called Attribute selectors to find an element using by.css(). So applying it to your requirements, the result would look like:

var el = element(by.css('span[my_sp_at="1"][my_attribute="my_attribute_value"]'));

or using a shortcut for element(by.css()) - $:

var el = $('span[my_sp_at="1"][my_attribute="my_attribute_value"]');

It allows to use pretty the same syntax as you would use with jQuery or document.querySelector[All]. Basically an attribute selector should be wrapped into square brackets, if you want to use multiple attribute selectors to target the same element, then you should place them one after another without spaces:

div.some-class[name="phone"][title="Phone number"]
 ^      ^           ^                  ^
tag   class   attr selector #1    attr selector #2

for a tag in your HTML:

<div class="some-class" name="phone" title="Phone number"></div>

Upvotes: 1

Related Questions