标签：contains get Cypress 元素 选择器 cy li 交互 click

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

标签：contains,get,Cypress,元素,选择器,cy,li,交互,click
From： https://www.cnblogs.com/JunkingBoy/p/17324288.html