Click element by Value - protractor

Question

I am clicking to modal window which is pretty simple. In general only relevant part is this:

<div id="partSelection">
   <button value="0" name="partSelection">BLATNÍK P L</button>
   <button value="1" name="partSelection">BLATNÍK P P</button>

I need to click one of this button, I know how to click this with: xpath:

element(by.xpath('//*[@id="partSelection"]/button[2]')).click();

also way with button text:

element(by.buttonText("BLATNÍK P P")).click();

but I noticed there as different values for each button and I belieave this is something which is not going to change by developers. Is there a way how to click element base on value?

Thank you for your advises.

Answer 1

Adding to an existing answer.

You can solve it using the following CSS selector:

element(by.css("#partSelection button[value=0]")).click();

Or, using a by.xpath() locator:

element(by.xpath("//div[@id='partSelection']/button[@value='0']")).click();

Note that, if you are going to use the "by value" technique often, to follow the DRY principle, it could be a good idea to define a custom by.value() locator:

• How to globally add a custom locator to Protractor?

Answer 2

this example should work if you want to just look up a specific attribute. I usually refer to this css selectors when I'm trying to figure out the best way to find a specific attribute.

basically the breakdown is to find the tag you want in our case we want button and then we want to find the attribute within that tag. So we have the choice of value or name. Name is the same for both buttons so we don't want to use that. However the value is different for each button so that would be good to use in this case.

element(by.ccs('tag[attribute=""]');

tag = button

attribute = value

element(by.css('button[value="0"]')).click(); // button with text BLATNÍK P L 
element(by.css('button[value="1"]')).click(); // button with text BLATNÍK P P