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

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

1. 單元測試：將代碼的各個部分分開，對軟件中的最小可測試單元進(jìn)行檢查和驗(yàn)證；
2. 集成測試：測試多個單元能否協(xié)調(diào)工作；
3. 端到端測試（E2E）：從頭到尾測試整個軟件產(chǎn)品，以確保應(yīng)用程序流按預(yù)期運(yùn)行。

全文大綱

1. Jest
2. Mocha
3. Cypress
4. Storybook
5. Jasmine
6. React Testing Library
7. Playwright
8. Vitest
9. AVA
10. Selenium
11. Puppeteer
12. WebdriverIO
13. TestCafe

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

StateOfJS官方滿意度

StateOfJS官方關(guān)注度

StateOfJS使用度

Jest

官方網(wǎng)址：https://jestjs.io/

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

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

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

Jest 具有以下特點(diǎn)：

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

測試代碼：

// __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

官方網(wǎng)址：https://mochajs.org/

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

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

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

Mocha 具有以下特點(diǎn)：

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

當(dāng)然，Mocha 也是有缺點(diǎn)的：

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

測試代碼：

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

官方網(wǎng)址：https://cypress.io/

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

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

Cypress 具有以下特點(diǎn)：

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

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

測試代碼：

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

官方網(wǎng)址：https://storybook.js.org/

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

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

可以通過多種方式使用 Storybook 進(jìn)行 UI 測試：

• 視覺測試：捕獲每個故事的屏幕截圖，然后將其與基線進(jìn)行比較以檢測外觀和集成問題。
• 輔助功能測試：發(fā)現(xiàn)與視覺、聽覺、移動、認(rèn)知、語言或神經(jīng)障礙相關(guān)的可用性問題。
• 交互測試：通過模擬用戶行為、觸發(fā)事件并確保狀態(tài)按預(yù)期更新來驗(yàn)證組件功能。
• 快照測試：檢測渲染標(biāo)記中的更改以顯示表面渲染錯誤或警告。
• 將其他測試中的故事導(dǎo)入 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

官方網(wǎng)址：http://jasmine.github.io/

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

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

Jasmine 具有以下特點(diǎn)：

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

當(dāng)然，Jasmine 也是有有缺點(diǎn)的：

• 污染全局環(huán)境：默認(rèn)情況下，它會創(chuàng)建測試全局變量（關(guān)鍵字如“describe”或“test”），因此不必在測試中導(dǎo)入它們。在特定情況下，這可能會成為不利因素。
• 編寫異步測試具有挑戰(zhàn)性：使用 Jasmine 測試異步函數(shù)比較困難。

測試代碼：

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

官方網(wǎng)址：https://testing-library.com/react

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

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

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

React Testing Library 具有以下特點(diǎn)：

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

測試代碼：

__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

官方網(wǎng)址：https://playwright.dev/

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

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

Playwright 具有以下特點(diǎn)：

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

當(dāng)然，Playwright 也有一些缺點(diǎn)：

• 仍處于早期階段：相當(dāng)較新，社區(qū)支持有限；
• 不支持真實(shí)設(shè)備：不支持用于移動瀏覽器測試的真實(shí)設(shè)備，但支持模擬器。

測試代碼：

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

官方網(wǎng)址：https://vitest.dev/

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

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

Vitest 具有以下特點(diǎn)：

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

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

測試代碼：

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 的異步特性并同時運(yùn)行測試，從而提高性能。AVA 不會為創(chuàng)建任何 Globals，因此可以更輕松地控制使用的內(nèi)容。這可以使測試更加清晰，確保確切知道發(fā)生了什么。

AVA 具有以下特點(diǎn)：

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

當(dāng)然，AVA 也有一些缺點(diǎn)：

• 沒有測試分組：Ava 無法將相似的測試組合在一起。
• 沒有內(nèi)置的模擬：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

官方網(wǎng)址：https://www.selenium.dev/

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

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

功能

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

優(yōu)勢

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

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

Selenium完全開源，對商業(yè)用戶也沒有任何限制，支持分布式，擁有成熟的社區(qū)與學(xué)習(xí)文檔

下面是主要的幾大好處：

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

測試代碼：

如下圖：

Puppeteer

官方網(wǎng)址：https://pptr.dev/

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

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

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

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

測試代碼：

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

官方網(wǎng)址：https://webdriver.io/

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

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

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

功能豐富-各種內(nèi)置和社區(qū)插件允許您輕松集成和擴(kuò)展設(shè)置以滿足您的需求。

您可以使用WebdriverIO自動化：

• 用React、Vue、Angular、Svelte或其他前端框架編寫的現(xiàn)代web應(yīng)用程序
• 在模擬器/模擬器或真實(shí)設(shè)備上運(yùn)行的混合或本地移動應(yīng)用程序
• 本機(jī)桌面應(yīng)用程序（例如用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

官方網(wǎng)址：https://testcafe.io/

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

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

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

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

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

框架自身支持接口調(diào)用。 --計(jì)劃支持，暫未進(jìn)入開發(fā)階段。

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

測試代碼：

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

如下圖：