cypress測試本地web應用
cypress測試本地web應用
在之前的cypress介紹里曾提到過，cypress雖然也可以測試部署好的應用，但是它最大的能力還是發(fā)揮在測試本地應用上。
本章主要內容就是關于如何測試本地web應用的概述：
- cypress與后臺應用之間的關系。
- 如何配置cypress使其適合我們的應用
- 更好的繞過應用的身份驗證機制
一、啟動本地應用
在前面幾章內容中，代碼示例都是用的官方文檔的網頁進行測試的。那個環(huán)境相當于一個線上的生產環(huán)境，而且是cypress官方的，咱們除了正常訪問
啥也做不了。啟動本地應用就是啟動你自己開發(fā)的web應用，比如我本地的測試平臺的前端應用。
不過應該還會有小伙伴好奇，為什么就不能直接用線上已經部署好的，而非要用本地的？
這里，我概述一下官方的回答，以供參考：
- 在日常的本地開發(fā)中，cypress是圍繞著構建、優(yōu)化的工具。
- 數據存根。
- 最重要的還是你要有控制這個應用的能力，比如，根據需要隨時更改調整應用的一些配置之類。
不過，也不是說線上環(huán)境和本地環(huán)境，你必須二選一才行，也可以都寫測試，這也是一個實用場景。比如，大多數的測試可以在本地環(huán)境跑，然后留一些
測試可以作為冒煙測試用，可以用到部署好的環(huán)境上去。
二、訪問本地應用
之前演示用的代碼用不上了，現在可以新建一個測試文件home_page_spec.js。
describe('The Home Page', () => {
it('successfully loads', () => {
cy.visit('http://localhost:8010') // 這里換成你自己本地的url
})
})訪問成功。
三、配置Cypress
在Cypress項目中，其實有個配置文件cypress.json，就在項目根目錄下，內容默認為空{}。
在這里可以根據需要來添加cypress的各種配置，比如說 測試文件的位置、默認超時時間、環(huán)境變量、用哪個報告等等，這里暫時不展開了。
不過現在，可以在這里加一個baseUrl的配置，因為后續(xù)訪問的路徑都是以這個url為基礎的。這樣就可以給cys.visit()和cys .request()這種命令
自動添加baseUrl前綴了。
{
"baseUrl": "http://localhost:8010"
}現在訪問一個相對路徑試下：
describe('The Home Page', () => {
it('successfully loads', () => {
cy.visit('/')
})
})訪問成功。
到這里，就可以開始寫你本地應用的測試了，至于怎么寫，就還是取決不同的項目需求了。
四、Seeding data
這里我理解為初始化數據，比如要測試一個頁面的登錄，可能就得向數據庫里插入一個用戶數據，方便使用。在之前用selenium的時候，
通常就在setup 和 teardown里來安排初始化測試數據的準備和清理。
在cypress中，也會有一些支持做這些額外拓展的事情的方法，通常是這3種：
cy.exec()，可以執(zhí)行系統(tǒng)命令。
cy.task()，可以通過pluginsFile來在node中運行代碼。
cy.request()，可以發(fā)送http請求。
比如下面這段代碼，演示的就是在測試執(zhí)行之前，要做一系列事情來完成數據的初始化：
describe('The Home Page', () => {
beforeEach(() => {
// reset and seed the database prior to every test
cy.exec('npm run db:reset && npm run db:seed')
// seed a post in the DB that we control from our tests
cy.request('POST', '/test/seed/post', {
title: 'First Post',
authorId: 1,
body: '...',
})
// seed a user in the DB that we can control from our tests
cy.request('POST', '/test/seed/user', { name: 'Jane' })
.its('body')
.as('currentUser')
})
it('successfully loads', () => {
// this.currentUser will now point to the response
// body of the cy.request() that we could use
// to log in or work with in some way
cy.visit('/')
})
})這種用法其實本質上來說沒什么錯的，但實際上每個測試都要與服務器或者瀏覽器交互的，這難免會拖慢測試的效率。對于這個問題，cypress
提供了些更快更好的解決方案。
1. Stubbing the server
這里就是我理解的mock了，斷開與后端服務的依賴。既然我需要跟服務器交互才可以拿到需要的返回數據，如果能繞開交互，直接需要用啥數據就有啥數據，連后端應用都
不需要啟了，豈不美哉？關于stub內容很多，后續(xù)使用到再繼續(xù)分解。
2. 解決登錄問題
在以往編寫測試的過程中，登錄一直是一個比較大的問題。你只有登錄了，才可以進行后續(xù)的測試活動。那么如果我們把登錄抽離出去，然后每個測試執(zhí)行之前都進行一次登錄操作，
理論上來講，也是可行的。
describe('The Login Page', () => {
beforeEach(() => {
// reset and seed the database prior to every test
cy.exec('npm run db:reset && npm run db:seed')
// seed a user in the DB that we can control from our tests
// assuming it generates a random password for us
cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
.its('body')
.as('currentUser')
})
it('sets auth cookie when logging in via form submission', function () {
// destructuring assignment of the this.currentUser object
const { username, password } = this.currentUser
cy.visit('/login')
cy.get('input[name=username]').type(username)
// {enter} causes the form to submit
cy.get('input[name=password]').type(`${password}{enter}`)
// we should be redirected to /dashboard
cy.url().should('include', '/dashboard')
// our auth cookie should be present
cy.getCookie('your-session-cookie').should('exist')
// UI should reflect this user being logged in
cy.get('h1').should('contain', 'jane.lane')
})
})只不過這樣整個測試下來就變得非常的慢。所以，cypress呼吁不要在每次測試前使用UI登錄。
當然了，你正兒八經寫的測試代碼里肯定是測試UI的，但是如果這個測試涉及到其他前置的一些數據狀態(tài)的依賴，那么要避免通過UI去設置。
這里官方還舉了個購物車的例子加以說明。
假設要測試購物車的功能。要進行測試的話，得把產品添加到購物車中。那么產品從哪里來？ 我是否要使用UI登錄到管理后臺，然后創(chuàng)建所有的產品，包括它們的描述、類別和圖片？
如果這樣做了，那是不是所有的產品我都要訪問一遍并且加到購物車里呢？
答案顯然是否定的，至于怎樣做最合適，還得到后續(xù)的學習中再分享。
繼續(xù)回到上面UI登錄的問題，因為cypress與selenium不同，在cypress中，可以通過使用cy.request()來跳過使用UI的需要，cy.request()可以自動獲取和設置cookie，完成登錄態(tài)的設置。那么上述的用UI執(zhí)行登錄的代碼就可以優(yōu)化成：
describe('The Dashboard Page', () => {
beforeEach(() => {
// reset and seed the database prior to every test
cy.exec('npm run db:reset && npm run db:seed')
// seed a user in the DB that we can control from our tests
// assuming it generates a random password for us
cy.request('POST', '/test/seed/user', { username: 'jane.lane' })
.its('body')
.as('currentUser')
})
it('logs in programmatically without using the UI', function () {
// destructuring assignment of the this.currentUser object
const { username, password } = this.currentUser
// programmatically log us in without needing the UI
cy.request('POST', '/login', {
username,
password,
})
// now that we're logged in, we can visit
// any kind of restricted route!
cy.visit('/dashboard')
// our auth cookie should be present
cy.getCookie('your-session-cookie').should('exist')
// UI should reflect this user being logged in
cy.get('h1').should('contain', 'jane.lane')
})
})在官方看來，這個相比于selenium是一個大優(yōu)點，其實我覺得也不盡然。這個優(yōu)化思想是對的，不過在之前使用selenium的時候，雖然它內置的方法不支持這么做，但是可以借助
requests庫來迂回解決直接像后端發(fā)送請求的問題。
以上就是cypress測試本地web應用的詳細內容，更多關于cypress測試web的資料請關注腳本之家其它相關文章！
相關文章
web2.0的幾個開源項目...2006-08-08
web2.0色系...2006-09-09
什么是web2.0?...2007-02-02
Web2.0編程思想：16條法則...2006-08-08
這篇文章主要為大家介紹了cypress測試本地web應用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
其實在 fixed 和輸入框的問題上，基本思路就是： 由于 fixed 在軟鍵盤喚起后會失效，導致在頁面可以滾動時，會跟隨頁面一起滾動。因此如果頁面無法滾動，那么 fixed 元素即使失效，也不會滾動，也就不會出現 bug 了。2016-04-04
這篇文章主要為大加介紹了web.xml中Maven占位符不生效的問題記錄分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-02-02
這篇文章主要為大家介紹了RabbitMQ的Web管理與監(jiān)控簡單介紹，為入門Web管理與監(jiān)控的學習鋪下了很好的基礎，有需要的朋友就可以借鑒參考下，希望能夠有所幫助2022-03-03
web2.0中流行的設計元素:顏色...2006-08-08
本文為大家詳細介紹了WebSocket技術使用方法,WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術2019-02-02