您好,登錄后才能下訂單哦!
這篇文章主要介紹“cypress如何測試本地web應(yīng)用”,在日常操作中,相信很多人在cypress如何測試本地web應(yīng)用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”cypress如何測試本地web應(yīng)用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在前面幾章內(nèi)容中,代碼示例都是用的官方文檔的網(wǎng)頁進(jìn)行測試的。那個(gè)環(huán)境相當(dāng)于一個(gè)線上的生產(chǎn)環(huán)境,而且是cypress官方的,咱們除了正常訪問
啥也做不了。啟動(dòng)本地應(yīng)用就是啟動(dòng)你自己開發(fā)的web應(yīng)用,比如我本地的測試平臺的前端應(yīng)用。
不過應(yīng)該還會(huì)有小伙伴好奇,為什么就不能直接用線上已經(jīng)部署好的,而非要用本地的?
這里,我概述一下官方的回答,以供參考:
在日常的本地開發(fā)中,cypress是圍繞著構(gòu)建、優(yōu)化的工具。
數(shù)據(jù)存根。
最重要的還是你要有控制這個(gè)應(yīng)用的能力,比如,根據(jù)需要隨時(shí)更改調(diào)整應(yīng)用的一些配置之類。
不過,也不是說線上環(huán)境和本地環(huán)境,你必須二選一才行,也可以都寫測試,這也是一個(gè)實(shí)用場景。比如,大多數(shù)的測試可以在本地環(huán)境跑,然后留一些
測試可以作為冒煙測試用,可以用到部署好的環(huán)境上去。
之前演示用的代碼用不上了,現(xiàn)在可以新建一個(gè)測試文件home_page_spec.js
。
describe('The Home Page', () => { it('successfully loads', () => { cy.visit('http://localhost:8010') // 這里換成你自己本地的url }) })
訪問成功。
在Cypress項(xiàng)目中,其實(shí)有個(gè)配置文件cypress.json
,就在項(xiàng)目根目錄下,內(nèi)容默認(rèn)為空{}
。
在這里可以根據(jù)需要來添加cypress的各種配置,比如說 測試文件的位置、默認(rèn)超時(shí)時(shí)間、環(huán)境變量、用哪個(gè)報(bào)告等等,這里暫時(shí)不展開了。
不過現(xiàn)在,可以在這里加一個(gè)baseUrl
的配置,因?yàn)楹罄m(xù)訪問的路徑都是以這個(gè)url為基礎(chǔ)的。這樣就可以給cys.visit()
和cys .request()
這種命令
自動(dòng)添加baseUrl前綴了。
{ "baseUrl": "http://localhost:8010" }
現(xiàn)在訪問一個(gè)相對路徑試下:
describe('The Home Page', () => { it('successfully loads', () => { cy.visit('/') }) })
訪問成功。
到這里,就可以開始寫你本地應(yīng)用的測試了,至于怎么寫,就還是取決不同的項(xiàng)目需求了。
這里我理解為初始化數(shù)據(jù),比如要測試一個(gè)頁面的登錄,可能就得向數(shù)據(jù)庫里插入一個(gè)用戶數(shù)據(jù),方便使用。在之前用selenium的時(shí)候,
通常就在setup 和 teardown里來安排初始化測試數(shù)據(jù)的準(zhǔn)備和清理。
在cypress中,也會(huì)有一些支持做這些額外拓展的事情的方法,通常是這3種:
cy.exec()
,可以執(zhí)行系統(tǒng)命令。
cy.task()
,可以通過pluginsFile來在node中運(yùn)行代碼。
cy.request()
,可以發(fā)送http請求。
比如下面這段代碼,演示的就是在測試執(zhí)行之前,要做一系列事情來完成數(shù)據(jù)的初始化:
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('/') }) })
這種用法其實(shí)本質(zhì)上來說沒什么錯(cuò)的,但實(shí)際上每個(gè)測試都要與服務(wù)器或者瀏覽器交互的,這難免會(huì)拖慢測試的效率。對于這個(gè)問題,cypress
提供了些更快更好的解決方案。
這里就是我理解的mock了,斷開與后端服務(wù)的依賴。既然我需要跟服務(wù)器交互才可以拿到需要的返回?cái)?shù)據(jù),如果能繞開交互,直接需要用啥數(shù)據(jù)就有啥數(shù)據(jù),連后端應(yīng)用都
不需要啟了,豈不美哉?關(guān)于stub內(nèi)容很多,后續(xù)使用到再繼續(xù)分解。
在以往編寫測試的過程中,登錄一直是一個(gè)比較大的問題。你只有登錄了,才可以進(jìn)行后續(xù)的測試活動(dòng)。那么如果我們把登錄抽離出去,然后每個(gè)測試執(zhí)行之前都進(jìn)行一次登錄操作,
理論上來講,也是可行的。
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('h2').should('contain', 'jane.lane') }) })
只不過這樣整個(gè)測試下來就變得非常的慢。所以,cypress呼吁不要在每次測試前使用UI登錄。
當(dāng)然了,你正兒八經(jīng)寫的測試代碼里肯定是測試UI的,但是如果這個(gè)測試涉及到其他前置的一些數(shù)據(jù)狀態(tài)的依賴,那么要避免通過UI去設(shè)置。
這里官方還舉了個(gè)購物車的例子加以說明。
假設(shè)要測試購物車的功能。要進(jìn)行測試的話,得把產(chǎn)品添加到購物車中。那么產(chǎn)品從哪里來? 我是否要使用UI登錄到管理后臺,然后創(chuàng)建所有的產(chǎn)品,包括它們的描述、類別和圖片?
如果這樣做了,那是不是所有的產(chǎn)品我都要訪問一遍并且加到購物車?yán)锬兀?/p>
答案顯然是否定的,至于怎樣做最合適,還得到后續(xù)的學(xué)習(xí)中再分享。
繼續(xù)回到上面UI登錄的問題,因?yàn)閏ypress與selenium不同,在cypress中,可以通過使用cy.request()
來跳過使用UI的需要,cy.request()
可以自動(dòng)獲取和設(shè)置cookie,完成登錄態(tài)的設(shè)置。那么上述的用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('h2').should('contain', 'jane.lane') }) })
在官方看來,這個(gè)相比于selenium是一個(gè)大優(yōu)點(diǎn),其實(shí)我覺得也不盡然。這個(gè)優(yōu)化思想是對的,不過在之前使用selenium的時(shí)候,雖然它內(nèi)置的方法不支持這么做,但是可以借助
requests庫來迂回解決直接像后端發(fā)送請求的問題。
到此,關(guān)于“cypress如何測試本地web應(yīng)用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。