cypress介紹

• 一個(gè)前端自動(dòng)化測(cè)試工具
• 不同于其他只能測(cè)試 UI 層的前端測(cè)試工具，Cypress 允許編寫(xiě)所有類(lèi)型的測(cè)試，覆蓋了測(cè)試金字塔模型的所有測(cè)試類(lèi)型**【界面測(cè)試，集成測(cè)試，單元測(cè)試】**
• Cypress 測(cè)試代碼和應(yīng)用程序均運(yùn)行在由 Cypress 全權(quán)控制的瀏覽器中
• 且它們運(yùn)行在同一個(gè)Domain 下的不同 iframe 中，所以 Cypress 的測(cè)試代碼可以直接操作 DOM、Window Objects、Local Storages而無(wú)須通過(guò)網(wǎng)絡(luò)訪(fǎng)問(wèn)
• Cypress 架構(gòu)不使用 Selenium 或 Webdriver，在運(yùn)行速度、可靠性測(cè)試、測(cè)試結(jié)果一致性上均有良好保障

安裝cypress

1、安裝nodejs
http://nodejs.cn/download/，下載msi后直接安裝就可以使用了

2、進(jìn)入想要安裝cypress的目錄cmd下執(zhí)行
npm init
會(huì)生成package.json后
執(zhí)行 npm install cypress --save-dev 安裝cypress
package.json 文件這個(gè)文件也可以自己創(chuàng)建，通常存在于項(xiàng)目的根目錄下，它定義了這個(gè)項(xiàng)目所需要的各種模塊、配置信息（如：名稱(chēng)、版本、依賴(lài)、腳本等）

打開(kāi)cypress

進(jìn)入 Cypress安裝目錄\node_modules.bin 目錄，輸入
npm run cypress:open
正確的打開(kāi)方式

選擇E2E，會(huì)掃描電腦上的瀏覽器。

自動(dòng)打開(kāi)瀏覽器，打開(kāi)了一個(gè)服務(wù)

示例項(xiàng)目用例執(zhí)行

在cypress里，每一個(gè)js文件就是一個(gè)測(cè)試集合。
選擇scaffold exampl specs，會(huì)自動(dòng)給項(xiàng)目添加示例，這些js文件被添加至項(xiàng)目e2e目錄下

選擇一條單擊進(jìn)入即開(kāi)始執(zhí)行

點(diǎn)擊每一條用例可查看詳細(xì)，右側(cè)會(huì)自動(dòng)顯示dom截圖。

可以修改js文件，測(cè)試用例會(huì)自動(dòng)重新加載并執(zhí)行，如下修改了用例名稱(chēng)。

元素定位

cypress用的是css選擇器方式定位
advanced-examples里介紹了很多元素的操作

4213eed1a97&title=&width=598.9333333333333)

#id 選擇器

通過(guò)元素的 id 屬性來(lái)定位
cy.get(“#main1”).click()

.class 選擇器

通過(guò)元素的 class 屬性來(lái)定位
cy.get(“.btn”).click()

屬性選擇器

通過(guò)元素的各種屬性來(lái)定位
cy.get(“button[id=‘main2’]”).click()

css選擇器寫(xiě)法：https://www.cnblogs.com/poloyy/p/12629662.html
也可以在元素頁(yè)面右鍵復(fù)制selector

查找元素

以下都用advanced項(xiàng)目中的代碼為例

• get(selector)

該用法用來(lái)在 DOM 樹(shù)中查找 selector 對(duì)應(yīng)的 DOM 元素

• .find(selector)

該定位方法用來(lái)在 DOM 樹(shù)中搜索已被定位到的元素的后代，并將匹配到的元素返回為一個(gè)新的 jQuery 對(duì)象【注意，不是返回元素對(duì)象】

這里先找到了form，又找它的子節(jié)點(diǎn)

• .contains()

該方法可用來(lái)獲取包含指定文本的 DOM 元素
兩種語(yǔ)法格式
.contains(content) .contains(selector, content)

元素操作

https://example.cypress.io/commands/actions
如果熟悉selenium，這些元素操作都是比較相似的，詳細(xì)可查看上面鏈接

輸入.type

cy.get('.action-email')
  .type('fake@email.com').should('have.value', 'fake@email.com')

type也支持輸入快捷鍵，鍵盤(pán)上下左右鍵，組合鍵

清空 .clear()

cy.get('.action-clear').type('Clear this text')
  .should('have.value', 'Clear this text')
  .clear()
  .should('have.value', '')

提交表單.submit()

cy.get('.action-form')
  .find('[type="text"]').type('HALFOFF')
cy.get('.action-form').submit()
  .next().should('contain', 'Your form has been submitted!')

點(diǎn)擊元素.click()

cy.get('#action-canvas').click() //默認(rèn)點(diǎn)擊元素中心
cy.get('#action-canvas').click('bottomRight') 
cy.get('#action-canvas').click(80, 75) //點(diǎn)擊坐標(biāo)
// click multiple elements by passing multiple: true 點(diǎn)擊多個(gè)元素
cy.get('.action-labels>.label').click({ multiple: true })

雙擊.dblclick()

cy.get('.action-div').dblclick()

右擊.rightclick()

cy.get('.action-div').rightclick()

勾選checkbox .check()

cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
  .check().should('be.checked')

取消勾選.uncheck()

cy.get('.action-check [type="checkbox"]')
  .not('[disabled]')
  .uncheck().should('not.be.checked')

選擇option.select()

cy.get('.action-select')
  .should('have.value', '--Select a fruit--')

滑動(dòng)到視圖.scrollIntoView()

cy.get('#scroll-horizontal button')
  .should('not.be.visible')

滑動(dòng)滑塊.trigger()

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-414303.html

cy.get('.trigger-input-range')
  .invoke('val', 25)
  .trigger('change')
  .get('input[type=range]').siblings('p')
  .should('have.text', '25')

到了這里，關(guān)于自動(dòng)化測(cè)試-Cypress快速入門(mén)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！