企业官网建设流程全解析

带 JavaScript 支持的端到端测试：wp-browser WPWebDriver + Chromedriver 完全指南

【免费下载链接】wp-browserThe easy and reliable way to test WordPress with Codeception. 10 years of proven success.项目地址: https://gitcode.com/gh_mirrors/wp/wp-browser

wp-browser是测试 WordPress 的可靠工具，其中WPWebDriver 模块借助Chromedriver驱动真实浏览器，让插件和主题开发者能够执行带 JavaScript 支持的端到端测试（E2E 测试）：登录后台、激活插件、点击按钮、断言页面变化，一切都像真实用户操作一样。本指南带你从零完成 WordPress 端到端测试环境的搭建与实战。

为什么 WordPress 端到端测试需要 WPWebDriver

WordPress 后台和管理界面大量依赖 JavaScript：AJAX 请求、动态列表、Gutenberg 编辑器……只用 HTTP 请求模拟的测试方式无法覆盖这些场景。

WPWebDriver 模块（源码位于 src/Module/WPWebDriver.php）基于 Codeception WebDriver 模块扩展而来，它通过 Chromedriver 控制 Chrome 浏览器，提供完整的 JavaScript 支持，专门用于：

• 测试依赖 JavaScript 渲染的页面
• 模拟真实的用户交互（点击、填写、弹窗）
• 验证后台操作（激活插件、切换主题、编辑文章）

官方模块文档：docs/modules/WPWebDriver.md

准备工作：一键下载 Chromedriver

Chromedriver 版本必须与本机 Chrome 浏览器版本匹配。wp-browser 提供了chromedriver:update命令自动完成这件事——它会检测你的 Chrome 版本，下载匹配的 Chromedriver 并放入 Composer 的bin目录（实现见 src/Command/ChromedriverUpdate.php）。

在codeception.yml中启用该命令：

extensions: commands: - "lucatume\WPBrowser\Command\ChromedriverUpdate"

启用后执行codecept chromedriver:update即可。命令详情参考 docs/commands.md。

配置测试套件：启用 WPWebDriver 模块

为端到端测试创建一个专属套件（例如webdriver），核心配置如下（可参考项目自带的 tests/webdriver.suite.dist.yml）：

actor: WebDriverTester modules: enabled: - WPWebDriver - WPDb - WPFilesystem config: WPWebDriver: url: 'http://localhost:8080' adminUsername: 'admin' adminPassword: 'password' adminPath: '/wp-admin' browser: chrome host: 'localhost' port: '4444' path: '/' capabilities: "goog:chromeOptions": args: - "--headless" - "--no-sandbox"

几个关键配置项说明：

💡 小技巧：把端口、主机写成%CHROMEDRIVER_PORT%形式的环境变量，不同机器可以复用同一份配置。

编写第一个 WordPress 端到端测试

在tests/webdriver/下新建一个 Cest 文件。以"激活插件"为例，完整可运行的示例见 tests/webdriver/PluginActivationCest.php：

public function be_able_to_activate_plugins(WebDriverTester $I): void { $I->loginAsAdmin(); $I->amOnPluginsPage(); $I->activatePlugin('hello-dolly'); $I->seePluginActivated('hello-dolly'); $I->deactivatePlugin('hello-dolly'); $I->seePluginDeactivated('hello-dolly'); }

整个流程只有 6 行：自动登录管理员后台 → 打开插件页 → 点击"启用" → 断言插件已激活。所有步骤都在真实浏览器中执行，JavaScript 全程运行。

WPWebDriver 还提供了大量便捷的 WordPress 专用方法，常用的有：

• loginAsAdmin()— 一键登录后台
• amOnPluginsPage()/amOnThemesPage()/amOnPagesPage()— 直达后台页面
• activatePlugin()/activateTheme()— 激活插件或主题
• amEditingPostWithId()— 打开指定文章的编辑页
• amOnAdminAjaxPage()— 发起admin-ajax.php同步请求

完整方法清单见 docs/modules/WPWebDriver.md。

自动管理 Chromedriver：ChromeDriverController 扩展

手动启动 Chromedriver 很繁琐。wp-browser 的ChromeDriverController服务扩展（源码：src/Extension/ChromeDriverController.php）会在测试运行前自动启动、运行后自动停止 Chromedriver，核心实现位于 src/ManagedProcess/ChromeDriver.php。

启用方式：

extensions: enabled: - "lucatume\WPBrowser\Extension\ChromeDriverController" config: "lucatume\WPBrowser\Extension\ChromeDriverController": suites: [webdriver] port: 4444

它也可以配合dev:start/dev:stop命令统一管理整条本地测试栈。配置示例与更多选项见 docs/extensions/ChromeDriverController.md。

运行测试并查看结果

一切就绪后，在插件根目录执行：

vendor/bin/codecept run webdriver

• 想看着浏览器实际操作？去掉配置中的--headless参数即可看到完整的点击、跳转过程，非常适合调试。
• 测试失败时，WPWebDriver 默认会保存失败截图与控制台日志，快速定位是哪个断言出了问题。
• 更多套件写法（Cept 形式）可参考 tests/webdriver/HomepageCept.php。

常见问题速查

Chromedriver 和 Chrome 版本不匹配？重新执行codecept chromedriver:update，它会按当前 Chrome 版本自动匹配。

服务器上报--no-sandbox错误？在无沙箱环境（Docker、CI）中运行 Chrome 时，务必在goog:chromeOptions.args中加入--no-sandbox和--disable-dev-shm-usage。

端口被占用？修改 ChromeDriverController 的port配置（默认为 9515），同时保持 WPWebDriver 模块的port一致即可。

总结

wp-browser 让 WordPress 端到端测试变得像单元测试一样简单：配置一次，之后只需几行 PHP 代码，就能在真实浏览器中验证你的插件、主题和 JavaScript 交互是否按预期工作。

【免费下载链接】wp-browserThe easy and reliable way to test WordPress with Codeception. 10 years of proven success.项目地址: https://gitcode.com/gh_mirrors/wp/wp-browser