cypress测试脚本_Cypress 自动化测试学习使用
安裝
mkdir cypress-start
npm install
# 進入創建的項目目錄
cd /your/project/path
cd cypress-start
npm install cypress --save-dev
yarn add
cd /your/project/path
cd cypress-start
yarn add cypress --dev
打開運行cpress
./node_modules/.bin/cypress open
或者使用npm bin
$(npm bin)/cypress open
或者使用npx
npx cypress open
或者使用yarn
yarn run cypress open
開始使用
創建一個sample_spec.js文件.
查看 Cypress 更新我們的spec文件列表.
登錄 Cypress 交互模式.
在 cypress/integration 目錄下創建一個新的文件
touch {your_project}/cypress/integration/sample_spec.js
一旦我們創建了這個文件，Cypress測試引擎會立馬在Integration Tests列表中顯示出來。Cypress會監視你的spec文件，有任何的修改和更新都會立馬顯示出來。
即使我們還沒有寫任何的測試也沒有關系。點擊sample_spec.js，我們會看到Cypress會自動打開瀏覽器并運行測試腳本。不過此時會看到
No tests found in your file:/usr/local/proj/cypress-start/cypress/integration/sample\_spec.js的提示。
編寫一個簡單的測試
編寫第一個通過的測試.
編寫第一個失敗的測試.
關注 Cypress 實時加載.
在sample_spec.js文件中書寫如下代碼：
describe('My First Test', function() {
it('Does not do much!', function() {
expect(true).to.equal(true)
})
})
當你保存文件之后會發現，瀏覽器自動重新加載了。立馬就會呈現出測試的結果。
盡管我們沒有做一些實際的事情，但是這個測試是通過的。
接下來讓我們來編寫第一個失敗的測試。
describe('My First Test', function() {
it('Does not do much!', function() {
expect(true).to.equal(false)
})
})
同樣的，一旦我們保存文件，瀏覽器立馬就會刷新并呈現出一個成功和一個失敗的測試結果。
從代碼語法中我們能看出來
describe和it來自Mocha
expect來自Chai
這是Cypress所依賴庫的一部分。
寫一個實際的測試用例
通常測試都分三個階段:
設置應用的狀態.
做一些動作.
斷言當前應用的狀態.
通俗來說就是我們設置應用的一個初識狀態，然后我們做一些操作來改變這個狀態值，然后再來判斷結果是不是跟我們預期的一樣。
接下來我們根據以下幾個步驟，通過Cypress來逐步實現：
訪問一個網頁。
查找網頁上的一個元素。
對這個元素進行操作。
斷言頁面的內容。
第 1 步: 訪問一個網頁
cy.visit() 的使用很簡單，我們以訪問百度首頁為例：
describe('My First Test', function() {
it('Visits the baidu', function() {
//? ?cy.visit('https://example.cypress.io')
cy.visit('http://www.baidu.com')
})
})
保存文件之后打開Cypress Test Runner就會發現，瀏覽器里會自動打開百度首頁。需要值得注意的是我們的測試，最好是對我們可控的網站進行測試。
第 2 步: 查詢頁面元素
使用contains來查找包含參數內容的元素：
describe('My First Test', function() {
it('Visits the baidu', function() {
cy.visit('http://www.baidu.com');
cy.contains('百度一下');
})
})
我們會發現測試通過了。如果我們把cy.contains('百度一下')修改為cy.contains('百度一下XXX')保存文件，就會發現等待一段時間之后提示測試失敗。
第 3 步: 點擊一個元素
我們在第二步已經獲取到了一個元素，只需要在該元素上進行點擊操作即可：
describe('My First Test', function() {
it('Visits the baidu', function() {
cy.visit('http://www.baidu.com');
cy.contains('百度一下').click();
})
})
由于百度首頁的百度一下按鈕在輸入框沒有輸入任何值得時候點擊，頁面只是會重新加載一下，沒有其他的改變，所以不太好進行斷言。所以我們希望在輸入框中輸入一些內容，然后再點擊按鈕，最后再進行斷言。
第 4 步: 進行斷言
由于百度首頁的百度一下按鈕在輸入框沒有輸入任何值得時候點擊，頁面只是會重新加載一下，沒有其他的改變，所以不太好進行斷言。所以我們希望在輸入框中輸入一些內容，然后再點擊按鈕，最后再進行斷言。
describe('My First Test', function() {
it('Visits the baidu', function() {
cy.visit('http://www.baidu.com');
cy.get('#kw').should(($kw) => {
$kw.val('cypress')
});
cy.contains('百度一下').click();
cy.url().should('include', '/s?');
})
})
另外可以對輸入框單獨的進行斷言。通過調用type方法來對獲取到的輸入框進行值的填充。
describe('My First Test', function() {
it('Visits the baidu', function() {
cy.visit('http://www.baidu.com');
cy.get('#kw')
.type('cypress')
.should('have.value', 'cypress');
})
})
以上就是一個簡單的測試用例。
個人認為Cypress比較好的地方在于可調試性非常之好。Time travel、Snapshots、Page events、Console output這些都能夠在Cypress 打開的瀏覽器左側看到。以上只是一些簡單的使用。需要進行深入了解的話查閱官方文檔
本文內容不用于商業目的，如涉及知識產權問題，請權利人聯系博為峰小編(021-64471599-8017)，我們將立即處理
總結
以上是生活随笔為你收集整理的cypress测试脚本_Cypress 自动化测试学习使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一加展示雨水触控技术 操作体验流畅度遥遥
- 下一篇： 外媒：半导体行业3nm竞赛从苹果iPho