Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Concurrent Feature tests with Wallaby
Chris Keathley
September 05, 2016
Programming
2
410
Concurrent Feature tests with Wallaby
Chris Keathley
September 05, 2016
Tweet
Share
More Decks by Chris Keathley
See All by Chris Keathley
Building Adaptive Systems
keathley
25
1.1k
Contracts for building reliable systems
keathley
3
400
Kafka, the hard parts
keathley
1
900
Building Resilient Elixir Systems
keathley
5
1.3k
Consistent, Distributed Elixir
keathley
4
990
Telling stories with data visualization
keathley
0
290
Easing into continuous deployment
keathley
1
110
Leveling up your git skills
keathley
0
420
Generative Testing in Elixir
keathley
0
210
Other Decks in Programming
See All in Programming
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
260
Client-Side Field-Level Encryption for Apache Kafka Connect @ VoxxedDays Luxembourg 2022
hpgrahsl
0
120
Angular-basierte Micro Frontends mit Module Federation @API Summit
manfredsteyer
PRO
0
120
heyにおけるCI/CDの現状と課題
fufuhu
3
560
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
140
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.4k
パターンマッチングを学んで新しいJavaの世界へ!Java 18までの目玉機能をおさらいしよう / Java 18 pattern matching
ihcomega56
3
420
模組化的Swift架構(二) DDD速成
haifengkao
0
390
Cross Deviceチームにおけるスマートテレビアプリ開発ってどんな感じ?
cokaholic
0
120
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
datarian
0
250
CakePHPの内部実装 から理解するPSR-7
boro1234
0
260
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
Featured
See All Featured
Scaling GitHub
holman
451
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
BBQ
matthewcrist
74
7.9k
The Invisible Customer
myddelton
110
11k
Infographics Made Easy
chrislema
233
17k
The Pragmatic Product Professional
lauravandoore
19
3k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Web development in the modern age
philhawksworth
197
9.3k
Transcript
Concurrent Feature Tests with Wallaby Chris Keathley / @ChrisKeathley /
keathley@carbonfive.com
Feature tests: Driving tests from the UI
Name email Password Sign Up
Name email Password Sign Up Fill in
Name email Password Sign Up Fill in Click
Thanks for signing up! Did this show up?
Feature Tests
Feature Tests Represent real users
Feature Tests Represent real users Provide Confidence in the System
Feature Tests Represent real users Provide Confidence in the System
Dark Side
Feature Tests Represent real users Provide Confidence in the System
Feature Tests Represent real users Provide Confidence in the System
(Sometimes)
Feature Tests Represent real users Provide Confidence in the System
(Sometimes) (When they aren’t randomly failing)
Happens
Feature Tests ARE Slow
Wallaby
Wallaby Manages multiple browsers Concurrent Assumes async Interfaces
Wallaby TL;DR
Name email Password Sign Up
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
Wallaby Phoenix EcTo Test Sessions
Wallaby Phoenix EcTo Test Sessions Browser
Wallaby Phoenix EcTo Test Sessions Browser Browser
Wallaby Phoenix EcTo Test Sessions Browser
setup tags do {:ok, session} = Wallaby.start_session([]) on_exit, fn ->
Wallaby.end_session(session) end {:ok, session: session} end
Browser Browser Phoenix Ecto
Browser Browser Phoenix Ecto
Browser Browser Phoenix Ecto
Browser Phoenix Ecto
Browser Phoenix Ecto Ownership Metadata
Browser Phoenix Ecto Ownership Metadata Transaction Ownership
setup tags do {:ok, session} = Wallaby.start_session([]) on_exit, fn ->
Wallaby.end_session(session) end {:ok, session: session} end
setup tags do :ok = Ecto.Adapters.SQL.Sandbox.checkout(YourApp.Repo) metadata = Phoenix.Ecto.SQL.Sandbox.metadata_for( YourApp.Repo,
self()) {:ok, session} = Wallaby.start_session(metadata: metadata) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
setup tags do :ok = Ecto.Adapters.SQL.Sandbox.checkout(YourApp.Repo) metadata = Phoenix.Ecto.SQL.Sandbox.metadata_for( YourApp.Repo,
self()) {:ok, session} = Wallaby.start_session(metadata: metadata) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
setup tags do :ok = Ecto.Adapters.SQL.Sandbox.checkout(YourApp.Repo) metadata = Phoenix.Ecto.SQL.Sandbox.metadata_for( YourApp.Repo,
self()) {:ok, session} = Wallaby.start_session(metadata: metadata) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
setup tags do :ok = Ecto.Adapters.SQL.Sandbox.checkout(YourApp.Repo) metadata = Phoenix.Ecto.SQL.Sandbox.metadata_for( YourApp.Repo,
self()) {:ok, session} = Wallaby.start_session(metadata: metadata) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
defmodule YourApp.Endpoint do use Phoenix.Endpoint, otp_app: :your_app if Application.get_env(:your_app, :sql_sandbox)
do plug Phoenix.Ecto.SQL.Sandbox end plug YourApp.Router end
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
Thanks for signing up!
Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for
signing up! </span> </div>
Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for
signing up! </span> </div> session |> find(“.alert")
Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for
signing up! </span> </div> session |> find(“.alert")
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session |> find(".user")
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session |> find(".user") Ambiguous
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session |> find(".user", count: 2)
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session |> find(".user", count: 2) |> Enum.map(& find(&1, ".name") )
<div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span
class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div> HTML Test - User Names session |> find(".user", count: 2) |> Enum.map(& find(&1, ".name") ) |> Enum.map(& text(&1) ) # => ["Grace Hopper", "Alan Turing"]
session HTML Test - Grace’s Email <div class="users"> <div class="user">
<span class=“name"> Grace Hopper </span> <span class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div>
session |> find(".user", text: "Grace Hopper") HTML Test - Grace’s
Email <div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div>
session |> find(".user", text: "Grace Hopper") |> find(".email") HTML Test
- Grace’s Email <div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div>
session |> find(".user", text: "Grace Hopper") |> find(".email") |> text
# => "grace@hopper.com" HTML Test - Grace’s Email <div class="users"> <div class="user"> <span class=“name"> Grace Hopper </span> <span class=“email"> grace@hopper.com </span> </div> <div class="user"> <span class=“name"> Alan Turing </span> <span class=“email"> alan@turing.com </span> </div> </div>
find(".user") ? Browser
find(".user") JS Browser
find(".user") JS Browser
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can
register", %{session: session} do session |> visit("/users/new") |> find(".registration_form") |> fill_in("Full Name", with: "Grace Hopper") |> fill_in("Email", with: "grace@hoppper.com") |> fill_in("Password", with: "password") |> click("Register") msg_text = session |> find(".flash-message") |> text assert msg_text == "Welcome Grace Hopper" end end Sessions Queries actions
Name Sign Up
<form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit">
Register </button> </form> HTML
HTML <form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button
type=“submit"> Register </button> </form>
<form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit">
Register </button> </form> HTML Test session
<form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit">
Register </button> </form> HTML Test session |> fill_in("Name", with: "Grace Hopper")
<form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit">
Register </button> </form> HTML Test session |> fill_in("Name", with: "Grace Hopper") |> click_on("Register")
HTML Test session |> fill_in(“user_name", with: "Grace Hopper") |> click_on("Register")
<form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit"> Register </button> </form>
HTML Test session |> fill_in(“user_name", with: "Grace Hopper") |> click_on("Register")
<form> <label for="user_name"> Name </label> <input type="text" name=“user_name"> <label> <input type="checkbox" value="true" name="save_login"> Save login </label> <button type="submit"> Register </button> </form>
HTML Test session |> fill_in(“user_name", with: "Grace Hopper”) |> check("Save
login") |> click_on("Register") <form> <label for="user_name"> Name </label> <input type="text" name=“user_name"> <label> <input type="checkbox" value="true" name="save_login"> Save login </label> <button type="submit"> Register </button> </form>
fill_in(session, "First Name", with: "Chris") choose(session, "Radio Button 1") check(session,
"Checkbox") uncheck(session, "Checkbox") select(session, "My Awesome Select", option: "Option 1") click_on(session, "Some Button") attach_file(session, "File", path: "path/to/file") Other Actions
Wallaby Sessions Queries Interactions
Still More work to do!
https://github.com/keathley/wallaby https://speakerdeck.com/keathley Getting Started
None
None
Lets Build awesome stuff Together!
THANKS Chris Keathley / @ChrisKeathley / keathley@carbonfive.com