Testing with Playwright

Phoenix LiveView Browser Testing with Playwright

Browser testing is definitely slower than your standard LiveView tests, but sometimes it's needed for getting the confidence you need in your application. When you need to test complex user interactions, JavaScript behavior, or full-page flows that span multiple steps, unit tests just aren't enough. Playwright for Elixir lets you control actual browsers and interact with your Phoenix application just like a real user would. The setup is straightforward—you add the dependency as test-only, enable the Phoenix server in test mode, and create a reusable test helper module. The video walks through the complete setup process and demonstrates how to write your first browser test.

Testing Phoenix Authentication Flows

Testing authentication in Phoenix LiveView applications requires testing form interactions, redirects, and session management all working together in a real browser environment. This is particularly important for complex flows like magic link authentication introduced in Phoenix 1.8. You can't easily mock out parts of the authentication system when you need to verify the complete user journey—from visiting a protected page, getting redirected to login, submitting credentials, and ending up authenticated on the intended page. The video demonstrates how to test both email/password login and magic link authentication flows step by step.

test "user can log in with valid email and password", %{browser: browser} do
  user = user_fixture()
  page = Browser.new_page(browser)
  
  Page.goto(page, url(~p"/users/settings"))
  Page.wait_for_load_state(page)
  
  # Should redirect to login
  assert Page.url(page) =~ "/users/log-in"
  
  Page.fill(page, "input#user_email", user.email)
  Page.fill(page, "input#user_password", valid_user_password())
  Page.click(page, "button[type='submit']")
  
  # Should redirect to settings after login
  assert Page.text_content(page, "h1") =~ "Account Settings"
end

What you will learn

How to add Playwright as a test dependency and configure Phoenix server for browser testing
Setting up a reusable PlaywrightCase module with browser lifecycle management and test helpers
Writing browser tests for email/password authentication flows with form interactions and redirects
Testing magic link authentication including token generation and confirmation page interactions
Best practices for when to use browser tests versus unit tests in Phoenix LiveView applications
Debugging techniques and assertion strategies for complex multi-step user flows

Screencast