Behat: How do I select from two buttons with the same value?

Behat: How do I select from two buttons with the same value?

by Ramindu Deshapriya -
Number of replies: 8

Hello,

I am attempting to write a Behat test for this ticket. when adding a subfolder to a folder, I used And I press "Create folder" to access the Create Folder dialog box, which also has a <button>Create folder</button> element. When I add the name of the new folder and use And I press "Create folder"  again, Behat ends up clicking the same button it clicked earlier, opening a new Create Folder dialog box.

Is there a workaround for this already implemented in Behat, or would I have to write it myself? 

Thanks.

Average of ratings: -
In reply to Ramindu Deshapriya

Re: Behat: How do I select from two buttons with the same value?

by Itamar Tzadok -

You can click a css element in a css element. For example:

I click on "a" "css_element" in the "div.viewlink" "css_element"

Or, if the item you want to click is already unique by some css selector, you can simply use something like:

I click on "div.viewlink a" "css_element"

It really depends on the DOM where you want to click.

hth smile


Average of ratings: -
In reply to Itamar Tzadok

Re: Behat: How do I select from two buttons with the same value?

by Ramindu Deshapriya -

Thanks! Worked like a charm.

Average of ratings: -
In reply to Ramindu Deshapriya

Re: Behat: How do I select from two buttons with the same value?

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

While you can do this (and there is also xpath_element for when you need really tricky selectors), it is not necessarily the right thing to do.

The reason to think more deeply is because of accessibility. It is not just Behat that needs to work out which button to click from only the text label. Users who require a screen-reader also have to work something like that.

Therefore, that fact that you find it difficult to write a Behat script to use the UI should also make you worry about how the UI is for disabled users. Perhaps the real fix here is to change one or both or the button labels. Perhaps it should be "Create sub-folder of 'Folder 1'" and "Create folder"?

Average of ratings: -
In reply to Tim Hunt

Re: Behat: How do I select from two buttons with the same value?

by Ramindu Deshapriya -

Hi Tim,

I agree. The 'Create Folder' button on the overlaid Javascript dialog box (div) does not have any name or value attributes, leaving only the text within the tag as an identifier. The other create folder button has the alt text 'Create Folder' (it's an 

<a><img /></a>

). This is what is confusing Behat. 

Earlier I wrote a function in to behat_form to click a button with Xpath and used the expression 

"//button[contains('.','Create Folder')]" 

to select the button, but I didn't think this was the best solution and have reverted to using the css_element suggestion. However, I would be willing to make changes to the folder create dialog box as well to boost accessibility.

Thanks.

Average of ratings: -
In reply to Ramindu Deshapriya

Re: Behat: How do I select from two buttons with the same value?

by Tim Hunt -
Picture of Core developers Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Sorry, I was lazy and posted without looking at the interface in question.

If the second button is in a modal pop-up then that is fine, it is not an accessibility problem.

The fix there is to use the more specific step

And I click on "Create folder" "button" in the "Whatever it is called" "dialogue"

Here is a real example from mod_quiz: https://github.com/moodle/moodle/blob/master/mod/quiz/tests/behat/attempt_require_previous.feature#L99

Average of ratings: -
In reply to Tim Hunt

Re: Behat: How do I select from two buttons with the same value?

by Ramindu Deshapriya -

Hi Tim,

While in the Quiz example you provided the dialog box contains the identifiable 'Confirmation' header, the Create Folder dialog does not have any identifiable attribute associated with it. Therefore I believe I will have to go with the css_element method.

Thanks

Average of ratings: -
In reply to Itamar Tzadok

Re: Behat: How do I select from two buttons with the same value?

by Mariusz Szot - 
I click on "div.viewlink a" "css_element"
Can You explain this scenario step to Your customer? My first question would be: 

- What is that div.viewlink thing? can I see it?

-What is that css_element? Where can I see it? 

- How this is related to my business? what value does this brings? there are better tools to test ui... 

Average of ratings: -
In reply to Mariusz Szot

Re: Behat: How do I select from two buttons with the same value?

by Ramindu Deshapriya -

Hi Mariusz,

This is a valid concern, however in some cases Moodle does not have the required elements which would help make the tests more readable, and this is no doubt being fixed continuously. 

Thanks.

Average of ratings: -