javascript Cypress测试获取元素属性

yvt65v4c 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(130)

我刚刚开始在一个新的测试项目上工作，为ExtJS应用程序添加Cypress测试。ExtJS使用动态id，所以我们使用不同的选择器来识别元素。
现在，如果我使用简单的Javascript，我可以获取所选元素的属性和调用方法，如下所示：

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'

当使用Cypress并使用cy.get执行相同的操作时，cy.get('[data-cy="broadcast_type"]').invoke('attr','data-cy')和cy.get('[data-cy="broadcast_type"]').its('data-cy')都返回Cypress $Chainer对象。我不知道那是什么
我最接近的是运行cy.get('[data-cy="broadcast_type"]').then((elem) => {Object.values(elem[0].attributes).forEach((v) => {console.log(v)})});，这给了我

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

它们看起来都像是某种对象，我无法像这样访问属性：v.id上面写着undefined我只是希望能够像上面简单的Javascript那样以键值对的形式访问这些属性。
Here is the ExtJS combobox

JavaScript

来源：https://stackoverflow.com/questions/76203930/cypress-testing-fetch-element-attributes

1条答案

按热度按时间

5f0d552i1#

你已经在某个地方给出了答案，但我可以为你澄清。
以下是JavaScript vs jQuery vs 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

如果你在一个活的页面上练习一些变化，你会学到变化。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript Cypress测试获取元素属性

1条答案

相关问题

热门标签

最新问答