自动化测试Cypress（二）

   cypress 官网案例

describe('Firestarter', () => {

    it('has a heading', () => {    //  这个地方时你第一个测试的名字。    

      cy.contains('Welcome to Firestarter');

      // or...

      cy.get('h1').should('contain', 'Welcome to Firestarter');

    });

});

  先以官网的例子作为参考 ，说一下cypress的相关指令

1  cy.get（‘’）  

                 通过选择器或别名获取一个或多个DOM元素 该命令的查询行为与$(…)jQuery中的工作方式完全匹配。 

                 （1） cy.get('h1') 直接通过表标签名字获取

                 （2） cy.get('.class') 通过class 名字获取

                 （3）cy.get('#id') 同坐id名字获取

                 （4）cy.get('.list > li') 获取下面的 li 元素

                 （5）cy.get('button[type=submit]') 获取type=submit 的button元素

                 （6）也可以在文件的开头用const 定义，在整个页面都可以直接拿来用

const btn = '.btn'
Then('vehicle  as  btn btn ', item => {
cy.get('h1')
cy.get('.side')
cy.get('#side')
cy.get('.list > li')
cy.get('button[type=submit]') 
cy.get(btn)
});

 2 cy.contains('')

            获取包含文本的DOM元素。

                    (1)  cy.contains('Hello ')  获取文本为hello的元素

        （2）cy.contains('ul', 'apples')获取ul下面为apples的元素

 
Then('vehicle  as  btn btn ', item => {
   cy.contains('Hello ')  
   cy.contains('ul', 'apples')
});

3  add('') 

          创建一个断言。断言将自动重试，直到它们通过或超时。 与.should（‘’）一样

         

cy
  .get('nav')                      
  .should('be.visible')              
  .and('have.css', 'font-family')    
  .and('match', /serif/)             

4   .as(' ')  

          创建一个别名 

   

it('disables on click', function () {
  cy.get('button[type=submit]').as('submitBtn')
  cy.get('@submitBtn').click()
})

5  .blur(‘’)

        模糊聚焦的元素。

cy.get('[type="email"]').type('me@email.com').blur()

6  .check(‘’)

        选中复选框或单选。  此元素必须是<input>with类型checkbox或radio。 运行之后复选框就是选中状态

cy.get('[type="checkbox"]').check()  

7. .children(‘’)

       获取一组DOM元素中每个DOM元素的子元素。

cy.get('nav').children()  

8 .clear() 

     清除input或的值textarea。

cy.get('[type="text"]').clear()

9 .click() 

     单击一个DOM元素。

cy.get('.btn').click()  

10 .dblclick() 

     双击一个DOM元素。 

cy.get('button').dblclick()