Test Cypress pour obtenir les attributs des éléments

Question

Je viens de commencer à développer un nouveau projet de test pour ajouter des tests Cypress à une application ExtJS. ExtJS utilise des ID dynamiques, nous utilisons donc différents sélecteurs pour identifier les éléments.

Maintenant, si j'utilise du Javascript simple, je peux obtenir les propriétés et appeler la méthode de l'élément sélectionné comme ceci :

ele = document.getElementById('tdscombo-1108')
<div class=​"x-field x-form-item x-form-item-default x-form-type-text x-field-default x-anchor-form-item" role=​"presentation" id=​"tdscombo-1108" data-cy=​"broadcast_type" style=​"width:​ 625px;​">​…​</div>​

ele.id
'tdscombo-1108'

ele.role
'presentation'

ele.style
CSSStyleDeclaration {0: 'width', accentColor: '', additiveSymbols: '', alignContent: '', alignItems: '', alignSelf: '', …}`

ele.getAttribute('data-cy')
'broadcast_type'

Lorsque vous travaillez avec Cypress et utilisez cy.get pour faire la même chose, cy.get('[data-cy="broadcast_type"]').invoke('attr','data-cy') et cy.get('[data-cy="broadcast_type"]').its('data-cy') Les deux renvoient des objets Cypress $Chainer. Je ne sais pas ce que c'est.

La chose la plus proche que j'ai, c'est la course à pied cy.get('[data-cy="broadcast_type"]').then((elem) => {Object.values(elem[0].attributes).forEach((v) => {console.log(v )})}); Cela m'a donné

class=​"x-field x-form-item x-form-item-default x-form-type-text x-field-default x-anchor-form-item x-field-focus"
role=​"presentation"
id=​"tdscombo-1225"
data-cy=​"broadcast_type"
style=​"width:​ 625px;​"

Ceux-ci ressemblent chacun à une sorte d'objet et je ne parviens pas à accéder aux propriétés comme ceci : v.id. It says undefined. Je veux juste pouvoir accéder à ces propriétés sous forme de paires clé-valeur, comme dans le simple Javascript ci-dessus.

Voici ExtJS ComboBox

Answer 1

Eh bien, vous avez déjà donné la réponse quelque part mais je peux la clarifier pour vous.

Voici les équivalents Javascript, jQuery et Cypress :

// getting the element

const element = document.getElementById('tdscombo-1108')  // js
const $element = Cypress.$('tdscombo-1108')               // jQuery
cy.get('#tdscombo-1108').then($element => {               // Cypress

// getting role 

element.getAttribute('role')                                     // js
$element.attr('role')                                            // jQuery
cy.get('#tdscombo-1108').invoke('attr', 'role').then(role => {   // Cypress  

// getting width

element.style.width                                              // js
$element.css('width')                                            // jQuery
cy.get('#tdscombo-1108').invoke('css', 'width').then(width => {  // Cypress

Vous apprendrez quelques variantes si vous les pratiquez sur la page en direct.