cypress測(cè)試本地web應(yīng)用

在之前的cypress介紹里曾提到過，cypress雖然也可以測(cè)試部署好的應(yīng)用，但是它最大的能力還是發(fā)揮在測(cè)試本地應(yīng)用上。
本章主要內(nèi)容就是關(guān)于如何測(cè)試本地web應(yīng)用的概述：

• cypress與后臺(tái)應(yīng)用之間的關(guān)系。
• 如何配置cypress使其適合我們的應(yīng)用
• 更好的繞過應(yīng)用的身份驗(yàn)證機(jī)制

一、啟動(dòng)本地應(yīng)用

在前面幾章內(nèi)容中，代碼示例都是用的官方文檔的網(wǎng)頁(yè)進(jìn)行測(cè)試的。那個(gè)環(huán)境相當(dāng)于一個(gè)線上的生產(chǎn)環(huán)境，而且是cypress官方的，咱們除了正常訪問
啥也做不了。啟動(dòng)本地應(yīng)用就是啟動(dòng)你自己開發(fā)的web應(yīng)用，比如我本地的測(cè)試平臺(tái)的前端應(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)境，你必須二選一才行，也可以都寫測(cè)試，這也是一個(gè)實(shí)用場(chǎng)景。比如，大多數(shù)的測(cè)試可以在本地環(huán)境跑，然后留一些
測(cè)試可以作為冒煙測(cè)試用，可以用到部署好的環(huán)境上去。

二、訪問本地應(yīng)用

之前演示用的代碼用不上了，現(xiàn)在可以新建一個(gè)測(cè)試文件home_page_spec.js。

describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('http://localhost:8010') // 這里換成你自己本地的url
  })
})

訪問成功。

三、配置Cypress

在Cypress項(xiàng)目中，其實(shí)有個(gè)配置文件cypress.json，就在項(xiàng)目根目錄下，內(nèi)容默認(rèn)為空{}。
在這里可以根據(jù)需要來添加cypress的各種配置，比如說 測(cè)試文件的位置、默認(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è)相對(duì)路徑試下：

describe('The Home Page', () => {
  it('successfully loads', () => {
    cy.visit('/')
  })
})

訪問成功。

到這里，就可以開始寫你本地應(yīng)用的測(cè)試了，至于怎么寫，就還是取決不同的項(xiàng)目需求了。

四、Seeding data

這里我理解為初始化數(shù)據(jù)，比如要測(cè)試一個(gè)頁(yè)面的登錄，可能就得向數(shù)據(jù)庫(kù)里插入一個(gè)用戶數(shù)據(jù)，方便使用。在之前用selenium的時(shí)候，
通常就在setup 和 teardown里來安排初始化測(cè)試數(shù)據(jù)的準(zhǔn)備和清理。

在cypress中，也會(huì)有一些支持做這些額外拓展的事情的方法，通常是這3種：

cy.exec()，可以執(zhí)行系統(tǒng)命令。

cy.task()，可以通過pluginsFile來在node中運(yùn)行代碼。

cy.request()，可以發(fā)送http請(qǐng)求。

比如下面這段代碼，演示的就是在測(cè)試執(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è)測(cè)試都要與服務(wù)器或者瀏覽器交互的，這難免會(huì)拖慢測(cè)試的效率。對(duì)于這個(gè)問題，cypress
提供了些更快更好的解決方案。

1. Stubbing the server

這里就是我理解的mock了，斷開與后端服務(wù)的依賴。既然我需要跟服務(wù)器交互才可以拿到需要的返回?cái)?shù)據(jù)，如果能繞開交互，直接需要用啥數(shù)據(jù)就有啥數(shù)據(jù)，連后端應(yīng)用都
不需要啟了，豈不美哉？關(guān)于stub內(nèi)容很多，后續(xù)使用到再繼續(xù)分解。

2. 解決登錄問題

在以往編寫測(cè)試的過程中，登錄一直是一個(gè)比較大的問題。你只有登錄了，才可以進(jìn)行后續(xù)的測(cè)試活動(dòng)。那么如果我們把登錄抽離出去，然后每個(gè)測(cè)試執(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('h1').should('contain', 'jane.lane')
  })
})

只不過這樣整個(gè)測(cè)試下來就變得非常的慢。所以，cypress呼吁不要在每次測(cè)試前使用UI登錄。

當(dāng)然了，你正兒八經(jīng)寫的測(cè)試代碼里肯定是測(cè)試UI的，但是如果這個(gè)測(cè)試涉及到其他前置的一些數(shù)據(jù)狀態(tài)的依賴，那么要避免通過UI去設(shè)置。
這里官方還舉了個(gè)購(gòu)物車的例子加以說明。

假設(shè)要測(cè)試購(gòu)物車的功能。要進(jìn)行測(cè)試的話，得把產(chǎn)品添加到購(gòu)物車中。那么產(chǎn)品從哪里來？ 我是否要使用UI登錄到管理后臺(tái)，然后創(chuàng)建所有的產(chǎn)品，包括它們的描述、類別和圖片？
如果這樣做了，那是不是所有的產(chǎn)品我都要訪問一遍并且加到購(gòu)物車?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('h1').should('contain', 'jane.lane')
  })
})

在官方看來，這個(gè)相比于selenium是一個(gè)大優(yōu)點(diǎn)，其實(shí)我覺得也不盡然。這個(gè)優(yōu)化思想是對(duì)的，不過在之前使用selenium的時(shí)候，雖然它內(nèi)置的方法不支持這么做，但是可以借助
requests庫(kù)來迂回解決直接像后端發(fā)送請(qǐng)求的問題。

以上就是cypress測(cè)試本地web應(yīng)用的詳細(xì)內(nèi)容，更多關(guān)于cypress測(cè)試web的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論