Cypress-元素的输入操作

type:输入

clear:清除

focus:聚焦

blur:取消聚焦

submit:表单提交

describe("输入", () => {
    it('输入操作', () => {
        cy.visit("https://example.cypress.io/commands/actions")

        // focus聚焦-Password输入框
        cy.get('#password1').focus().type("123456")

        // blur取消聚焦-Full Name输入框
        cy.get('#fullName1').type("this is name").blur()

        // 在form中使用submit方法提交表单
        cy.get('#couponCode1').type("table")
        // submit一定式form元素才能调用
        cy.get('.action-form').submit()

    })
})

 

 

 

click:左键点击

dbclick:左键双击

rightclick:右键点击

describe("点击", () => {
    it('点击操作', () => {
        cy.visit("https://example.cypress.io/commands/actions")
        // 双击
        cy.get('.action-div').dblclick()
        // 右键点击
        cy.get('.rightclick-action-div').rightclick()

    })
})

 

 

 

 

元素选择操作：

单选、多选：check()

下拉框元素选择操作：select()

 

单选、多选

describe("点击", () => {
    it('点击操作', () => {
        cy.visit("https://example.cypress.io/commands/actions")
        // 全选操作,.not('[disabled]'):代表忽略掉不能选择的选项
        cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]').check()

        // 全选操作，即使是disabled不可选也需要选择上
        cy.get('.action-checkboxes [type="checkbox"]').check({"force":true})

        // 取消所有选择,如果遇到disabled不可选操作就会停止，并报错
        // cy.get('.action-checkboxes [type="checkbox"]').uncheck()

        // 取消所有选择,包含disabled不可选操作
        cy.get('.action-checkboxes [type="checkbox"]').uncheck({"force":true})

        // 选择某个选项
        cy.get('.action-checkboxes [type="checkbox"]').check('checkbox3').blur()

        // 选择指定的两个选项
        cy.get('.action-multiple-checkboxes [type="checkbox"]').check(['checkbox2','checkbox3'])

        // 单选操作,指定操作类型为radio,对应选择框的value为radio1
        cy.get('.action-radios [type="radio"]').check('radio1')
    })
})

 

 

下拉框元素选择:

describe("下拉选择框", () => {
    it('单选和多选', () => {
        cy.visit("https://example.cypress.io/commands/actions")
        // 选择单个，text方式选择
        // cy.get('.action-select').select('apples')
        // 通过value方式选择
        // cy.get('.action-select').select('fr-oranges')


        // 多选操作，根据value进行选择.多选操作定位元素，需要在元素列表进行定位
        cy.get('.action-select-multiple').select(['fr-apples','fr-oranges'])
    })
})

 

 

 

全局窗口滚动操作：scroll

describe("下拉选择框", () => {
    it('单选和多选', () => {
        cy.visit("https://example.cypress.io/commands/actions")
        // 滚动到指定元素并输入信息
        cy.get('#description').scrollIntoView().type("hello")
        cy.wait(2000)

        // 滚动到最顶端
        cy.scrollTo('top')
        cy.wait(2000)

        // 滚动到最底部
        cy.scrollTo('bottom')
        cy.wait(2000)

        // 滚动到指定位置
        cy.scrollTo(0, 250)
        cy.wait(2000)

        // 通过百分比滚动
        cy.scrollTo('0%', '50%')
        cy.wait(2000)
    })
})

 

 

全局页面内的局部窗口滚动操作

describe("下拉选择框", () => {
    it('单选和多选', () => {
        cy.visit("https://example.cypress.io/commands/actions")
        // 滚动到可视范围内，然后操作
        cy.get('#scroll-horizontal').scrollIntoView().scrollTo('right')

        // 移动到中间位置
        cy.get('#scroll-vertical').scrollTo('center')
        cy.wait(2000)

        // 移动到百分之80 的地方，其他操作见范例
        cy.get('#scroll-vertical').scrollTo('0', '80%')
        cy.wait(2000)

    })
})