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.

Solution 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?

Solution 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

Comments

[AHiggins]

Thanks for posting an answer to this question! Code-only answers are discouraged on Stack Overflow, because a code dump with no context doesn't explain how or why the solution will work, making it impossible for the original poster (or any future readers) to understand the logic behind it. Please, edit your question and include an explanation of your code so that others can benefit from your answer!

[Andurit]

Hi @alecxe thank for your answer it definitly make sense, dispite this I am getting error "element not visible" just notice that even my code in question have same error. Is there some restriction for modal windows?

[Andurit]

just find out in other questions there can be problem with loading (especialy when there is some effect), I added short sleep there and now getting error. Element not clickable, other element will get click. (and its main DIV element of whole page

[alecxe]

@Andurit you know what, this would be a wild guess, but add this to onPrepare(): browser.driver.manage().window().maximize(); and try again.