Concurrent Feature tests with Wallaby

Transcript

1. Concurrent Feature Tests with Wallaby Chris Keathley / @ChrisKeathley / keathley@carbonfive.com
2. Feature tests: Driving tests from the UI
3. Name email Password Sign Up
4. Name email Password Sign Up Fill in
5. Name email Password Sign Up Fill in Click
6. Thanks for signing up! Did this show up?
7. Feature Tests
8. Feature Tests Represent real users
9. Feature Tests Represent real users Provide Confidence in the System
10. Feature Tests Represent real users Provide Confidence in the System Dark Side
11. Feature Tests Represent real users Provide Confidence in the System
12. Feature Tests Represent real users Provide Confidence in the System (Sometimes)
13. Feature Tests Represent real users Provide Confidence in the System (Sometimes) (When they aren’t randomly failing)
14. Happens
15. Feature Tests ARE Slow
16. Wallaby
17. Wallaby Manages multiple browsers Concurrent Assumes async Interfaces
18. Wallaby TL;DR
19. Name email Password Sign Up
20. defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can register", %{session: session} do end end
21. defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can register", %{session: session} do session end end
22. defmodule YourApp.UserRegistrationTest do use YourApp.AcceptanceCase, async: true test "users can register", %{session: session} do session |> visit("/users/new") end end
23. 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
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. 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
32. 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
33. Wallaby Phoenix EcTo Test Sessions
34. Wallaby Phoenix EcTo Test Sessions Browser
35. Wallaby Phoenix EcTo Test Sessions Browser Browser
36. Wallaby Phoenix EcTo Test Sessions Browser
37. setup tags do {:ok, session} = Wallaby.start_session([]) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
38. Browser Browser Phoenix Ecto
39. Browser Browser Phoenix Ecto
40. Browser Browser Phoenix Ecto
41. Browser Phoenix Ecto
42. Browser Phoenix Ecto Ownership Metadata
43. Browser Phoenix Ecto Ownership Metadata Transaction Ownership
44. setup tags do {:ok, session} = Wallaby.start_session([]) on_exit, fn -> Wallaby.end_session(session) end {:ok, session: session} end
45. 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
46. 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
47. 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
48. 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
49. 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
50. 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
51. 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
52. Thanks for signing up!
53. Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for signing up! </span> </div>
54. Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for signing up! </span> </div> session |> find(“.alert")
55. Thanks for signing up! <div class="alert"> <span class=“msg"> Thanks for signing up! </span> </div> session |> find(“.alert")
56. <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
57. <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
58. <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")
59. <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
60. <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)
61. <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") )
62. <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"]
63. 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>
64. 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>
65. 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>
66. 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>
67. find(".user") ? Browser
68. find(".user") JS Browser
69. find(".user") JS Browser
70. 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
71. 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
72. Name Sign Up
73. <form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit"> Register </button> </form> HTML
74. HTML <form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit"> Register </button> </form>
75. <form> <label for=“user_name"> Name </label> <input type="text" name=“user_name"> <button type=“submit"> Register </button> </form> HTML Test session
76. <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")
77. <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")
78. 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>
79. 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>
80. 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>
81. 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
82. Wallaby Sessions Queries Interactions
83. Still More work to do!
84. https://github.com/keathley/wallaby https://speakerdeck.com/keathley Getting Started
87. Lets Build awesome stuff Together!
88. THANKS Chris Keathley / @ChrisKeathley / keathley@carbonfive.com