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之与元素交互

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之与元素交互

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的三种用法

本栏目推荐文章
• 用jQuery查找元素
• 【算法】【线性表】【链表】删除排序链表中的重复元素 II
• 【算法】【线性表】【链表】删除排序链表中的重复元素
• 【灌水】假如奥运会奖牌是元素周期表
• 01-HTML元素
• css中什么是伪类和伪元素
• 二分查找法与双指针移动元素
• 在JavaScript中使用includes函数检查数组中是否包含某个元素
• CSS运动效果：为网页元素添加流动和运动效果
• 代码随想录 day13 滑动窗口最大值 前 K 个高频元素