testcafe：使用node.js易於端到端的Web應用程序測試

TestCafe：簡化Web應用自動化測試的Node.js框架

核心要點：

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

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

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

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

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

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

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

• 編寫您的第一個測試
• 在本地機器和雲測試服務中運行它
• 為任務運行器創建一個測試任務

安裝TestCafe

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

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

<code class="language-bash">npm install -g testcafe</code>

如果您使用的是Linux/Mac，並且發現自己需要添加sudo，則應考慮修復npm權限。

編寫測試

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

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

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

<code class="language-bash">npm install -g testcafe</code>

然後，添加一個測試：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;</code>

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

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});</code>

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

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

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

<code class="language-javascript">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');
});</code>

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

頁面對象

TestCafe團隊鼓勵在測試中使用頁面對像模式。使用此模式，您可以引入被測頁面的對象表示，並在測試代碼中使用它。讓我們看看我們如何做到這一點。

創建一個新的page-object.js文件並聲明一個Page類：

<code class="language-javascript">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!');
});</code>

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

<code class="language-javascript">export default class Page {
    constructor () {
    }
}</code>

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

<code class="language-javascript">import { Selector } from 'testcafe';

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

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

在本地運行測試

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

<code class="language-javascript">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!');
});</code>

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

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

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

測試運行報告

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

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

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

從IDE啟動測試

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

在雲測試服務中運行測試

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

在本節中，我們將在SauceLabs（一個流行的自動化測試雲）上運行測試。它託管數百台具有不同操作系統和瀏覽器的虛擬機。

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

現在，您需要安裝與SauceLabs兼容的TestCafe插件：

<code class="language-bash">npm install -g testcafe</code>

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

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;</code>

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

現在，您可以在雲中的SauceLabs虛擬機上運行您的測試：

<code class="language-javascript">fixture `My first fixture`
    .page `https://devexpress.github.io/testcafe/example`;

test('My first test', async t => {
    // 我们稍后将添加测试代码
});</code>

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

<code class="language-javascript">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');
});</code>

向任務運行器添加任務

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

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

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

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

<code class="language-javascript">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!');
});</code>

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

<code class="language-javascript">export default class Page {
    constructor () {
    }
}</code>

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

<code class="language-javascript">import { Selector } from 'testcafe';

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

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

您現在可以從命令行運行此任務，如下所示：

<code class="language-javascript">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!');
});</code>

在持續集成平台上進行測試

TestCafe提供強大的命令行和編程接口，使其易於與大多數現代CI系統一起使用。

測試運行報告可以用大多數流行的CI系統理解的JSON、xUnit和NUnit格式呈現。

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

總結

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

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

TestCafe常見問題解答

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

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

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

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

TestCafe如何處理異步操作？

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

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

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

如何調試TestCafe中的測試？

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

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

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

TestCafe如何處理頁面導航？

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

我可以將TestCafe與持續集成系統一起使用嗎？

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

如何在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應用程序測試的詳細內容。更多資訊請關注PHP中文網其他相關文章！