Cypress - Get [value] value property from mat-button-toggle-group

Question

I have a selector to <mat-button-toggle-group [value]="myValue"></mat-button-toggle-group>

I want to have access to [value] value, and for that I do.

buttonToggleGroupSelector.should('exist').and('has.value', 'MyValue');

But this returns an empty string and not the attribute value.

@AlapanDas, thank you buttonToggleGroupSelector .should('exist') .and($el => expect($el) .to.equal('MyValue')); - I Have tried like this and it returns , i already try to do $el.attr('value') to and no success , if i add the attribute value without the [] cypress can get the value, but not with brakets, and whiteout the brakets i cannot make the bind. — Hugo Seleiro, Feb 03 '22 at 17:56

score 5 · Answer 1 · answered Feb 05 '22 at 21:52

5

When you use

buttonToggleGroupSelector.should('exist').and('has.value', 'MyValue');

Cypress is looking for a value property, but you want the value attribute

buttonToggleGroupSelector.should('exist').and('has.attr', 'value', 'MyValue');

answered Feb 05 '22 at 21:52

Leta Waldergrave

score 1 · Answer 2 · answered Feb 03 '22 at 17:09

1

You can use the invoke() method like so:

buttonToggleGroupSelector.invoke('attr', '[value]').should('eq', 'MyValue')

answered Feb 03 '22 at 17:09

Manuel Abascal

You can also try without the the brackets around `'[value]'`. – Manuel Abascal Feb 03 '22 at 17:10
Thank you, Manuel, yes, I have tried with the brackets and without the brakets, still return undefined :( – Hugo Seleiro Feb 03 '22 at 17:13
1

i notice if i declare without the brackets, i can get the value, but if i have no brackets i cannot make the bind. – Hugo Seleiro Feb 03 '22 at 17:59
It's working then? You might have to play with it but it should work. I need to test in live environment tbh – Manuel Abascal Feb 03 '22 at 18:07
i mapping an input variable to the [value] attribute in , i think this value is undefined when the test starts. that is what is making sense to me. – Hugo Seleiro Feb 03 '22 at 18:09
Can you try adding some assertions `buttonToggleGroupSelector.shoud('exist').and('be.visible').invoke('attr', '[value]').should('eq', 'MyValue')`, – Manuel Abascal Feb 03 '22 at 18:13
Hello Manuel, now i get -- is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: hidden, scroll or auto – Hugo Seleiro Feb 04 '22 at 08:03
I think this answer will solve your problem: https://stackoverflow.com/a/66647365/9884190 – Manuel Abascal Feb 04 '22 at 19:15

score 0 · Answer 3 · answered Feb 03 '22 at 17:45

0

Assuming that buttonToggleGroupSelector returns something like cy.get('mat-button-toggle-group'), then you can do:

buttonToggleGroupSelector.should('have.attr', '[value]', 'myValue')

answered Feb 03 '22 at 17:45

Alapan Das

it still returns undefined, but i notice if i declare without the brackets, i can get the value, but if i have no brackets i cannot make the bind. – Hugo Seleiro Feb 03 '22 at 17:58

3 Answers3