How to address a html attribute in cypress?-CodePudding

I have a html-element, that has the following attribute: ng-reflect-name="arrow-down-circle"

How can I check with cypress, if this attribute has the text "arrow-down-circle"?

Below is the whole html-element: <ion-icon _ngcontent-wyk-c151="" slot="start" name="arrow-down-circle" color="primary" ng-reflect-name="arrow-down-circle" ng-reflect-color="primary" aria-label="arrow down circle" role="img" ></ion-icon>

(I am really new to cypress, so I apologize for any naive question!)

I have tried two commands, but both were wrong:

1.: cy.get(filter_popover).find('#ng-reflect-name').should('contain.text', 'arrow-down-circle'); 2.: cy.get(filter_popover).find('[data-cy=btn_selectDesc]').invoke('attr', 'ng-reflect-name').should('contain.text', 'arrow-down-circle');

(filter_popover is a constante, that contains a specific page where the html-element is located and data-cy=btn_selectDesc is the identifier of the html-element one hierarchy step above)

CodePudding user response：

You can try to check attribute value using have.attr, more examples can be found here.

cy.get('ion-icon').should('have.attr', 'ng-reflect-name', 'arrow-down-circle')

CodePudding user response：

One simple option is to use the value as part of your get selector

// any element with the attribute
cy.get('[ng-reflect-name="arrow-down-circle"]').should("exist")

// only ion-icon elements with the attribute
cy.get('ion-icon[ng-reflect-name="arrow-down-circle"]').should("exist")

In your example I see .find('[data-cy=btn_selectDesc]'). When using attributes as selectors, make sure you include the quotes. (.find('[data-cy="btn_selectDesc"]'))