自動化測試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('[e-mail]').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()