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() 清除内容 //scrollIntoView() 滚动页面到该元素所在位置 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() //清除用户名
cy.get('li[class="checkout-payment-item"]').last().scrollIntoView().should('be.visible');
-
断言命令一般用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')
-
具体看下方官网文档说明链接
二. 常见的元素定位方法 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 定位
