盤點13個優秀前端測試開源框架大全

作者：Echa攻城獅 2023-02-07 17:39:06

開發前端

在前端測試中，框架可以把測試代碼抽離出來，作為一個整體結構化地去設計測試用例，放到專門的測試文件中，也可以實現自動運行以及顯示測試結果。

今天小編繼續分享13個優秀前端測試開源框架大全，希望對從事前端的程序員以及測試崗位的測試員有所幫助。在前端測試中，框架可以把測試代碼抽離出來，作為一個整體結構化地去設計測試用例，放到專門的測試文件中，也可以實現自動運行以及顯示測試結果。

小編總結前端測試通常可以分為以下三種：

單元測試：將代碼的各個部分分開，對軟件中的最小可測試單元進行檢查和驗證；
集成測試：測試多個單元能否協調工作；
端到端測試（E2E）：從頭到尾測試整個軟件產品，以確保應用程序流按預期運行。

全文大綱

Jest
Mocha
Cypress
Storybook
Jasmine
React Testing Library
Playwright
Vitest
AVA
Selenium
Puppeteer
WebdriverIO
TestCafe

2022 年度 StateOfJS 官方調查結果正式公布！StateOfJS 是前端生態圈中非常有影響力的且規模較大的數據調查，前端測試框架受歡迎度排行榜，總共從四個維度（滿意度、關注度、使用度、認知度）去分析，具體如下圖：

StateOfJS官方滿意度

StateOfJS官方關注度

StateOfJS使用度

Jest

官方網址：https://jestjs.io/

Github：https://github.com/facebook/jest

Jest 是一個令人愉快的 JavaScript 測試框架，專注于簡潔明快。

Jest 是由 Facebook 開發的 JavaScript 測試框架。它是測試 React 的首選，并且得到了 React 社區的支持和開發。

Jest 具有以下特點：

兼容性：除了可以測試 React 應用，還可以輕松集成到其他應用中，與 Angular、Node、Vue 和其他基于babel的項目兼容。
自動模擬：當在測試文件中導入庫時，Jest 會自動模擬這些庫以幫助我們輕松地使用它們。
擴展 API：Jest 提供了廣泛的 API，除非確實需要，否則不需要包含額外的庫。
計時器模擬：Jest 具有時間模擬系統，非常適合應用中的快進超時，并有助于在運行測試時節省時間。
活躍社區：Jest 擁有很活躍的社區，可以幫助我們在需要時快速找到解決方案。
零配置：Jest 的目標是在大部分 JavaScript 項目上實現開箱即用，無需配置。
快照：能夠輕松追蹤大型對象的測試。快照可以與測試代碼放在一起，也可以集成進代碼行內。
隔離：測試程序擁有自己獨立的進程以最大限度地提高性能。
優秀的 api：從 it 到 expect - Jest 將整個工具包放在同一個地方。好書寫、好維護、非常方便。

測試代碼：

// __tests__/sum-test.js
jest.dontMock('../sum');

describe('sum', function() {
 it('adds 1 + 2 to equal 3', function() {
   var sum = require('../sum');
   expect(sum(1, 2)).toBe(3);
 });
});

如下圖：

Mocha

官方網址：https://mochajs.org/

Github：https://github.com/mochajs/mocha

Mocha 是一個功能豐富的 JavaScript 測試框架，可以運行在 Node.js 和瀏覽器中，使異步測試變得簡單有趣。Mocha 測試連續運行，允許靈活和準確的報告，同時將未捕獲的異常映射到正確的測試用例。

Mocha 不支持開箱即用的斷言、模擬等，需要通過組件/插件來添加這些功能。與 Mocha 搭配的最流行的斷言庫包括 Chai、Assert、Should.js 和 Better-assert。

Mocha 具有以下特點：

使用簡單：對于不包含復雜斷言或測試邏輯的較小項目，Mocha 是一個簡單的解決方案。
ES模塊支持：Mocha 支持將測試編寫為 ES 模塊，而不僅是使用 CommonJS。

當然，Mocha 也是有缺點的：

設置難度大：必須使用額外的斷言庫，這確實意味著它比其他庫更難設置。
與插件的潛在不一致：Mocha 將測試結構包含為 globals，不必在每個文件中都使用 includeor 來節省時間。require 缺點是插件可能會要求無論如何都包含這些，從而導致不一致。
不支持任意轉譯器：在 v6.0.0 之前，Mocha 有一個允許使用任意轉譯器的特性，比如 coffee-script 等，但現在已經棄用。

測試代碼：

var assert = require('assert');
describe('Array', function () {
  describe('#indexOf()', function () {
    it('should return -1 when the value is not present', function () {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

如下圖：

Cypress

官方網址：https://cypress.io/

Github：https://github.com/cypress-io/cypress

Cypress 是為現代 Web 構建的下一代前端測試工具。借助 Cypress，開發人員可以編寫端到端測試、集成測試和單元測試。Cypress 完全可以在真正的瀏覽器（Chrome、Firefox 和 Edge）中運行，不需要驅動程序二進制文件。自動化代碼和應用代碼共享同一個平臺，讓開發人員可以完全控制被測應用。Cypress 以其端到端測試功能而聞名，這意味著可以遵循預定義的用戶行為，并讓該工具在每次部署新代碼時報告潛在差異。

Cypress 具有以下特點：

端到端測試：由于 Cypress 在真實瀏覽器中運行，因此可以依賴它進行端到端用戶測試。
時間軸快照測試：在執行時，Cypress 會拍下那一刻的快照，并允許開發人員或 QA 測試人員查看特定步驟發生的情況。
穩定可靠：與其他測試框架相比，Cypress 提供了穩定可靠的測試執行結果。
文檔和社區：從零到運行，Cypress 包含所有必要的信息以幫助開發人員加快速度，并且它還有一個活躍的社區。
速度快：Cypress 的測試執行速度很快，響應時間不短 20 毫秒。

不過，需要注意的是，Cypress 只能在單個瀏覽器中運行測試。

測試代碼：

describe('My First Test', () => {
  it('Gets, types and asserts', () => {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()

    // Should be on a new URL which
    // includes '/commands/actions'
    cy.url().should('include', '/commands/actions')

    // Get an input, type into it
    cy.get('.action-email').type('fake@email.com')

    //  Verify that the value has been updated
    cy.get('.action-email').should('have.value', 'fake@email.com')
  })
})

如下圖：

Storybook

官方網址：https://storybook.js.org/

Github：https://github.com/storybookjs/storybook

Storybook與其他 JavaScript 測試框架不同，Storybook 是一個 UI 測試工具，它為測試組件提供了一個隔離的環境。Storybook 還附帶工具、Test runner 以及與更大的 JavaScript 生態系統的方便集成，以擴展 UI 測試覆蓋范圍。

可以通過多種方式使用 Storybook 進行 UI 測試：

視覺測試：捕獲每個故事的屏幕截圖，然后將其與基線進行比較以檢測外觀和集成問題。
輔助功能測試：發現與視覺、聽覺、移動、認知、語言或神經障礙相關的可用性問題。
交互測試：通過模擬用戶行為、觸發事件并確保狀態按預期更新來驗證組件功能。
快照測試：檢測渲染標記中的更改以顯示表面渲染錯誤或警告。
將其他測試中的故事導入 QA 甚至更多 UI 特性。

測試代碼：

// stories/userStory.js
import { storiesOf } from "@storybook/react";
import { userHooks } from '../src/index'
import React from 'react';

const Demo = () {
    const result = userHooks();
    return (
        <div>
            <p>{result}</p>
        </div>
    )
}

storiesOf("user", module).add('Demo', Demo);

如下圖：

Jasmine

官方網址：http://jasmine.github.io/

Github：https://github.com/jasmine/jasmine

Jasmine 是一個簡易的 JavaScript 單元測試框架，其不依賴于任何瀏覽器、DOM、或者是任何 JavaScript 而存在。它適用于所有網站、Node.js 項目，或者是任何能夠在 JavaScript 上面運行的程序。Jasmine 以行為驅動開發 (BDD) 工具而聞名。BDD 涉及在編寫實際代碼之前編寫測試（與測試驅動開發 (TDD)相反）。

Jasmine 具有以下特點：

API 簡單：它提供了簡潔且易于理解的語法，以及用于編寫單元測試的豐富而直接的 API 。
開箱即用：不需要額外的斷言或模擬庫，開箱即用。
速度快：由于不依賴任何外部庫，因此速度相對較快。
多語言：不僅用于編寫 JS 測試，也可以用于 Ruby（通過Jasmine-gem）或 Python（通過Jsmin-py）

當然，Jasmine 也是有有缺點的：

污染全局環境：默認情況下，它會創建測試全局變量（關鍵字如“describe”或“test”），因此不必在測試中導入它們。在特定情況下，這可能會成為不利因素。
編寫異步測試具有挑戰性：使用 Jasmine 測試異步函數比較困難。

測試代碼：

describe("A suite is just a function", function() {
  let a;

  it("and so is a spec", function() {
    a = true;

    expect(a).toBe(true);
  });
});

如下圖：

React Testing Library

官方網址：https://testing-library.com/react

Github：https://github.com/testing-library/react-testing-library

React Testing Library 基于 DOM Testing Library 的基礎上添加一些 API，主要用于測試 React 組件。該庫在使用過程并不關注組件的內部實現，而是更關注測試。該庫基于 react-dom 和 react-dom/test-utils，是以上兩者的輕量實現。

React Testing Library 不像 Jest 那樣是一個 Test runner。事實上，它們可以協同工作。React Testing Library 是一組工具和功能，可幫助訪問 DOM 并對其執行操作，即將組件渲染到虛擬 DOM 中，搜索并與之交互。

React Testing Library 具有以下特點：

React 官方推薦：可以在 React 的官方文檔中找到使用此庫的參考和建議。
尺寸小：它是專門為測試 React 應用/組件而編寫的。

測試代碼：

__tests__/fetch.test.jsx
import React from 'react'
import {rest} from 'msw'
import {setupServer} from 'msw/node'
import {render, fireEvent, waitFor, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import Fetch from '../fetch'

const server = setupServer(
  rest.get('/greeting', (req, res, ctx) {
    return res(ctx.json({greeting: 'hello there'}))
  }),
)

beforeAll(() server.listen())
afterEach(() server.resetHandlers())
afterAll(() server.close())

test('loads and displays greeting', async () => {
  render(<Fetch url="/greeting" />)

  fireEvent.click(screen.getByText('Load Greeting'))

  await waitFor(() screen.getByRole('heading'))

  expect(screen.getByRole('heading')).toHaveTextContent('hello there')
  expect(screen.getByRole('button')).toBeDisabled()
})

test('handles server error', async () => {
  server.use(
    rest.get('/greeting', (req, res, ctx) {
      return res(ctx.status(500))
    }),
  )

  render(<Fetch url="/greeting" />)

  fireEvent.click(screen.getByText('Load Greeting'))

  await waitFor(() screen.getByRole('alert'))

  expect(screen.getByRole('alert')).toHaveTextContent('Oops, failed to fetch!')
  expect(screen.getByRole('button')).not.toBeDisabled()
})

如下圖：

Playwright

官方網址：https://playwright.dev/

Github： https://github.com/microsoft/playwright

Playwright 是一個用于端到端測試的自動化框架。該框架由 Microsoft 構建和維護，旨在跨主要瀏覽器引擎（Chromium、Webkit 和 Firefox）運行。它實際上是早期 Puppeteer 項目的一個分支。主要區別在于，Playwright 是專門為開發人員和測試人員進行 E2E 測試而編寫的。Playwright 還可以與主要的 CI/CD 服務器一起使用，如 TravisCI、CircleCI、Jenkins、Appveyor、GitHub Actions 等。

Playwright 具有以下特點：

多語言：Playwright 支持 JavaScript、Java、Python 和 .NET C# 等多種語言；
多個 Test Runner 支持：可以被 Mocha、Jest 和 Jasmine 使用；
跨瀏覽器：該框架的主要目標是支持所有主流瀏覽器。
模擬和原生事件支持：可以模擬移動設備、地理位置和權限，還支持利用鼠標和鍵盤的原生輸入事件。

當然，Playwright 也有一些缺點：

仍處于早期階段：相當較新，社區支持有限；
不支持真實設備：不支持用于移動瀏覽器測試的真實設備，但支持模擬器。

測試代碼：

import { test, expect } from '@playwright/test';

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');

  await page.click('text=Get Started');
  // Expect some text to be visible on the page.
  await expect(page.locator('text=Introduction').first()).toBeVisible();
});

如下圖：

Vitest

官方網址：https://vitest.dev/

Github： https://github.com/avajs/ava

Vitest 是一個由 Vite 提供支持的極速單元測試框架。其和 Vite 的配置、轉換器、解析器和插件保持一致、開箱即用的 TypeScript / JSX 支持、支持 Smart 和 instant watch 模式，如同用于測試的 HMR、內置 Tinyspy 用于模擬、打標和監察等。Vitest 非常關心性能，使用 Worker 線程盡可能并行運行，帶來更好的開發者體驗。

Vitest 具有以下特點：

Vite 支持：重復使用 Vite 的配置、轉換器、解析器和插件，在應用和測試中保持一致。
兼容 Jest：擁有預期、快照、覆蓋等 - 從 Jest 遷移很簡單。
智能即時瀏覽模式：智能文件監聽模式，就像是測試的 HMR。
ESM, TypeScript, JSX：由 esbuild 提供的開箱即用 ESM、TypeScript 和 JSX 支持。
源內測試：提供了一種在源代碼中運行測試以及實現的方法，類似于 Rust 的模塊測試。

不過，Vitest 仍處于早期階段（最新版本為 0.28.1）。盡管 Vitest 背后的團隊在創建此工具方面做了大量工作，但它還很年輕，社區支持可能還不是很完善。

測試代碼：

import { assert, describe, it } from 'vitest'

// Only this suite (and others marked with only) are run
describe.only('suite', () {
  it('test', () {
    assert.equal(Math.sqrt(4), 3)
  })
})

describe('another suite', () {
  it('skipped test', () {
    // Test skipped, as tests are running in Only mode
    assert.equal(Math.sqrt(4), 3)
  })

  it.only('test', () {
    // Only this test (and others marked with only) are run
    assert.equal(Math.sqrt(4), 2)
  })
})

如下圖：

AVA

Github： https://github.com/avajs/ava

AVA 是一個極簡的 Test Runner，它利用 JavaScript 的異步特性并同時運行測試，從而提高性能。AVA 不會為創建任何 Globals，因此可以更輕松地控制使用的內容。這可以使測試更加清晰，確保確切知道發生了什么。

AVA 具有以下特點：

同時運行測試：利用 JavaScript 的異步特性使得測試變得簡單，最小化部署之間的等待時間；
簡單的 API：通過了一個簡單的 API，僅提供需要的內容；
快照測試：通過 jest-snapshot 提供，當想知道應用的 UI 何時意外更改時，這非常有用；
Tap 格式報告：Ava 默認顯示可讀的報告，也可以獲得 TAP 格式的報告。

當然，AVA 也有一些缺點：

沒有測試分組：Ava 無法將相似的測試組合在一起。
沒有內置的模擬：Ava 未附帶模擬，不過可以使用第三方庫（如Sinon.js）。

測試代碼：

import test from 'ava';

test('foo', t {
    t.pass();
});

test('bar', async t => {
    const bar = Promise.resolve('bar');

    t.is(await bar, 'bar');
});

如下圖：

Selenium

官方網址：https://www.selenium.dev/

Github： https://github.com/seleniumhq/selenium

Selenium是一個用于Web應用程序測試的工具。Selenium測試直接運行在瀏覽器中，就像真正的用戶在操作一樣。支持的瀏覽器包括IE（7, 8, 9, 10, 11），Mozilla Firefox，Safari，Google Chrome，Opera，Edge等。這個工具的主要功能包括：測試與瀏覽器的兼容性——測試應用程序看是否能夠很好得工作在不同瀏覽器和操作系統之上。測試系統功能——創建回歸測試檢驗軟件功能和用戶需求。支持自動錄制動作和自動生成.Net、Java、Perl等不同語言的測試腳本。

功能

框架底層使用JavaScript模擬真實用戶對瀏覽器進行操作。測試腳本執行時，瀏覽器自動按照腳本代碼做出點擊，輸入，打開，驗證等操作，就像真實用戶所做的一樣，從終端用戶的角度測試應用程序。
使瀏覽器兼容性測試自動化成為可能，盡管在不同的瀏覽器上依然有細微的差別。
使用簡單，可使用Java，Python等多種語言編寫用例腳本。

優勢

據Selenium主頁所說，與其他測試工具相比，使用Selenium的最大好處是：

Selenium測試直接在瀏覽器中運行，就像真實用戶所做的一樣。Selenium測試可以在Windows、Linux和Macintosh上的Internet Explorer、Chrome和Firefox中運行。其他測試工具都不能覆蓋如此多的平臺。使用Selenium和在瀏覽器中運行測試還有很多其他好處。

Selenium完全開源，對商業用戶也沒有任何限制，支持分布式，擁有成熟的社區與學習文檔

下面是主要的幾大好處：

通過編寫模仿用戶操作的Selenium測試腳本，可以從終端用戶的角度來測試應用程序。通過在不同瀏覽器中運行測試，更容易發現瀏覽器的不兼容性。Selenium的核心，也稱browser bot，是用JavaScript編寫的。這使得測試腳本可以在受支持的瀏覽器中運行。browser bot負責執行從測試腳本接收到的命令，測試腳本要么是用HTML的表布局編寫的，要么是使用一種受支持的編程語言編寫的。

測試代碼：

如下圖：

Puppeteer

官方網址：https://pptr.dev/

Github： https://github.com/puppeteer/puppeteer

Puppeteer 是一個控制 headless Chrome 的 Node.js API 。它是一個 Node.js 庫，通過 DevTools 協議提供了一個高級的 API 來控制 headless Chrome。它還可以配置為使用完整的（非 headless）Chrome。

在瀏覽器中手動完成的大多數事情都可以通過使用 Puppeteer 完成，下面是一些入門的例子：

生成屏幕截圖和 PDF 頁面
檢索 SPA 并生成預渲染內容（即 “SSR”）
從網站上爬取內容
自動提交表單，UI 測試，鍵盤輸入等
創建一個最新的自動測試環境。使用最新的 JavaScript 和瀏覽器功能，在最新版本的 Chrome 中直接運行測試
捕獲網站的時間線跟蹤，以幫助診斷性能問題

測試代碼：

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://developer.chrome.com/');

  // Set screen size
  await page.setViewport({width: 1080, height: 1024});

  // Type into search box
  await page.type('.search-box__input', 'automate beyond recorder');

  // Wait and click on first result
  const searchResultSelector = '.search-box__link';
  await page.waitForSelector(searchResultSelector);
  await page.click(searchResultSelector);

  // Localte the full title with a unique string
  const textSelector = await page.waitForSelector(
    'text/Customize and automate'
  );
  const fullTitle = await textSelector.evaluate(el => el.textContent);

  // Print the full title
  console.log('The title of this blog post is "%s".', fullTitle);

  await browser.close();
})();

如下圖：

WebdriverIO

官方網址：https://webdriver.io/

Github： https://github.com/webdriverio/webdriverio

WebdriverIO是一個基于節點的瀏覽器和自動化測試框架。js。在WebDrivero中添加助手函數在WebDrivero中很簡單。此外，它還可以在WebDriver協議和Chrome Devtools協議上運行，這使得它對于基于Selenium WebDriver的跨瀏覽器都非常有效 testing或者基于鉻的自動化。最重要的是，由于WebDriverIO是開源的，您可以獲得一系列插件來滿足您的自動化需求。
專門為前端開發者們：可擴展-添加助手函數或更復雜的集合以及現有命令的組合非常簡單，非常有用。

兼容-WebdriverIO可以在WebDriver協議上運行，以進行真正的跨瀏覽器測試，也可以在Chrome DevTools協議上使用Puppeter進行基于Chromium的自動化。

功能豐富-各種內置和社區插件允許您輕松集成和擴展設置以滿足您的需求。

您可以使用WebdriverIO自動化：

用React、Vue、Angular、Svelte或其他前端框架編寫的現代web應用程序
在模擬器/模擬器或真實設備上運行的混合或本地移動應用程序
本機桌面應用程序（例如用Electron.js編寫）
瀏覽器中web組件的單元或組件測試

測試代碼：

import { $, expect } from '@wdio/globals'
import { render } from '@testing-library/vue'
import HelloWorld from '../../src/components/HelloWorld.vue'

describe('Vue Component Testing', () {
    it('increments value on click', async () => {
        const { getByText } = render(HelloWorld)
        const btn = getByText('count is 0')

        // transform into WebdriverIO element
        const button = await $(btn)
        await button.click()
        await button.click()

        getByText('count is 2')
        await expect($('button=count is 2')).toExist()
    })
})

如下圖：

TestCafe

官方網址：https://testcafe.io/

Github：https://github.com/DevExpress/testcafe

TestCafe 是一個用于測試 Web 應用程序的純 Node.js 端到端解決方案。它負責所有階段：啟動瀏覽器，運行測試，收集測試結果和生成報告。 TestCafe 不需要瀏覽器插件，它在所有流行的現代瀏覽器開箱即用。

前面小編介紹了很多測試框架工具，為什么還要介紹TestCafe呢？因為TestCafe支持的瀏覽器更多，且也內置自動等待機制，穩定性上面相較與webdriver有很大提高。下面列舉了TestCafe在穩定性、測試數據管理、配置信息管理以及支持的web應用操作場景等方面的支持程度。另外，TestCafe還支持并發執行，即可以同時開啟多個瀏覽器運行多個測試案例，縮短測試反饋時間，這是前面兩個框架都不具備的。故如果被測應用需要支持IE、safari這些瀏覽器，testcafe是個不錯的選擇。

除上面已支持的功能外，testcafe還計劃支持。

Testing in Multiple Browser Windows，即開啟多個tab頁，在多個tab頁上執行一個完整的自動化測試。 --計劃支持，并已進入開發階段。

框架自身支持接口調用。 --計劃支持，暫未進入開發階段。

Selector Debug Panel，UI測試大部分調試場景都是定位和操作頁面元素，Selector Debug Panel可極大的提升調試效率。 --計劃支持，并已進入開發階段。

測試代碼：

const createTestCase = require('testcafe');
const fs = require('fs');

let testcafe = null;

createTestCase('localhost', 1337, 1338)
    .then(tc {
        testcafe = tc;
        const runner = testcafe.createRunner();
        const stream = fs.createWriteStream('report.json');
        return runner
            // 需要運行的cases
            .src(
                [
                    '../demo/podemo/*.js',
                    '../demo/setWindowsSize.js'
                ]
            )
            // 設置需要執行的瀏覽器
            .browsers([
                'chrome',
                'firefox'
            ])
            // 錯誤自動截圖
            .screenshots(
                // 保存路徑
                '../error/',
                true,
                // 保存路勁格式
                '${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png'
            )
            // 生成report格式,根據需要安裝對應report模塊,
            // 詳細看:http://devexpress.github.io/testcafe/documentation/using-testcafe/common-concepts/reporters.html
            .reporter('json', stream)
            // 并發
            .concurrency(3)
            .run({
                skipJsErrors: true, // 頁面js錯誤是否忽略,建議為true
                quarantineMode: true, // 隔離模式，可以理解為失敗重跑
                selectorTimeout: 15000, // 設置頁面元素查找超時時間,智能等待
                assertionTimeout: 7000, // 設置斷言超時時間
                pageLoadTimeout: 30000, // 設置頁面加載超時時間
                debugOnFail: true, // 失敗開啟調試模式 腳本編寫建議開啟
                speed: 1 // 執行速度0.01 - 1
            });
    }).then(failedCount {
    console.error('Failed Count:' + failedCount);
    testcafe.close();
})
    .catch(err {
        console.error(err);
    });

如下圖：

責任編輯：華軒來源：今日頭條

前端測試開發