Cypress-简单的元素定位

通过cypress打开页面进行元素定位

 

 

博客园登录案例：

describe("登录", () => {
    it('输入用户密码并登录', () => {
        cy.visit("https://account.cnblogs.com/signin")
        // 获取账号输入框，并输入账号
        cy.get("#mat-input-0").type("zaizai")
        // 获取密码输入框，并输入密码;focus()这个方法是聚焦操作，博客园这里不使用也可以输入信息，其他操作系统如果输入不进去，可以试试
        cy.get("#mat-input-1").focus().type("123456")
        // 点击登录
        cy.get(".action-button").click()
    });
})

 

 

辅助定位元素

 

 cy.get().children(selector):子元素特征不是很明显使用此方法：先获取他的父元素，然后通过children方法获得他的子元素信息

cy.get().parent():父元素特征不是很明显的时候使用此方法:先找到他的子元素，然后使用parent方法获取到他的父元素

sibling():代表同级关系

prev()：代表他前面的元素

next()：代表他后面的元素

 

describe("find element examples", () => {
    it('find element', () => {
        cy.visit("https://example.cypress.io/commands/querying")
        // 通过父级元素找到Email的位置
        let email_el = cy.get('.query-form').children('input:first')
        email_el.type("this is email")

        // 通过email元素找到他的同级元素password
        let password_el = email_el.siblings('input')
        password_el.type("123456")

        // 通过password_el找到他前面的元素email_el
        email_el = password_el.prev('input')
        email_el.clear()

        // 通过email_el找到他后面的元素password_el
        password_el = email_el.next('input')
        password_el.clear()

    });
})

 

 

 

within 元素定位

describe("find element examples", () => {
    it('find element', () => {
        cy.visit("https://example.cypress.io/commands/querying")
        // 使用within方式，在一个表达式中同时操作一个父元素中的多个子元素
        cy.get('.query-form').within( ($form) => {
            cy.get('input:first').type("this is email")
            cy.get('input:last').type("123456")

        })
        

    });
})

 

 

文本定位方法：contains()

describe("find element examples", () => {
    it('find element', () => {
        cy.visit("https://example.cypress.io/commands/querying")
        // 使用within方式，在一个表达式中同时操作一个父元素中的多个子元素
        cy.contains("Submit").click()
        })
        

    });