日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
盤(pán)點(diǎn)13個(gè)優(yōu)秀前端測(cè)試開(kāi)源框架大全

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

小編總結(jié)前端測(cè)試通?？梢苑譃橐韵氯N：

  1. 單元測(cè)試：將代碼的各個(gè)部分分開(kāi)，對(duì)軟件中的最小可測(cè)試單元進(jìn)行檢查和驗(yàn)證；
  2. 集成測(cè)試：測(cè)試多個(gè)單元能否協(xié)調(diào)工作；
  3. 端到端測(cè)試（E2E）：從頭到尾測(cè)試整個(gè)軟件產(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)查，前端測(cè)試框架受歡迎度排行榜，總共從四個(gè)維度（滿意度、關(guān)注度、使用度、認(rèn)知度）去分析，具體如下圖：

StateOfJS官方滿意度

StateOfJS官方關(guān)注度

StateOfJS使用度

Jest

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

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

Jest 是一個(gè)令人愉快的 JavaScript 測(cè)試框架，專注于 簡(jiǎn)潔明快。

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

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

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

測(cè)試代碼：

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

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

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

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

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

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

測(cè)試代碼：

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

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

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

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

測(cè)試代碼：

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

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

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

測(cè)試代碼：

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

const Demo = () {
    const result = userHooks();
    return (
        

            
{result}

        

    )
}

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

如下圖：

Jasmine

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

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

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

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

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

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

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

測(cè)試代碼：

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，主要用于測(cè)試 React 組件。該庫(kù)在使用過(guò)程并不關(guān)注組件的內(nèi)部實(shí)現(xiàn)，而是更關(guān)注測(cè)試。該庫(kù)基于 react-dom 和 react-dom/test-utils，是以上兩者的輕量實(shí)現(xiàn)。

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

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

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

測(cè)試代碼：

__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()

  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()

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

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

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

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

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

測(cè)試代碼：

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

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

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

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

測(cè)試代碼：

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

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

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

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

  • 沒(méi)有測(cè)試分組：Ava 無(wú)法將相似的測(cè)試組合在一起。
  • 沒(méi)有內(nèi)置的模擬：Ava 未附帶模擬，不過(guò)可以使用第三方庫(kù)（如Sinon.js）。

測(cè)試代碼：

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

功能

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

優(yōu)勢(shì)

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

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

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

下面是主要的幾大好處：

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

測(cè)試代碼：

如下圖：

Puppeteer

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

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

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

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

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

測(cè)試代碼：

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

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

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

您可以使用WebdriverIO自動(dòng)化：

  • 用React、Vue、Angular、Svelte或其他前端框架編寫(xiě)的現(xiàn)代web應(yīng)用程序
  • 在模擬器/模擬器或真實(shí)設(shè)備上運(yùn)行的混合或本地移動(dòng)應(yīng)用程序
  • 本機(jī)桌面應(yīng)用程序（例如用Electron.js編寫(xiě)）
  • 瀏覽器中web組件的單元或組件測(cè)試

測(cè)試代碼：

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 是一個(gè)用于測(cè)試 Web 應(yīng)用程序的純 Node.js 端到端解決方案。 它負(fù)責(zé)所有階段：?jiǎn)?dòng)瀏覽器，運(yùn)行測(cè)試，收集測(cè)試結(jié)果和生成報(bào)告。 TestCafe 不需要瀏覽器插件，它在所有流行的現(xiàn)代瀏覽器開(kāi)箱即用。

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

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

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

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

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

測(cè)試代碼：

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'
            ])
            // 錯(cuò)誤自動(dòng)截圖
            .screenshots(
                // 保存路徑
                '../error/',
                true,
                // 保存路勁格式
                '${DATE}_${TIME}/test-${TEST_INDEX}/${USERAGENT}/${FILE_INDEX}.png'
            )
            // 生成report格式,根據(jù)需要安裝對(duì)應(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, // 頁(yè)面js錯(cuò)誤是否忽略,建議為true
                quarantineMode: true, // 隔離模式，可以理解為失敗重跑
                selectorTimeout: 15000, // 設(shè)置頁(yè)面元素查找超時(shí)時(shí)間,智能等待
                assertionTimeout: 7000, // 設(shè)置斷言超時(shí)時(shí)間
                pageLoadTimeout: 30000, // 設(shè)置頁(yè)面加載超時(shí)時(shí)間
                debugOnFail: true, // 失敗開(kāi)啟調(diào)試模式 腳本編寫(xiě)建議開(kāi)啟
                speed: 1 // 執(zhí)行速度0.01 - 1
            });
    }).then(failedCount {
    console.error('Failed Count:' + failedCount);
    testcafe.close();
})
    .catch(err {
        console.error(err);
    });

如下圖：


網(wǎng)頁(yè)名稱：盤(pán)點(diǎn)13個(gè)優(yōu)秀前端測(cè)試開(kāi)源框架大全
網(wǎng)址分享：http://www.dlmjj.cn/article/ccdchdj.html