Ujian Cypress untuk mendapatkan atribut elemen

Question

Saya baru mula membangunkan projek ujian baharu untuk menambahkan ujian Cypress pada aplikasi ExtJS. ExtJS menggunakan ID dinamik, jadi kami menggunakan pemilih yang berbeza untuk mengenal pasti elemen.

Sekarang jika saya menggunakan Javascript mudah saya boleh mendapatkan poperties dan memanggil kaedah elemen yang dipilih seperti ini:

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'

Apabila bekerja dengan Cypress dan menggunakan cy.dapat melakukan perkara yang sama, cy.get('[data-cy="broadcast_type"]').invoke('attr','data-cy') dan cy.get('[data-cy="broadcast_type"]').its('data-cy') Kedua-duanya mengembalikan objek $Chainer Cypress. Saya tidak tahu apa itu.

Perkara paling dekat yang saya ada ialah berlari cy.get('[data-cy="broadcast_type"]').then((elem) => {Object.values(elem[0].attributes).forEach((v) => {console.log(v )})}); Ini memberi saya

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

Masing-masing kelihatan seperti objek dan saya tidak dapat mengakses sifat seperti itu: v.id. It says undefined. Saya hanya mahu dapat mengakses sifat ini sebagai pasangan nilai kunci seperti dalam Javascript mudah di atas.

Ini ialah ExtJS ComboBox

Answer 1

Nah anda sudah memberikan jawapan di suatu tempat tetapi saya boleh menjelaskannya untuk anda.

Ini adalah Javascript, jQuery dan setara 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

Anda akan mempelajari beberapa variasi jika anda mempraktikkannya di halaman langsung.