
Cypress web自动化4-操作页面元素(Actions行为事件)
发布日期:2021-05-09 09:02:53
浏览次数:15
分类:博客文章
本文共 7653 字,大约阅读时间需要 25 分钟。
������
ui���������������������������������������������������������������������������������������������������������������������������������
���������������������checkbox,radio,���������������.type()
������������������������������
cy.get('.action-email') .type('fake@email.com').should('have.value', 'fake@email.com') // .type() with special character sequences .type('{leftarrow}{rightarrow}{uparrow}{downarrow}') .type('{del}{selectall}{backspace}') // .type() with key modifiers .type('{alt}{option}') //these are equivalent .type('{ctrl}{control}') //these are equivalent .type('{meta}{command}{cmd}') //these are equivalent .type('{shift}') // Delay each keypress by 0.1 sec .type('slow.typing@email.com', { delay: 100 }) .should('have.value', 'slow.typing@email.com')cy.get('.action-disabled') // Ignore error checking prior to type // like whether the input is visible or disabled .type('disabled error checking', { force: true }) .should('have.value', 'disabled error checking')
.focus()
���������DOM������������������.focus������������
cy.get('.action-focus').focus() .should('have.class', 'focus') .prev().should('have.attr', 'style', 'color: orange;')
.blur()
���������������������������������������������������
cy.get('.action-blur').type('About to blur').blur() .should('have.class', 'error') .prev().should('have.attr', 'style', 'color: red;')
.clear()
������DOM������
cy.get('.action-clear').type('Clear this text') .should('have.value', 'Clear this text') .clear() .should('have.value', '')
.submit()
������form������
cy.get('.action-form') .find('[type="text"]').type('HALFOFF')cy.get('.action-form').submit() .next().should('contain', 'Your form has been submitted!')
.click()
������DOM������
cy.get('.action-btn').click()// clicking in the center of the element is the defaultcy.get('#action-canvas').click()cy.get('#action-canvas').click('topLeft')cy.get('#action-canvas').click('top')cy.get('#action-canvas').click('topRight')cy.get('#action-canvas').click('left')cy.get('#action-canvas').click('right')cy.get('#action-canvas').click('bottomLeft')cy.get('#action-canvas').click('bottom')cy.get('#action-canvas').click('bottomRight')// .click() accepts a an x and y coordinate// that controls where the click occurs :)cy.get('#action-canvas') .click(80, 75) .click(170, 75) .click(80, 165) .click(100, 185) .click(125, 190) .click(150, 185) .click(170, 165)// click multiple elements by passing multiple: truecy.get('.action-labels>.label').click({ multiple: true })// Ignore error checking prior to clickingcy.get('.action-opacity>.btn').click({ force: true })
.dblclick()
������ DOM ������
cy.get('.action-div').dblclick().should('not.be.visible')cy.get('.action-input-hidden').should('be.visible')
.rightclick()
������ DOM ������
cy.get('.action-div').rightclick().should('not.be.visible') cy.get('.action-input-hidden').should('be.visible')
.check()
������ checkbox or radio ���������
// By default, .check() will check all// matching checkbox or radio elements in succession, one after anothercy.get('.action-checkboxes [type="checkbox"]').not('[disabled]') .check().should('be.checked')cy.get('.action-radios [type="radio"]').not('[disabled]') .check().should('be.checked')// .check() accepts a value argumentcy.get('.action-radios [type="radio"]') .check('radio1').should('be.checked')// .check() accepts an array of valuescy.get('.action-multiple-checkboxes [type="checkbox"]') .check(['checkbox1', 'checkbox2']).should('be.checked')// Ignore error checking prior to checkingcy.get('.action-checkboxes [disabled]') .check({ force: true }).should('be.checked')cy.get('.action-radios [type="radio"]') .check('radio3', { force: true }).should('be.checked')
.uncheck()
������checkbox or radio ������������
// By default, .uncheck() will uncheck all matching// checkbox elements in succession, one after anothercy.get('.action-check [type="checkbox"]') .not('[disabled]') .uncheck().should('not.be.checked')// .uncheck() accepts a value argumentcy.get('.action-check [type="checkbox"]') .check('checkbox1') .uncheck('checkbox1').should('not.be.checked')// .uncheck() accepts an array of valuescy.get('.action-check [type="checkbox"]') .check(['checkbox1', 'checkbox3']) .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')// Ignore error checking prior to uncheckingcy.get('.action-check [disabled]') .uncheck({ force: true }).should('not.be.checked')
.select()
select ���������
// Select option(s) with matching text contentcy.get('.action-select').select('apples')cy.get('.action-select-multiple').select(['apples', 'oranges', 'bananas'])// Select option(s) with matching valuecy.get('.action-select').select('fr-bananas')cy.get('.action-select-multiple') .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
.scrollIntoView()
���������������������,���������������������������������������������������������������������������
Horizontal ScrollVertical ScrollBoth Scroll
cy.get('#scroll-horizontal button') .should('not.be.visible')// scroll the button into view, as if the user had scrolledcy.get('#scroll-horizontal button').scrollIntoView() .should('be.visible')cy.get('#scroll-vertical button') .should('not.be.visible')// Cypress handles the scroll direction neededcy.get('#scroll-vertical button').scrollIntoView() .should('be.visible')cy.get('#scroll-both button') .should('not.be.visible')// Cypress knows to scroll to the right and downcy.get('#scroll-both button').scrollIntoView() .should('be.visible')
cy.scrollTo()
���������������������������
// if you chain .scrollTo() off of cy, we will// scroll the entire windowcy.scrollTo('bottom')cy.get('#scrollable-horizontal').scrollTo('right')// or you can scroll to a specific coordinate:// (x axis, y axis) in pixelscy.get('#scrollable-vertical').scrollTo(250, 250)// or you can scroll to a specific percentage// of the (width, height) of the elementcy.get('#scrollable-both').scrollTo('75%', '25%')// control the easing of the scroll (default is 'swing')cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })// control the duration of the scroll (in ms)cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
.trigger()
���DOM���������������������
cy.get('.trigger-input-range') .invoke('val', 25) .trigger('change') .get('input[type=range]').siblings('p') .should('have.text', '25')
QQ������������939110556
发表评论
最新留言
很好
[***.229.124.182]2025年04月22日 01时02分27秒
关于作者

喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Java时间类Date全解析
2021-05-10
Glide4实现网络图片加载进度监听
2021-05-10
MFC编辑框中追加文本
2021-05-10
一季度销售暴增210%,负债持续改善的金辉控股,有多少水分?
2021-05-10
linux系统下双屏显示
2021-05-10
基于linux的VScode开发
2021-05-10
关于高斯模糊核
2021-05-10
实验笔记之——octave layer(4路数据)
2021-05-10
PDF.js —— vue项目中使用pdf.js显示pdf文件(流)
2021-05-10
vue源码解析 —— 数据绑定
2021-05-10
JS单线程的理解
2021-05-10
vue解决数据更新,界面未更新的方法
2021-05-10
我用wxPython搭建GUI量化系统之wx.grid实现excel功能
2021-05-10
我用wxPython搭建GUI量化系统之wx.Toolbar实现工具栏
2021-05-10
我用wxPython搭建GUI量化系统之wx.TextCtrl实现文本框
2021-05-10
我用wxPython搭建GUI量化系统之最小架构的运行
2021-05-10
我用wxPython搭建GUI量化系统之Sizer布局管理与页面切换
2021-05-10
我用wxPython搭建GUI量化系统之多只股票走势对比界面
2021-05-10
我用wxPython搭建GUI量化系统之Pandas特性的财务选股工具
2021-05-10
我用wxPython搭建GUI量化系统之财务选股工具添加日历和排序
2021-05-10