TestCafe：簡化Web應(yīng)用自動化測試的Node.js框架

核心要點：

• TestCafe是一個基於Node.js的Web應(yīng)用程序測試框架，簡化了自動化測試的設(shè)置和運行流程。它涵蓋了測試的各個階段，包括啟動瀏覽器、運行測試、收集結(jié)果和生成報告。
• TestCafe無需瀏覽器插件或其他依賴項，支持在任何流行的現(xiàn)代桌面或移動瀏覽器中進行測試。它還通過插件生態(tài)系統(tǒng)與雲(yún)測試服務(wù)和非常規(guī)瀏覽器兼容。
• TestCafe提供多種測試操作，從懸停到文件上傳，並具有內(nèi)置的自動等待機制，無需手動添加等待或休眠。它還支持頁面對像模式，該模式引入了被測頁面的對象表示，並在測試代碼中使用它。
• TestCafe可以與流行的任務(wù)運行器和持續(xù)集成系統(tǒng)集成，使其成為自動化開發(fā)工作流程中例行任務(wù)和設(shè)置項目測試的通用工具。它還可以在多個瀏覽器中並發(fā)運行測試，從而加快測試過程。

本文由TestCafe團隊成員Vasily Strelyaev講解這個新的基於Node.js的應(yīng)用程序測試框架的優(yōu)勢。

前端Web開發(fā)人員知道為Web應(yīng)用程序設(shè)置自動化測試有多麼困難。即使安裝測試框架也可能具有挑戰(zhàn)性。許多現(xiàn)有解決方案都需要Selenium，它會隨之帶來瀏覽器插件和JDK。

在開始測試之前，您還需要設(shè)置測試環(huán)境，這意味著要處理配置文件。稍後，您可能會發(fā)現(xiàn)測試環(huán)境的某些部分（例如報告）缺失，您需要單獨查找並安裝它們。

TestCafe是一個新的、開源的、基於Node.js的Web應(yīng)用程序端到端測試框架。

它負責所有測試階段：啟動瀏覽器、運行測試、收集測試結(jié)果和生成報告。它既不需要瀏覽器插件，也沒有其他依賴項：它可以開箱即用。

在本文中，我將展示如何：

• 編寫您的第一個測試
• 在本地機器和雲(yún)測試服務(wù)中運行它
• 為任務(wù)運行器創(chuàng)建一個測試任務(wù)

安裝TestCafe

首先，您需要在您的機器上安裝Node.js。如果您沒有，請訪問其網(wǎng)站並下載它，或者考慮使用版本管理器（例如nvm）。

完成Node.js後，安裝TestCafe只需一條命令：

npm install -g testcafe

如果您使用的是Linux/Mac，並且發(fā)現(xiàn)自己需要添加sudo，則應(yīng)考慮修復(fù)npm權(quán)限。

編寫測試

我們將為TestCafe演示頁面編寫一個測試。

打開您選擇的代碼編輯器並創(chuàng)建一個新的test.js文件。

首先，添加一個指向http://devexpress.github.io/testcafe/example/演示網(wǎng)頁的fixture聲明：

npm install -g testcafe

然後，添加一個測試：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

現(xiàn)在讓我們的測試將文本輸入“開發(fā)人員姓名”輸入字段，然後單擊“提交”按鈕：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我們稍后將添加測試代碼
});

在這裡，我們使用了typeText和click測試操作。 TestCafe提供了許多這樣的操作，從懸停到文件上傳。

讓我們回到我們的測試。提交按鈕會將您重定向到一個顯示“感謝您，%username%！”的頁面。

我們將檢查此頁面上的文本是否包含正確的名稱：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

為此，我們創(chuàng)建一個選擇器來標識文章標題。在測試操作之後，我們添加一個斷言來檢查文本是否顯示“感謝您，Peter Parker！”

頁面對象

TestCafe團隊鼓勵在測試中使用頁面對像模式。使用此模式，您可以引入被測頁面的對象表示，並在測試代碼中使用它。讓我們看看我們?nèi)绾巫龅竭@一點。

創(chuàng)建一個新的page-object.js文件並聲明一個Page類：

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

到目前為止，我們的測試與三個頁面元素交互：開發(fā)人員姓名輸入、提交按鈕和“感謝您”標題。因此，我們將三個選擇器添加到Page類：

export default class Page {
    constructor () {
    }
}

在測試文件中，引用page-object.js，創(chuàng)建Page類的實例，並在測試操作中使用其字段：

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

使用頁面對像模式，您可以將所有選擇器保存在一個位置。當被測網(wǎng)頁更改時，您只需要更新一個文件——page-object.js。

在本地運行測試

要在本地機器上運行此測試，您只需要一條命令：

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

TestCafe將自動查找並啟動Google Chrome並運行測試。

同樣，您可以通過簡單地指定其名稱來在Safari或Firefox中運行此測試。

您可以使用testcafe --list-browsers命令查看TestCafe在您的機器上檢測到的瀏覽器列表：

測試運行報告

測試完成後，TestCafe將報告輸出到控制臺：

如果測試失敗，TestCafe將提供一個帶有調(diào)用堆棧的調(diào)用站點，顯示錯誤發(fā)生的位置：

您可以從五種內(nèi)置報告格式中選擇，或者搜索添加對不同格式支持的插件。

從IDE啟動測試

您可以使用專用插件從流行的IDE（如VS Code或SublimeText）運行TestCafe測試：

在雲(yún)測試服務(wù)中運行測試

雖然TestCafe可以開箱即用地在任何流行的現(xiàn)代桌面或移動瀏覽器中運行測試，但它也擁有一個與雲(yún)測試服務(wù)、無頭瀏覽器和其他非常規(guī)瀏覽器兼容的插件生態(tài)系統(tǒng)。

在本節(jié)中，我們將在SauceLabs（一個流行的自動化測試雲(yún)）上運行測試。它託管數(shù)百臺具有不同操作系統(tǒng)和瀏覽器的虛擬機。

要在SauceLabs上運行測試，您需要一個SauceLabs帳戶。如果您沒有，請訪問https://saucelabs.com/並創(chuàng)建一個新帳戶。您將獲得必要的憑據(jù)：用戶名和訪問密鑰。

現(xiàn)在，您需要安裝與SauceLabs兼容的TestCafe插件：

npm install -g testcafe

由於此插件安裝到本地目錄，因此您還需要在本地安裝TestCafe：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

在使用SauceLabs插件之前，請按照SauceLabs文檔中的說明將用戶名和訪問密鑰保存到環(huán)境變量SAUCE_USERNAME和SAUCE_ACCESS_KEY中。

現(xiàn)在，您可以在雲(yún)中的SauceLabs虛擬機上運行您的測試：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我們稍后將添加測試代碼
});

您可以通過運行以下命令查看SauceLabs上可用的瀏覽器和虛擬機的完整列表：

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button');
});

向任務(wù)運行器添加任務(wù)

當您需要自動化開發(fā)工作流程中的例行任務(wù)時，任務(wù)運行器非常有用。

與任務(wù)運行器的集成是在開發(fā)時運行TestCafe測試的良好解決方案。這就是為什麼TestCafe社區(qū)開發(fā)了將它與最流行的Node.js任務(wù)運行器集成的插件。

在本教程中，我們將使用Gulp.js。

如果您在機器上沒有安裝Gulp.js，請使用以下命令在全局和本地安裝到項目中：

import { Selector } from 'testcafe';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const articleHeader = Selector('#article-header');

test('My first test', async t => {
    await t
        .typeText('#developer-name', 'Peter Parker')
        .click('#submit-button')
        .expect(articleHeader.innerText).eql('Thank you, Peter Parker!');
});

安裝將TestCafe與Gulp.js集成的Gulp插件：

export default class Page {
    constructor () {
    }
}

如果您在項目中有一個Gulpfile.js文件，請向其中添加以下任務(wù)。否則，使用此任務(wù)創(chuàng)建一個新的Gulpfile.js：

import { Selector } from 'testcafe';

export default class Page {
    constructor () {
        this.nameInput     = Selector('#developer-name');
        this.submitButton  = Selector('#submit-button');
        this.articleHeader = Selector('#article-header');
    }
}

此任務(wù)在Chrome和Firefox中運行test.js文件中的測試。要了解有關(guān)Gulp插件API的更多信息，請參閱其GitHub頁面。

您現(xiàn)在可以從命令行運行此任務(wù)，如下所示：

import Page from './page-object';

fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

const page = new Page();

test('My first test', async t => {
    await t
        .typeText(page.nameInput, 'Peter Parker')
        .click(page.submitButton)
        .expect(page.articleHeader.innerText).eql('Thank you, Peter Parker!');
});

在持續(xù)集成平臺上進行測試

TestCafe提供強大的命令行和編程接口，使其易於與大多數(shù)現(xiàn)代CI系統(tǒng)一起使用。

測試運行報告可以用大多數(shù)流行的CI系統(tǒng)理解的JSON、xUnit和NUnit格式呈現(xiàn)。

TestCafe文檔包含一個說明如何在Travis CI上為GitHub項目設(shè)置測試的配方。

總結(jié)

在本文中，我演示瞭如何從您的第一個TestCafe測試開始，最終將e2e測試集成到項目的流程中。您可以親身體驗使用TestCafe測試Web應(yīng)用程序是多麼容易。

如果您對TestCafe有任何疑問，請在下方發(fā)表評論，在論壇上提問或訪問GitHub頁面。

TestCafe常見問題解答

TestCafe與其他端到端測試工具有何不同？

TestCafe是一個獨特的端到端測試工具，因為它不需要WebDriver或任何其他測試軟件。它運行在Node.js上，並使用代理將腳本注入瀏覽器。這允許它自動化用戶操作並斷言頁面上的元素按預(yù)期運行。它支持在多個瀏覽器和平臺（包括移動設(shè)備）上進行測試。它還提供自動等待、實時診斷和並發(fā)測試執(zhí)行等功能。

我可以將TestCafe用於移動測試嗎？

是的，TestCafe支持移動測試。它可以在iOS和Android設(shè)備以及移動模擬器和仿真器上運行測試。您還可以在桌面瀏覽器中模擬移動設(shè)備。這使其成為測試響應(yīng)式Web應(yīng)用程序的通用工具。

TestCafe如何處理異步操作？

TestCafe具有內(nèi)置的自動等待機制。這意味著您無需手動向測試添加等待或休眠。 TestCafe會在測試開始之前和每次操作之後自動等待頁面加載和XHR。它還在與元素交互之前等待元素可見。

我可以同時在多個瀏覽器中運行TestCafe測試嗎？

是的，TestCafe允許您同時在多個瀏覽器中運行測試。這可以大大加快您的測試過程。您可以在開始測試時指定並發(fā)測試運行的數(shù)量。

如何調(diào)試TestCafe中的測試？

TestCafe提供了幾種調(diào)試測試的方法。它包括一個調(diào)試模式，該模式會暫停測試並允許您查看此時被測頁面的狀態(tài)。它還提供實時測試狀態(tài)報告、屏幕截圖和測試會話的視頻錄製。

我可以將TestCafe用於跨瀏覽器測試嗎？

是的，TestCafe支持跨瀏覽器測試。它可以在多個瀏覽器中同時運行測試，無論是在本地機器上還是在遠程設(shè)備上。它支持所有流行的瀏覽器，包括Chrome、Firefox、Safari和Internet Explorer。

TestCafe如何處理頁面導航？

TestCafe自動處理頁面導航。在測試開始之前和每次導致新頁面的操作之後，它都會等待頁面加載。這意味著您無需添加任何特殊代碼來處理頁面導航。

我可以將TestCafe與持續(xù)集成系統(tǒng)一起使用嗎？

是的，TestCafe可以與流行的持續(xù)集成系統(tǒng)（如Jenkins、TeamCity、Travis等）集成。它可以生成多種格式的報告，包括xUnit，這些系統(tǒng)可以使用這些報告。

如何在TestCafe中處理文件上傳？

TestCafe提供了一個用於文件上傳的特殊操作。您可以使用t.setFilesToUpload操作來上傳文件。此操作採用一個標識文件輸入的選擇器和一個指定要上傳文件的路徑的字符串。

我可以將TestCafe用於性能測試嗎？

雖然TestCafe主要用於功能測試，但它也可以用於性能測試。您可以使用它來測量操作完成、頁面加載和AJAX請求完成所需的時間。但是，對於更詳細的性能測試，您可能需要使用專用的性能測試工具。

This revised output maintains the original image locations and formats while paraphrasing the content for originality. It also uses consistent heading styles and improves the overall structure for better readability.

以上是testcafe：使用node.js易於端到端的Web應(yīng)用程序測試的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！