ui自动化操作页面上的元素，常用的方法就那么几个，输入文本，点击元素，清空文本，点击按钮。
还有一些特殊的checkBox,radio,滚动条等。
往输入框输入文本元素
Email addressdisabled Textarea
cy.get('.action-email')
.type('[email protected]').should('have.value', '[email protected]')
// .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('[email protected]', { delay: 100 })
.should('have.value', '[email protected]')
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（）命令
Password
cy.get('.action-focus').focus()
.should('have.class', 'focus')
.prev().should('have.attr', 'style', 'color: orange;').blur()判断输入框失去焦点时候，按钮的颜色
Full Name
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表单
Coupon CodeSubmit
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 default
cy.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: true
cy.get('.action-labels>.label').click({ multiple: true })
// Ignore error checking prior to clicking
cy.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()
// By default, .check() will check all // matching checkBox or radio elements in succession, one after another cy.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 argument cy.get('.action-radios [type="radio"]') .check('radio1').should('be.checked') // .check() accepts an array of values cy.get('.action-multiple-checkBoxes [type="checkBox"]') .check(['checkBox1', 'checkBox2']).should('be.checked') // Ignore error checking prior to checking cy.get('.action-checkBoxes [disabled]') .check({ force: true }).should('be.checked') cy.get('.action-radios [type="radio"]') .check('radio3', { force: true }).should('be.checked').uncheck()
// By default, .uncheck() will uncheck all matching // checkBox elements in succession, one after another cy.get('.action-check [type="checkBox"]') .not('[disabled]') .uncheck().should('not.be.checked') // .uncheck() accepts a value argument cy.get('.action-check [type="checkBox"]') .check('checkBox1') .uncheck('checkBox1').should('not.be.checked') // .uncheck() accepts an array of values cy.get('.action-check [type="checkBox"]') .check(['checkBox1', 'checkBox3']) .uncheck(['checkBox1', 'checkBox3']).should('not.be.checked') // Ignore error checking prior to unchecking cy.get('.action-check [disabled]') .uncheck({ force: true }).should('not.be.checked').select()
select 选项框
--Select a fruit--applesorangesbananasapplesorangesbananas
// Select option(s) with matching text content
cy.get('.action-select').select('apples')
cy.get('.action-select-multiple')
.select(['apples', 'oranges', 'bananas'])
// Select option(s) with matching value
cy.get('.action-select').select('fr-bananas')
cy.get('.action-select-multiple')
.select(['fr-apples', 'fr-oranges', 'fr-bananas']).scrollIntoView()内嵌滚动条滑动,三种情况：左右滑动，上下滑动，同时可以左右上下滑动
Horizontal ScrollI'm HereVertical ScrollI'm HereBoth ScrollI'm Here
cy.get('#scroll-horizontal button')
.should('not.be.visible')
// scroll the button into view, as if the user had scrolled
cy.get('#scroll-horizontal button').scrollIntoView()
.should('be.visible')
cy.get('#scroll-vertical button')
.should('not.be.visible')
// Cypress handles the scroll direction needed
cy.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 down
cy.get('#scroll-both button').scrollIntoView()
.should('be.visible')cy.scrollTo()浏览器自带的滚动条
// if you chain .scrollTo() off of cy, we will
// scroll the entire window
cy.scrollTo('bottom')
cy.get('#scrollable-horizontal').scrollTo('right')
// or you can scroll to a specific coordinate:
// (x axis, y axis) in pixels
cy.get('#scrollable-vertical').scrollTo(250, 250)
// or you can scroll to a specific percentage
// of the (width, height) of the element
cy.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元素上触发事件
Range Input0
cy.get('.trigger-input-range')
.invoke('val', 25)
.trigger('change')
.get('input[type=range]').siblings('p')
.should('have.text', '25')版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
