OpenByt - 您免費 WordPress 知識的終極來源

WordPress:自動化測試與 CI 指南

包括 WordPress 在內的軟體開發完全依賴手動測試的時代已經結束。從手動測試過渡到自動化測試是對軟體開發團隊不斷演進的需求的回應。這篇文章以初學者易懂的方式,詳細概述為什麼會發生這種轉變、自動化測試和持續整合 (CI) 對 WordPress 開發的好處,以及如何有效地實作這些實務。

1.WordPress 從手動測試到自動化測試的轉變

手動測試對於瞭解應用程式的運作方式非常重要,但它有許多限制。它耗費時間、需要大量資源,而且容易發生人為錯誤,尤其是在重複的情況下。

自動化測試透過提供快速、有效率且一致的 WordPress 應用程式測試方式來解決這些問題。無論您要建立的是簡單的部落格或是複雜的會員制網站,自動化測試都能節省時間、減少錯誤,並協助確保您的網站功能符合預期。

1.1 為何要過渡到自動化測試?

2.WordPress 開發中自動化測試和 CI/CD 的好處

自動化測試和持續整合/持續部署 (CI/CD) 對維護高品質的 WordPress 網站至關重要。

3.WordPress 自動化測試的主要工具

有幾種工具可以用來簡化 WordPress 的自動測試。這些工具可確保代碼品質、檢查外掛程式相容性,並協助在開發週期的早期找出問題。

3.1 PHPUnit

PHPUnit 是 WordPress 核心開發團隊認可的官方測試框架,用於測試 PHP 程式碼。它是一個強大的工具,可確保外掛程式和主題的穩定性。

逐步設定 PHPUnit:

1.安裝 PHPUnit:

透過 Composer 安裝 PHPUnit。執行下列指令進行安裝:

composer require --dev phpunit/phpunit

原因:使用 Composer 可確保您擁有與 WordPress 環境相容的正確 PHPUnit 版本。

2.克隆 WordPress 測試資源庫:

克隆 WordPress 測試套件庫,以建立隔離的測試環境。使用 Git 或 SVN 進行複製:

git clone https://github.com/WordPress/wordpress-develop.git

原因:這提供您測試 WordPress 程式碼所需的檔案和環境,而不會影響您的生產設定。

3.設定您的測試環境:

4.執行 PHPUnit 測試:

使用下列指令執行測試:

./vendor/bin/phpunit

原因:執行測試有助於在開發過程中及早發現錯誤,提高程式碼品質並減少部署問題。

PHPUnit 是測試外掛程式和主題後端功能的理想選擇,可為開發人員提供詳細的回饋。

3.2 WP-CLI

WP-CLI 是 WordPress 的命令列介面,可簡化 PHPUnit 測試的設定與管理。

使用 WP-CLI 設定測試:

1.安裝 WP-CLI:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
mv wp-cli.phar /usr/local/bin/wp

原因:WP-CLI 提供更快的方式來管理 WordPress 安裝,特別是對於重複性的工作,例如設定測試環境,非常有用。

2.產生外掛程式測試檔:

使用 WP-CLI 為您的外掛程式建立單元測試檔案:

wp scaffold plugin-tests my-plugin

原因:撠 wp scaffold 外掛程式測試 指令會建立開始測試所需的所有檔案,節省您的時間。

3.設定測試資料庫:

建立獨立的測試資料庫來執行單元測試,而不會影響您的生產資料:

bash bin/install-wp-tests.sh wordpress_test root '' localhost

提示:請務必使用專用的測試資料庫,以防止意外修改您的即時網站資料。

4.執行測試:

3.3 用於端對端測試的 Cypress

賽普拉斯 是一個開放原始碼框架,用來為 WordPress 網站建立端對端測試。它對於測試網站如何與使用者互動特別有用。

如何設定 Cypress:

1.安裝 Cypress:

透過 npm 安裝 Cypress:

npm install cypress --save-dev

原因: Cypress is designed for end-to-end testing, which means it tests your website’s entire workflow, providing insights into user interactions.

2.設定 Cypress:

Cypress 會自動建立必要的檔案和資料夾,例如 cypress.json,來設定框架。您可以根據專案需求設定此檔案。

提示:自訂 baseUrlcypress.json 以符合您的測試環境。

3.Write Tests:

Cypress 使用 JavaScript 來撰寫測試腳本。例如,測試登入頁面:

describe('Login Test', () => {
  it('should log in successfully', () => {
    cy.visit('https://example.com/login');
    cy.get('input[name="username"]').type('user');
    cy.get('input[name="password"]').type('password');
    cy.get('button[type="submit"]').click();
    cy.contains('Dashboard').should('be.visible');
  });
});

原因:Cypress 提供了清晰的語法,即使是初學者也能輕鬆撰寫和理解測試案例。

4.執行測試:

使用 Cypress 執行測試:

npx 檜木開口

提示:Cypress UI 以視覺化的方式呈現每個測試步驟,讓除錯更加容易。

賽普拉斯 提供高度視覺化、互動式的使用者互動測試方式,對前端測試特別有效。

3.4 Behat 用於行為驅動開發 (BDD)

貝哈特 是一個專注於行為驅動開發 (BDD) 的框架,非常適合在 WordPress 測試使用者體驗。

設定 Behat:

1.安裝 Behat:

使用 Composer 安裝 Behat:

composer require --dev behat/behat

原因:Behat 可讓您以自然語言測試 WordPress 應用程式的行為,確保功能符合業務需求。

2.設定 Behat:

建立一個 behat.yml 配置檔案:

預設:
  suites:
    default:
      contexts:
        - FeatureContext
  extensions:
    Behat\MinkExtension:
      base_url: http://localhost
      selenium2: ~

提示:使用 MinkExtension 進行瀏覽器自動化,讓模擬使用者互動變得更容易。

3.Write Scenarios in Gherkin:

Behat 使用 Gherkin,這是一種描述使用者行為的語言。舉例來說

功能:使用者登入
  情景:成功登入
    我在 "/login" 上
    當我填入 「使用者名稱」 為 "user" 時
    我填入 「密碼 」為 "password
    然後按「登入
    然後我應該會看到「歡迎來到您的儀表板」。

原因:以 Gherkin 語言撰寫可讓非技術利害關係人瞭解測試的內容。

4.執行測試:

使用 Behat 執行:

供應商/bin/behat

提示:經常執行測試有助於找出預期與實際行為之間的差異。

貝哈特 是確保您的 WordPress 網站符合業務需求的理想選擇,它著重於終端使用者的使用情境。

3.5 全面測試的守則概念

驗證碼 讓開發人員可以在單一工具中進行單元、功能和驗收測試,為 WordPress 專案提供全面的測試。

如何設定 Codeception:

1.安裝 Codeception:

使用 Composer 安裝 Codeception:

composer require codeception/codeception --dev

原因:Codeception 支援不同的測試,使其成為全面性 WordPress 測試的通用工具。

2.初始化 Codeception:

執行初始化指令以設定 Codeception:

vendor/bin/codecept bootstrap

提示:初始化 Codeception 會為不同的測試套件建立所需的資料夾結構。

3.設定測試套件:

4.Write Tests:

Codeception 支援以 PHP 為基礎的測試腳本,以測試不同的情境,例如:

wantTo('ensure that login works');
$I->amOnPage('/login');
$I->fillField('username', 'user');
$I->fillField('password', 'password');
$I->click('Login');
$I->see('Dashboard');

提示:使用描述性的測試名稱可以讓您更容易了解測試的意圖和結果。

5.執行測試:

vendor/bin/codecept run

驗證碼 將不同的測試結合到單一工作流程中,強大驗證複雜的 WordPress 專案。

4.測試工具與開發環境的整合

Integrating automated testing tools with development environments helps streamline and enhance testing processes. Here’s how you can incorporate these tools into different environments:

退出行動版