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

带 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-browserwp-browser是测试 WordPress 的可靠工具其中WPWebDriver 模块借助Chromedriver驱动真实浏览器让插件和主题开发者能够执行带 JavaScript 支持的端到端测试E2E 测试登录后台、激活插件、点击按钮、断言页面变化一切都像真实用户操作一样。本指南带你从零完成 WordPress 端到端测试环境的搭建与实战。为什么 WordPress 端到端测试需要 WPWebDriverWordPress 后台和管理界面大量依赖 JavaScriptAJAX 请求、动态列表、Gutenberg 编辑器……只用 HTTP 请求模拟的测试方式无法覆盖这些场景。WPWebDriver 模块源码位于 src/Module/WPWebDriver.php基于 Codeception WebDriver 模块扩展而来它通过 Chromedriver 控制 Chrome 浏览器提供完整的 JavaScript 支持专门用于测试依赖 JavaScript 渲染的页面模拟真实的用户交互点击、填写、弹窗验证后台操作激活插件、切换主题、编辑文章官方模块文档docs/modules/WPWebDriver.md准备工作一键下载 ChromedriverChromedriver 版本必须与本机 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.ymlactor: 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几个关键配置项说明配置项作用url被测 WordPress 站点的起始地址必填adminUsername/adminPassword管理员凭据供loginAsAdmin()等方法使用必填host/port/pathChromedriver 服务端点Chrome 的 path 用/capabilitiesChrome 启动参数--headless表示无界面运行 小技巧把端口、主机写成%CHROMEDRIVER_PORT%形式的环境变量不同机器可以复用同一份配置。编写第一个 WordPress 端到端测试在tests/webdriver/下新建一个 Cest 文件。以激活插件为例完整可运行的示例见 tests/webdriver/PluginActivationCest.phppublic 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。自动管理 ChromedriverChromeDriverController 扩展手动启动 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一致即可。总结环节对应工具下载匹配版 Chromedriverchromedriver:update命令驱动浏览器执行操作WPWebDriver 模块自动启停 ChromedriverChromeDriverController 扩展编写测试用例tests/webdriver/下的 Cest/Cept 文件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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考