Cypress-Test zum Abrufen von Elementattributen

Question

Ich habe gerade mit der Entwicklung eines neuen Testprojekts begonnen, um Cypress-Tests zu einer ExtJS-Anwendung hinzuzufügen. ExtJS verwendet dynamische IDs, daher verwenden wir unterschiedliche Selektoren, um Elemente zu identifizieren.

Wenn ich jetzt einfaches Javascript verwende, kann ich die Eigenschaften abrufen und die Methode des ausgewählten Elements wie folgt aufrufen:

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'

Wenn Sie mit Cypress arbeiten und cy.get verwenden, um dasselbe zu tun, cy.get('[data-cy="broadcast_type"]').invoke('attr','data-cy') Und cy.get('[data-cy="broadcast_type"]').its('data-cy') Beide geben Cypress $Chainer-Objekte zurück. Ich weiß nicht, was das ist.

Das, was mir am nächsten kommt, ist das Laufen cy.get('[data-cy="broadcast_type"]').then((elem) => {Object.values(elem[0].attributes).forEach((v) => {console.log(v )})}); Das hat mir

gegeben

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;​"

Diese scheinen jeweils eine Art Objekt zu sein und ich kann nicht auf die Eigenschaften zugreifen: v.id. It says undefined. Ich möchte nur in der Lage sein, auf diese Eigenschaften als Schlüssel-Wert-Paare zuzugreifen, wie im einfachen Javascript oben.

Das ist ExtJS ComboBox

Answer 1

好吧，您已经在某处给出了答案，但我可以为您澄清。

这些是 Javascript、jQuery 和 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

如果您在实时页面上练习一些变体，您就会学到这些变体。