技術標籤：CypressCypress頁面元素操作Cypress常見元素操作

可操作型別

.click()

語法

//單擊某個元素
.click()
//帶引數的單擊,可選引數為{force:true}和{multiple:true}
.click(options)
//在某個位置單擊
.click(position)

程式碼例項

//強制單擊li元素
cy.get('li').click({force:true})
//單擊所有的li元素
cy.get('li').click({multiple:true})
//在li元素的右上角位置單擊
cy.get('li').click({'topRight'})
 

//在li元素的左上角位置單擊
cy.get('li').click({'topLeft'})
//在li元素的正上方位置點選
cy.get('li').click({'top'})
//在li元素的中心位置點選
cy.get('li').click({'center'})
//在li元素的左側位置點選
cy.get('li').click({'left'})
//在li元素的右側位置點選
cy.get('li').click({'right'})
//在li元素的左下角位置點選
cy.get('li').click({'bottomLeft'})
//在li元素的右下角位置點選
cy.get('li').click(
 
{'bottomRight'})
//在li元素的正下方位置點選
cy.get('li').click({'bottom'})
//在發現的第一個li元素上執行Shift+click操作，{release:false}標示按住不放
cy.get('body').type('{shift}',{release:false})
cy.get('li:first').click()
//除了Shift外，Cypress還支援{alt}和{ctrl}

.dblclick

語法

//雙擊某個元素
.dblclick()
//帶引數的雙擊
.dblclick(options)
//在某個位置雙擊
.dblclick(position)
 

//options引數和position引數跟.click()完全一致

.rightclick()

語法

//右擊某個元素
.rightclick()
//帶引數的右擊
.rightclick(options)
//在某個位置右擊
.rightclick(position)
//options引數和position引數跟.click()完全一致

.type()

向DOM元素中輸入內容

語法

//輸入文字
.type(text)
//帶引數的輸入
.type(text, options)

程式碼例項

//輸入davieyang
cy.get('input[username="name"]').type('davieyang')
//輸入{
cy.get('input[username="name"]').type('{{}')
//輸入退格鍵
cy.get('input[username="name"]').type('{backspace}')
//輸入刪除鍵
cy.get('input[username="name"]').type('{del}')
//輸入向下箭頭
cy.get('input[username="name"]').type('{downarrow}')
//輸入end
cy.get('input[username="name"]').type('{end}')
//輸入enter
cy.get('input[username="name"]').type('{enter}')
//輸入esc
cy.get('input[username="name"]').type('{esc}')
//輸入home
cy.get('input[username="name"]').type('{home}')
//輸入insert
cy.get('input[username="name"]').type('{insert}')
//輸入向左箭頭
cy.get('input[username="name"]').type('{leftarrow}')
//輸入pagedown
cy.get('input[username="name"]').type('{pagedown}')
//輸入pageup
cy.get('input[username="name"]').type('{pageup}')
//輸入向右箭頭
cy.get('input[username="name"]').type('{rightarrow}')
//選擇所有文字
cy.get('input[username="name"]').type('{selectall}')
//輸入向上箭頭
cy.get('input[username="name"]').type('{uparrow}')

.clear()

//清除使用者名稱
cy.get('input[username="name"]').clear()
//或者寫成
cy.get('input').type({selectall}{backspace})

.check()

針對型別的單選框(radio button)或者複選框(check box),Cypress提供了check和uncheck方法直接操作

//選中
.check()
//選中一個選項，值是value
.check(value)
//選中多個選項
.check(values)

//radiobutton選中US
cy.get('[type="radio"]').check('US')
//checkbox選中ga和ca
cy.get('[type="checkbox"]').check(['ga','ca'])

.uncheck()

//取消選中
.uncheck()
//取消選中某選項
.uncheck(value)
//取消選中多個選項
.uncheck(values)

.select()

用來在中選擇一個

.select(value)
.select(values)

例如如下html的DOM樹

<select>
	<option value="1">davieyang</option>
	<option value="2">alexyang</option>
	<option value="3">ethanyang</option>
</select>

cy.get('select').select('davieyang')
cy.get('select').select(['davieyang','alexyang'])

.trigger()

用來在DOM元素上處罰事件

語法

.trigger(eventName)

程式碼例項

//按下游標
cy.get('button').trigger('mousedown')
//移動游標到元素之上
cy.get('button').trigger('mouseover')
//抬起游標
cy.get('button').trigger('mouseleave')

Cypress常見操作

訪問某個URL

cy.visit('https://www.baidu.com')，但如果在cypress.json中配置了baseUrl的值

{
	"baseUrl":"https://www.baidu.com"
}

則cy.visit('/davieyang/api-test')開啟的地址是https://www.baidu.com/davieyang/api-test

獲取當前頁面的URL地址

//獲取頁面地址
cy.url()
//檢查當前頁面地址是否包括api-test
cy.url().should('contain', 'api-test')

重新整理當前頁面

//重新整理頁面相當於F5
cy.reload()
//強制重新整理頁面，相當於Ctrl+F5
cy.reload(true)

設定視窗大小

在Cypress中，預設執行時的視窗大小為1000px*1660px，如果顯示器不夠大，則無法顯示完整的畫素，Cypress將自動縮小並劇中顯示，也可以直接手動設定視窗，通過配置cypress.json來實現

{
	"viewportWidth":"1000"
	"viewportHeight":"800"
}

也可以在執行的過程中設定cy.viewpoint(1024,768)

網頁的前進和後退

在Cypress中使用cy.go()來實現網頁的前進和後退

//後退
cy.go('back')
//或者
cy.go(-1)
//前進
cy.go('forward')
//或者
cy.go(1)

判斷元素是否可見

在Cypress中要判斷元素是否可見，可以直接使用should判斷，Cypress會自動重試直到元素可見或者超時

//判斷.check-box是否可見
cy.get('.check-box').should('be.visible')

判斷元素是否存在

//判斷元素存在
cy.get('.check-box').should('exist')
//判斷元素不存在
cy.get('.check-box').should('not.exist')

條件判斷(Conditional Testing)

//利用jQuery來判斷元素是否存在
const btnLocator='#btn'
Cypress.$(btnLocator.length>0){
	cy.get(btnLocator).click()
}