Cypress之与元素交互

Cypress之与元素交互

1. 元素定位选择器

2. 页面元素交互

3. 定位元素辅助方法

4. 可操作类型

5. 模拟键盘操作

---

在介绍元素交互之前需要介绍一下命令日志：

作用：

展示额外的Log信息

• cy.route()
• cy.spy()
• cy.stub()

Cypress特有的定位器data-*

• data-cy
• data-test
• data-testid

Cypress专有的定位器,仅用来测试

获取方式:

cy.get('[data-cy=]').click()

常规选择器

• #id选择器

cy.get('#main').click()--->button的id属性

• .class选择器

cy.get('.btn').click()--->button的class属性

• attributes属性选择器

cy.get('button[id=main]').click()

• :nth-child(n)选择器

示例:

<ul>
    <li id="id">1</li>
    <li>2</li>
    <li>3</li>
</ul>

cy.get('ul>li:nth-child(2)')

cy.get('li:nth-child(2)')

• Cypress.$定位器(jQuery选择器)

Cypress.$('#main')

• .find(selector)

cy.get('ul').find('#id')

• .get(selector)

cy.get('#id')

• .contains(selector)

cy.contains('1')--->直接查找ul下的li内容为1的--->直接通过内容查找

cy.contains('li', '1')--->直接通过内容查找，很强大

示例代码:

for(const user of testLoginUser) {
            it(user.summary, function() {
                // cy.get('ul>li:nth-child(2)')
                // .as('change_Btn');
                // cy.get('@change_Btn')
                // .click();
                cy.contains('li', '密码登录')
                .click();

                cy.get('#agree')
                .click();

                // 检查元素处于被选中状态
                cy.get('#agree')
                .should('be.checked');

                cy.get('#name')
                .type(user.username);
                cy.get('#password')
                .type(user.password);

                cy.get('button[type=submit]')
                .should('have.class', 'button__StyledButton-sc-1xvpoi0-0')
                .should('have.class', 'DNJh atom__SumbitButton-sc-1f08aeq-3')
                .should('have.class', 'jdbddl')
                .as('submit_Btn');
                cy.get('@submit_Btn')
                .click();
            });
        }

表达式查找:

cy.contains(/^i\w+/)--->基于表达式查找

重点:

contains的三种用法

Cypress与页面元素交互

• .find(selector)

特点:

不能直接连cy

示例代码:

<ul>
    <li id="id">1</li>
    <li>2</li>
    <li>3</li>
</ul>

    it('A Test About find', () => {
        cy.get('ul')
        .find('#id')
        .click();
    });

• .children()
• .parents()--->DOM元素的所有父元素
• .parent()--->DOM元素的第一层父元素

示例代码:

    it('Test Function About Children', () => {
        cy.get('ul')
        .children();
        cy.get('li')
        .parents();
    });

• .siblings()--->获取DOM元素的所有同级元素

cy.get('#id').siblings()

• .first()--->匹配给定DOM对象集的第一个元素

cy.get('#id').first()

• .last()--->匹配给定DOM对象集的最后一个元素

cy.get('ul').last()

• .prev()--->给定DOM对象紧跟着的上一个同级元素

cy.get('ul').prev()

• .prevAll()--->给定DOM对象之前的所有的同级元素

• .next()--->给定DOM对象紧跟着的下一个同级元素

• .nextAll()

• .nextUntil()--->匹配给定DOM对象之后的所有同级元素,直到遇见Until里定义的元素为止

cy.get('#id').nextUntil('#kevin')

• .prevUntil()--->匹配给定DOM对象之前的所有同级元素,直到遇见Until里定义的元素为止
• .each()--->遍历数组及类似结构(数组或对象有length属性)

cy.get('#ul').each(($li) => {cy.log($li.text())});

• .eq()

cy.get('#ul').eq(0)