大家好，我是阿萨。上一次 如何调试cypress脚本？讲解了debug 和pause 这2个关键字。通过暂停和调试，大家学会了如何调试脚本。肯定都想着多写一些脚本，锻炼下自己的能力呢。
今天阿萨就给大家讲解下如何定位元素。
一 cy.get获取元素
- 如何定位一个button？和css selector 有点类似。
cy.get('#query-btn').should('contain', 'Button')//类似jquery的方法cy.get('.query-btn').should('contain', 'Button') cy.get('#querying .well>button:first').should('contain', 'Button')
2. 如何定位一个attribute data-test-id 是sarah的div？
cy.get('[data-test-id="Sarah"]').should('have.class', 'example')cy.get('[data-test-id="Sarah"]') .invoke('attr', 'data-test-id') .should('equal', 'test-example') // 可以直接获取它对的css 属性cy.get('[data-test-id="Sarah"]') .invoke('css', 'position') .should('equal', 'static')
二 cy.contains() 获取元素方式
1. 如何获取一个列表里的某个元素？比如下图
cy.get('.query-list') .contains('bananas').should('have.class', 'third') // 正则表达是 cy.get('.query-list') .contains(/^b\w+/).should('have.class', 'third') cy.get('.query-list') .contains('apples').should('have.class', 'first') // 把具体值传给contains cy.get('#querying') .contains('ul', 'oranges') .should('have.class', 'query-list') cy.get('.query-button') .contains('Save Form') .should('have.class', 'btn')
三.cy.within()获取元素的方式。根据元素里面的placeholder 去定位元素。
比如下图：
cy.get('.query-form').within(() => { cy.get('input:first').should('have.attr', 'placeholder', 'Email') cy.get('input:last').should('have.attr', 'placeholder', 'Password')})
四.cy.root()找根元素。这个是查找相对的根元素，不是绝对的根元素。
// 默认根是document cy.root().should('match', 'html') cy.get('.query-ul').within(() => { // 在上图的例子里根元素说是ul dom 元素 cy.root().should('have.class', 'query-ul') })
五.查找元素的最佳实践。
<button id="main" class="btn btn-large" name="submission" role="button" data-cy="submit" > Submit </button>
HTML 中有一个这样的button。常见的button 的定位方法：
- cy.get('button').click()
- cy.get('.btn.btn-large').click()
- cy.get('#main').click()
- cy.get('[name="submission"]').click()
- cy.contains('Submit').click()
- cy.get('[data-cy="submit"]').click()
以上6种定位元素的方式里推荐使用顺序是6 >5>4>3>2>1.使用data-*属性 作为选择器提供上下文，并将它们与CSS或JS更改隔离开来。这个其实也不难理解。比如我们人去查找元素的时候就会先看Button的文本是submit. 所以就很好理解了。
六。定位元素或者操作元素注意事项。
定位元素或者操作元素之前，我们必须确保满足以下条件。将元素滚动到视图中。确保元素没有被隐藏。确保元素没有被禁用。确保元素没有分离。确保元素不是只读的。确保元素没有动画。确保元素没有被覆盖。你学会了吗？如果觉得阿萨的内容对你有帮助，欢迎围观点赞。
