cypress基础教程2-元素定位

1. get定位

1. id定位
2. class定位
3. CSS selector定位
4. 其他属性定位

​// 以上方的图片中的button按钮为例// 通过id定位cy.get('#query-btn').should('contain', 'Button')
​// 通过class定位cy.get('.query-btn').should('contain', 'Button')
​// 通过父元素的id、class加当前元素进行定位cy.get('#querying .well>button:first').should('contain', 'Button')
​

​// 通过其他属性定位cy.get('[data-test-id="test-example"]').should('have.class', 'example')
​// cy.get()生成一个jQuery对象，可以通过invoke获取其属性值cy.get('[data-test-id="test-example"]').invoke('attr', 'data-test-id').should('equal', 'test-example')
​// cy.get()生成一个jQuery对象，可以通过invoke获取其CSS属性cy.get('[data-test-id="test-example"]').invoke('css', 'position').should('equal', 'static')
​// 或者直接通过should和and判断其属性值cy.get('[data-test-id="test-example"]').should('have.attr', 'data-test-id', 'test-example').and('have.css', 'position', 'static')
​// id和role属性组合定位cy.get('#main[role=button]').click()

2. contains定位

1. 直接使用字符串定位元素
2. 使用正则表达式匹配字符串定位元素
3. selector和文字组合定位

cy.get('.query-list')// 直接使用字符串定位元素.contains('bananas').should('have.class', 'third')
​
// 使用正则表达式匹配字符串定位元素
cy.get('.query-list').contains(/^b\w+/).should('have.class', 'third')
​
// selector和文字组合定位
cy.get('#querying').contains('ul', 'oranges').should('have.class', 'query-list')

3. within 在一个元素中寻找其他元素

cy.get('.query-form').within(() => {cy.get('input:first').should('have.attr', 'placeholder', 'Email')cy.get('input:last').should('have.attr', 'placeholder', 'Password')
})

4. 获取根元素

// 获取页面根元素
cy.root().should('match', 'html')
​
cy.get('.query-ul').within(() => {// 获取within中的根元素，也就是外层的'.query-ul'cy.root().should('have.class', 'query-ul')
})