Wallaby实战：构建Todo应用的完整测试案例

Wallaby实战：构建Todo应用的完整测试案例

【免费下载链接】wallabyConcurrent browser tests for your Elixir web apps.项目地址: https://gitcode.com/gh_mirrors/wa/wallaby

Wallaby是一款专为Elixir Web应用打造的并发浏览器测试工具，能模拟真实用户交互，让开发者轻松构建可靠的端到端测试。通过Wallaby，你可以同时运行多个测试用例，自动管理浏览器会话，为Todo类应用提供高效的测试解决方案。

快速入门：Wallaby环境搭建

安装步骤

要开始使用Wallaby测试你的Todo应用，首先需要在mix.exs中添加依赖：

def deps do [ {:wallaby, "~> 0.30", runtime: false, only: :test} ] end

然后配置测试驱动，默认推荐使用Chrome：

# config/test.exs config :wallaby, driver: Wallaby.Chrome

确保在test_helper.exs中启动Wallaby：

{:ok, _} = Application.ensure_all_started(:wallaby) Application.put_env(:wallaby, :base_url, YourAppWeb.Endpoint.url)

必要依赖

安装Wallaby后，还需要确保系统中已安装：

• Chrome浏览器
• chromedriver（需与Chrome版本匹配）
• Elixir 1.12+ 和 OTP 22+

编写第一个Todo测试用例

基础测试结构

使用Wallaby的Feature模块可以轻松创建测试场景。下面是一个完整的Todo创建测试示例：

defmodule MyApp.Features.TodoTest do use ExUnit.Case, async: true use Wallaby.Feature import Wallaby.Query, only: [css: 2, text_field: 1, button: 1] feature "用户可以创建新任务", %{session: session} do session |> visit("/todos") |> fill_in(text_field("New Todo"), with: "学习Wallaby测试") |> click(button("保存")) |> assert_has(css(".alert", text: "任务创建成功")) |> assert_has(css(".todo-list > .todo", text: "学习Wallaby测试")) end end

核心API解析

这个测试展示了Wallaby的几个核心功能：

• visit/2- 导航到指定页面
• fill_in/3- 在文本框中输入内容
• click/2- 点击按钮
• assert_has/2- 验证元素存在

Wallaby的查询系统会自动等待元素出现，有效避免了异步操作导致的测试不稳定问题。

高级测试技巧

多用户并发测试

Wallaby支持同时管理多个浏览器会话，非常适合测试多用户交互场景：

@page "/todos/collaborative" @task_field text_field("添加任务") @add_button button("添加") @sessions 2 feature "多用户实时协作", %{sessions: [user1, user2]} do user1 |> visit(@page) |> fill_in(@task_field, with: "共同完成项目") |> click(@add_button) user2 |> visit(@page) |> assert_has(css(".todo-item", text: "共同完成项目")) end

表单交互进阶

处理复杂表单时，可以使用作用域查找功能：

defmodule MyApp.Features.ComplexTodoTest do use ExUnit.Case, async: true use Wallaby.Feature import Wallaby.Query, only: [css: 1, text_field: 1, button: 1] @todo_form css(".todo-form") @title_field text_field("标题") @description_field text_field("描述") @due_date_field text_field("截止日期") @save_button button("保存任务") feature "创建带截止日期的任务", %{session: session} do session |> visit("/todos/new") |> find(@todo_form) |> fill_in(@title_field, with: "完成Wallaby教程") |> fill_in(@description_field, with: "学习高级测试技巧") |> fill_in(@due_date_field, with: "2023-12-31") |> click(@save_button) |> assert_has(css(".todo-item .title", text: "完成Wallaby教程")) |> assert_has(css(".todo-item .due-date", text: "2023-12-31")) end end

测试调试与优化

自动截图功能

开启失败自动截图可以极大提高调试效率：

# config/test.exs config :wallaby, screenshot_on_failure: true, screenshot_dir: "test/screenshots"

所有截图会保存在指定目录，文件名包含测试名称和时间戳，方便追踪问题。

处理异步操作

测试AJAX加载的内容时，Wallaby的等待机制会自动处理大多数情况。对于复杂场景，可以使用显式等待：

session |> click(button("加载更多任务")) |> assert_has(css(".todo-item", count: 10), timeout: 10000)

集成Phoenix应用

配置Phoenix测试环境

在Phoenix应用中使用Wallaby需要开启测试服务器：

# config/test.exs config :your_app, YourAppWeb.Endpoint, server: true

如果使用Ecto，建议配置沙箱模式实现并发测试：

# lib/your_app_web/endpoint.ex if sandbox = Application.compile_env(:your_app, :sandbox, false) do plug Phoenix.Ecto.SQL.Sandbox, sandbox: sandbox end

LiveView测试支持

对于Phoenix LiveView应用，需要添加沙箱钩子：

# test/support/hooks/allow_ecto_sandbox.ex defmodule YourApp.Hooks.AllowEctoSandbox do import Phoenix.LiveView def on_mount(:default, _params, _session, socket) do allow_ecto_sandbox(socket) {:cont, socket} end defp allow_ecto_sandbox(socket) do metadata = get_connect_info(socket, :user_agent) Phoenix.Ecto.SQL.Sandbox.allow(metadata, Application.get_env(:your_app, :sandbox)) end end

然后在路由中使用：

live_session :default, on_mount: YourApp.Hooks.AllowEctoSandbox do # ... 路由定义 end

总结与最佳实践

通过Wallaby，你可以为Todo应用构建可靠的端到端测试，确保用户交互流程的正确性。以下是一些最佳实践：

1. 保持测试独立- 每个测试应该可以单独运行，不依赖其他测试的状态
2. 使用有意义的选择器- 优先使用数据属性（如data-testid）而非样式类作为选择器
3. 合理组织测试- 将相关测试放在同一个模块，使用setup回调共享测试数据
4. 控制测试速度- 并发测试时注意控制会话数量，避免资源竞争

Wallaby的源码位于lib/wallaby/目录，包含了所有核心功能实现。更多详细API文档可以参考官方文档，通过这些工具和技巧，你可以构建出健壮的Todo应用测试套件，提升代码质量和用户体验。

要开始使用Wallaby，只需克隆仓库并按照文档配置：

git clone https://gitcode.com/gh_mirrors/wa/wallaby cd wallaby mix deps.get

立即开始使用Wallaby为你的Elixir Web应用构建可靠的浏览器测试吧！

【免费下载链接】wallabyConcurrent browser tests for your Elixir web apps.项目地址: https://gitcode.com/gh_mirrors/wa/wallaby