Elementor Playwright 端到端测试指南：本地 WordPress 环境搭建、服务配置与测试套件运行

Elementor Playwright 端到端测试指南本地 WordPress 环境搭建、服务配置与测试套件运行【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementorElementor 开源仓库当前工作目录GitHub_Trending/el/elementor版本 4.4.0在 tests/playwright 目录下维护了一套基于 Playwright 的端到端E2E测试体系覆盖编辑器、各类 Widget、嵌套 Tabs/Accordion、Container、AI、Home 面板等多个功能模块。本文以仓库内的 tests/playwright/README.md 为骨架结合package.json中的 npm scripts 与 playwright.config.ts 等真实源码完整讲解在本地复现这套测试环境的三个步骤——启动 WordPress 服务器、配置服务器、运行测试并附上常见问题排查与源码级原理分析。读完本文你将能独立拉起一套可复现的本地 E2E 测试环境并用 grep 过滤、环境变量等方式精准运行任意测试套件。一、总体流程三步启动 E2E 测试按照仓库文档运行 Playwright 测试需要依次完成三个步骤运行本地 WordPress 服务器——为测试提供一个稳定、可复现的 WordPress 运行环境配置服务器——导入测试所需模板、改写.htaccess规则、激活指定主题运行测试——按测试套件执行 Playwright 用例。这三点分别对应package.json中的三个 npm script见 package.jsonstart-local-server: npm run setup-templates wp-lite-env start --config./tests/playwright/.playwright-wp-lite-env.json --port8888 wp-lite-env start --config./tests/playwright/.playwright-wp-lite-env.json --port8889, test:setup:playwright: wp-lite-env cli --config./tests/playwright/.playwright-wp-lite-env.json --port8888 --command\bash elementor-config/setup.sh\ wp-lite-env cli --config./tests/playwright/.playwright-wp-lite-env.json --port8889 --command\bash elementor-config/setup.sh\, test:playwright: playwright test -c tests/playwright/playwright.config.ts在开始之前请确保已按 CONTRIBUTING.md 完成依赖安装npm ci与composer install。仓库的devDependencies中已经声明了playwright/test ~1.62.0、elementor/wp-lite-env ^0.0.20等关键依赖见 package.json无需额外手工安装。二、第一步运行本地 WordPress 服务器2.1 为什么使用 wp-env / wp-lite-env原文档指出为了获得稳定、可复现的测试环境项目使用wp-envwordpress/env提供 Docker 化的服务器与 WP CLI。而在当前仓库的实际实现中服务器启动脚本已经演进为基于elementor/wp-lite-env的工具见 package.json其用法与 wp-env 一致但针对 Elementor 的测试场景做了轻量化封装。执行下面的命令即可启动服务器npm run start-local-server这条命令实际做了三件事对应 package.json 中的脚本组合npm run setup-templates清空并重建templates/目录把 tests/playwright/templates 下的模板 JSON 复制到templates/playwright把 tests/lighthouse/templates 下的模板复制到templates/lighthouse以 .playwright-wp-lite-env.json 为配置在8888 端口启动第一个 WordPress 实例以同一份配置在8889 端口启动第二个 WordPress 实例。2.2 为什么需要两个服务器实例从 playwright.config.ts 可以看出这套双实例设计const isCI Boolean( process.env.CI ); const localDevServer http://127.0.0.1:9400; const localTestServer http://127.0.0.1:9400; const ciDevServer http://localhost:8888; const ciTestServer http://localhost:8889; process.env.DEV_SERVER isCI ? ciDevServer : localDevServer; process.env.TEST_SERVER isCI ? ciTestServer : localTestServer;在CI环境下8888 端口作为开发服务器被测站点8889 端口作为测试服务器测试基础设施两个实例并行工作以加速流水线在本地环境下两者统一指向http://127.0.0.1:9400。npm run start-local-server中同时拉起 8888 与 8889 两个实例正是为了模拟 CI 的双服务器拓扑保证本地行为与流水线一致。启动成功后测试会通过baseURL连接对应实例playwright.config.ts 中BASE_URL未设置时按TEST_PARALLEL_INDEX在TEST_SERVER与DEV_SERVER之间选择。2.3 可选的 WordPress Playground 方案除 Docker 化的 wp-lite-env 外仓库还提供了基于WordPress Playground的浏览器内运行方案package.jsonnpm run wp-playground # 挂载当前工作区源码 npm run wp-playground:ci # 挂载构建产物 ./build npm run full-e2e-local # watch playground UI 模式测试一条龙其 Blueprint 配置文件位于 tests/playwright/blueprintslocal.json、ci.json等适合不想依赖 Docker 的场景。三、第二步配置服务器3.1 配置内容清单原文档明确测试运行前服务器必须完成以下三项配置导入模板——目前至少需要导入law-firm-about模板配置.htaccess激活主题——激活hello-elementor主题。执行以下命令完成配置npm run test:setup:playwright-sanity说明原文档中该命令名为test:setup:playwright-sanity当前仓库package.json中对应的实现为test:setup:playwrightpackage.json它会依次对 8888 与 8889 两个实例执行wp-lite-env cli ... --commandbash elementor-config/setup.sh。如果你使用的版本中test:setup:playwright-sanity不存在请改用npm run test:setup:playwright。该命令的作用正是导入模板、重写.htaccess规则、激活hello-elementor主题。3.2 模板资产从哪里来模板 JSON 存放在 tests/playwright/templates 目录除law-firm-about.json外还有文件说明law-firm-about.json律师所 About 页文档指定的最小必需模板law-firm-home-page.json首页模板law-firm-careers.json/law-firm-contact.json/law-firm-partner-page.json/law-firm-practice-areas.json/law-firm-service.json/law-firm-team.json律师所站点的其他页面模板nested-tabs-with-icons.json嵌套 Tabs带图标专用模板rating-flex-wrap.jsonRating 组件换行场景模板它们通过npm run setup-templatespackage.json复制到templates/playwright/下供导入流程使用。此外tests/playwright/sanity/templates 下还维护了各测试文件自身依赖的内联测试模板如button-icon-styling.json、container-dimensions-ltr-rtl.json、icon-box.json、icon-list.json用于验证特定 Widget 的样式渲染。3.3 测试如何使用这些模板以嵌套 Tabs 套件为例tests/playwright/sanity/modules/nested-tabs 下拆分了 7 个测试文件nested-tabs-1.test.tsnested-tabs-6.test.ts及nested-tabs-atomic-repeaters.test.ts测试通过page对象在编辑器中创建nested-tabs等元素并断言渲染结果。运行这些用例时Playwright 会连接已配置好的服务器实例先登录后台再新建页面/编辑器会话。四、第三步运行测试4.1 默认测试包配置完成后直接执行npm run test:playwright该命令等价于package.jsonplaywright test -c tests/playwright/playwright.config.ts从 playwright.config.ts 可以看到测试目录为./sanity即 tests/playwright/sanity并且通过grepInvert: /elements-regression/排除了元素回归测试——回归测试有独立的配置文件 tests/elements-regression/playwright.config.ts 和独立脚本package.json。4.2 按测试包过滤运行仓库把测试拆分为多个包package目的是在 CI 中并行化测试运行。运行指定测试包有两种等价方式见 tests/playwright/README.mdnpm run test:playwright -- --grepnested-tabs或TEST_SUITEnested-tabs npm run test:playwright两种方式都是把 Playwright 的--grep过滤条件指向测试标题中的标签如nested-tabs。标签与测试文件一一对应——例如嵌套 Tabs 的 7 个测试文件都在标题中包含nested-tabs标签因此一条 grep 即可选中整个套件。4.3 常用调试与回归命令仓库在 package.json 中还提供了以下配套命令npm run test:playwright:debug # 等价于 test:playwright -- --debug npm run test:playwright:elements-regression # 运行元素回归测试 npm run test:playwright:elements-regression:core # 仅核心元素回归 npm run test:playwright:elements-regression:atomic # 仅 Atomic 元素回归4.4 测试配置关键参数速查playwright.config.ts 与 tests/playwright/config/timeouts.ts 中定义了本地/CI 行为差异下表汇总了核心配置配置项本地默认值CI 值说明DEV_SERVERhttp://127.0.0.1:9400http://localhost:8888被测站点地址TEST_SERVERhttp://127.0.0.1:9400http://localhost:8889测试服务器地址timeout单用例90_000 * 2 180_000ms90_000ms本地超时翻倍降低慢机器误报globalTimeout15min * 2 30min15min整个测试运行上限expect/action5_000 * 25_000ms断言与动作超时navigation10_000 * 210_000ms导航超时retries03CI 下失败自动重试 3 次workers12CI 下双 worker 并行headlesstruetrue无头模式viewport1920x10801920x1080视口尺寸traceretain-on-failureretain-on-failure失败保留 tracevideooffretain-on-failureCI 失败保留视频toHaveScreenshot像素差0.030.03截图对比容差 3%此外还支持两个环境变量FULL_BROWSER_COMPATtrue启用 Chromium / Firefox / WebKit 三浏览器矩阵每个浏览器使用独立的 snapshot 路径模板BASE_URL显式覆盖被测站点地址优先级最高见 playwright.config.ts。五、源码视角登录、Nonce 与 worker 级存储状态理解测试框架的底层机制有助于排查 README 中记录的报错。测试通过 tests/playwright/parallelTest.ts 提供的parallelTest基类运行其核心设计如下worker 级认证workerStorageState以testInfo.workerIndex为标识把登录态写入outputDir/.storageState-{id}.json。若文件已存在则直接复用避免重复登录登录实现tests/playwright/wp-authentication.ts通过POST {baseUrl}/wp-login.php提交log用户名、pwd密码、wp-submitLog In表单字段默认凭据为admin / password可用USERNAME、PASSWORD环境变量覆盖见 parallelTest.tsNonce 获取tests/playwright/wp-authentication.ts请求wp-admin/post-new.php从页面内嵌的var wpApiSettings {...}中正则提取nonce:...用于构造ApiRequestsREST API 请求工具位于 tests/playwright/assets/api-requests.ts若页面提示WordPress has been updated!还会先通过浏览器点击Update WordPress Database / Continue完成数据库升级再重试双实例分流TEST_PARALLEL_INDEX1的 worker 指向TEST_SERVER其余指向DEV_SERVER配合 playwright.config.ts 中按索引分配的调试端口9223 / 9222实现多实例并行。六、TroubleshootingstorageState 与 Nonce 报错6.1 问题现象原文档记录了一个高频本地报错当把测试目标从localhost8888切换为本地站点如 Local by Flywheel 的local-dev.local后运行用例时报Error: Failed to fetch Nonce. Base URL: http://local-dev.local/, Storage State: /Users/user/Local Sites/local-dev/app/public/wp-content/plugins/elementor/test-results/.storageState-0.json6.2 根因与解决这条错误直接对应 parallelTest.ts 中apiRequestsfixture 的失败路径fetchNonce失败时会抛出包含Base URL与Storage State信息的错误。根因在于storageState 是 worker 级缓存的。如果你此前以localhost完成过认证之后修改了BASE_URLparallelTest会命中已存在的.storageState-{id}.jsonparallelTest.ts把旧域名下的登录 Cookie 复用到新站点上导致认证失效、Nonce 无法获取。解决方案删除旧的test-results/.storageState-{id}.json文件例如test-results/.storageState-0.json让测试框架在下一个 worker 中重新执行登录流程为当前BASE_URL生成全新的认证状态。6.3 相关预防建议修改服务器地址后可同时清理test-results/目录下的 trace、视频与截图产物避免旧快照干扰断言若出现Nonce not found on the page类错误通常是 WordPress 数据库需要升级页面含WordPress has been updated!wp-authentication.ts 中的updateDatabase会自动处理截图断言对平台敏感配置中使用了{platform}的 snapshot 路径模板playwright.config.ts跨平台Linux/macOS/Windows运行时应分别维护基线快照这与仓库 tests/playwright/sanity 下按-linux命名的快照文件如plugin-tester-container.test.ts-snapshots/editor-linux.png的组织方式一致。七、测试目录速览你可以在哪里找到用例tests/playwright目录结构节选如下便于快速定位用例tests/playwright/playwright.config.ts——Playwright 主配置tests/playwright/parallelTest.ts——worker 级认证/API 请求基类tests/playwright/wp-authentication.ts——登录与 Nonce 实现tests/playwright/config/timeouts.ts——超时配置tests/playwright/templates——服务器导入的站点模板含law-firm-about.jsontests/playwright/blueprints——WordPress Playground Blueprinttests/playwright/sanity——默认测试包按模块组织admin、includes/widgets、modules/nested-tabs、modules/container、modules/ai等并内嵌各用例的截图基线tests/playwright/utils、tests/playwright/pages、tests/playwright/selectors、tests/playwright/testData——测试工具、页面对象、选择器与测试数据tests/playwright/upgrade-test——升级场景测试tests/playwright/mu-plugins 与 tests/playwright/plugin-tester-plugins——随测试环境加载的 mu-plugin 与插件测试器。八、总结Elementor 的 Playwright E2E 测试体系以双服务器实例 worker 级认证 标签化套件拆分为核心npm run start-local-server用 wp-lite-env 在 8888/8889 端口拉起两个 WordPress 实例npm run test:setup:playwright导入law-firm-about等模板、重写.htaccess并激活hello-elementor主题npm run test:playwright可配--grep或TEST_SUITE过滤执行 tests/playwright/sanity 下的各类用例。遇到 Nonce/storageState 报错时删除test-results/.storageState-{id}.json重新登录即可。按此流程你即可在本地完整复现 Elementor 的官方端到端质量保障链路。【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考