(三)Cypress之常用方法詳述

1.1 常見基本方法

• beforeEach：執行測試用例之前操作，一個  describe()  或 context() 內有多少個測試用例 it() ，就會執行幾次 beforeEach()

• visit：在前置鈎子函數beforeEach里面訪問對應的鏈接

1.2 實例說明：

1  beforeEach(() => {
2       cy.visit('cashticket?isdebug=true&userid=pd86068&isskipoauth=true');
3       cy.wait(waitPageTime);
4     })

2.1 常見基本方法

• get：定位元素，用css selector定位選擇器
• type：輸入文本
• focus：元素聚焦
• should：斷言，hava.value 是元素的value屬性值，判斷是否為‘某個值’
• wait：等待數毫秒或等待別名資源解析后，再繼續執行下一個命令

2.2 實例說明：

it('Package Type', () => {

      cy.get('#securityControl',{timeout:timeOut}).

          focus().type('10y').wait(waitTime).

          type('{enter}').//輸入回車鍵

          should('have.value','T 0 5/8 08/15/30 91282CAE1 US91282CAE12');

          cy.wait(waitTime1);

          cy.get('#packageType>div>div>input').

          should('be.visible');

})

 

3.1獲取當前頁面URL

cy.url()

cy.url().should('contain','link')

3.2刷新頁面

//等同於F5

cy.reaload()

//等同於ctrl+F5強制刷新

cy.radload(true)

3.3設置窗口

cy.viewpoint(1024,768)

3.4利用jQuery判斷元素是否存在

const btn = '#btn'
Cypress.$(btn).length>0{
 cy.get(btn).click()
}

3.5獲取元素的屬性值

cy.get('#btn').then(function(){
   const btnTxt = $btn.text()
   cy.log(btnTxt)
})

3.6清除文本

cy.get('div>a').clear()
cycy.get('div>a').clear().type()

4.1操作單選多選按鈕

//選中
cy.get('radio').first().check('us)
//取消選中
cy.get('radio').uncheck('us)
//選中所有復選框
cy.get('[type="checkbox"]').check()
//勾選值為’ subscribe ‘和’ accept '的復選框
cy.get('form input').check(['subscribe', 'accept'])

4.2操作下拉菜單

cy.get('select').select('下拉選項的值')
cy.get('li').eq(0).click()

4.3操作彈出框

cy.get('iframe')
    .then(function($iframe){
     //定義要查找的元素
     const $body = $iframe.contents().find('body')
     //在查找到的元素中查找btn並單擊
     cy.wrap($body).find('#bin').click()
})

4.4操作被覆蓋的元素

cy.get('#btn').click({force:true})

4.5模擬鍵盤操作

cy.get('input').type('111')
cy.get('input').type('{enter}')

參考文章：https://zhuanlan.zhihu.com/p/148286130