Cypress----常见元素定位

一：常用方法和函数

• 最常用的查找元素的命令有：get | contains | find | first 等等

// cy.get（）  根据元素属性查找元素
// .last（）   查找到多个元素的情况下，选择最后一个元素  
// .first()   查找到多个元素的情况下，选择第一个元素 
// .contains('XX') 元素内容为XX
cy.get('i[class="icon-font icon-search-basic spice-seach-box-button"]').last().click()
cy.get('div[class="menu-it it-one"]').contains('我的账户').should('be.visible');

• 最常用的动作命令有：visit | click | type | realHover | focus等等

// click()                点击
// dblclick()             双击
// rightclick()           右击
// type('{enter}')        回车(模拟键盘操作)
// visit()                打开url
// type('XX')             输入XX内容(元素中输入内容)
//realHover()             鼠标悬停在按钮上
//focused()               点击元素后判断当前元素是否聚焦
//screenshot()            屏幕截图
//clear()                 清除内容
//

cy.get('input[id="keyword"]').last().type(‘张三’);           //输入内容张三
cy.get('input[id="keyword"]').last().type('{enter}');       //输入内容后，找到回车进行搜索
cy.visit('https://www.baidu.com/')                          //打开百度url
cy.get('[data-cy="button"]').realHover();                   //鼠标悬停在按钮上

//点击元素后判断当前元素是否聚焦
cy.get('.misc-form').find('#name').click()
cy.focused().should('have.id', 'name')

cy.screenshot('my-image')    // 屏幕截图，保存路径cypress/screenshots/my-image.png


cy.get('input[username="name"]').clear()      //清除用户名

• 断言命令一般用should，should常用方式：

//should('be.visible')        判断元素是否可见
//should('exist')               判断元素存在
//should('not.exist')         判断元素不存在
//should('contain','XX')     判断元素内容包含XX
//should('have.attr', 'href', '/users')      判断url包含'/users

cy.get('.check-box').should('be.visible')      //判断.check-box是可见的
cy.get('.check-box').should('exist')           //判断元素存在
cy.get('.check-box').should('not.exist')       //判断元素不存在
cy.get('div[class="menu"]')should('contain','张三')   
cy.get('div[class="menu"]').should('have.attr', 'href', '/users') 

• 具体看下方官网文档说明链接

• https://docs.cypress.io/api/commands/

        更多方法，可参考文档1&文档2

二. 常见的元素定位方法 cy.get(）

// 方式1：id 选择器
cy.get('#query-btn').should('contain','Button')

// 方式2：标签 选择器
cy.get('button').should('contain','Button')

// 方式3：属性 选择器
cy.get('[id="query-btn"]').should('contain','Button')

// 方式4：标签+属性 选择器
cy.get('button[id="query-btn"]').should('contain','Button')

// 方式5：class 选择器
cy.get('.query-btn').should('contain','Button')

// 方式6：级联混合 选择器
cy.get('#querying .well>button').should('contain','Button')

//方式7：:nth-child(n)
cy.get(tbody > tr:nth-child(1) > th')

三.混合元素定位（同时使用多种元素属性进行定位元素）

（1）  cy.get('input[type="text"].use-input').type(name)

（2）. class 定位