Cypress之与元素交互

元素定位选择器

页面元素交互

定位元素辅助方法

可操作类型

模拟键盘操作

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

作用：

展示额外的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之与元素交互

元素定位选择器

页面元素交互

定位元素辅助方法

可操作类型

模拟键盘操作

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

作用：

展示额外的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之与元素交互

元素定位选择器

页面元素交互

定位元素辅助方法

可操作类型

模拟键盘操作

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

作用：

展示额外的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的三种用法