System tests with Capybara in Ruby on Rails - Step-by-Step Execution

Concept Flow - System tests with Capybara

Start Test Suite

↓

Setup Test Environment

↓

Launch Browser Simulator

↓

Visit Web Page

↓

Find Elements & Interact

↓

Check Expected Outcomes

↓

Pass or Fail Test

↓

Close Browser Simulator

↓

End Test Suite

This flow shows how a system test with Capybara runs: it sets up, opens a simulated browser, visits pages, interacts with elements, checks results, and finishes.

Execution Sample

Ruby on Rails

require "application_system_test_case"

class HomePageTest < ApplicationSystemTestCase
  test "visiting the home page" do
    visit "/"
    assert_selector "h1", text: "Welcome"
  end
end

This test opens the home page and checks if an <h1> with 'Welcome' text is present.

Execution Table

Step	Action	Evaluation	Result
1	Start test 'visiting the home page'	N/A	Test begins
2	Setup test environment	N/A	Test environment ready
3	Launch browser simulator	N/A	Browser simulator opened
4	Visit '/' page	N/A	Home page loaded
5	Find <h1> element with text 'Welcome'	Element found?	Yes, element found
6	Assert element text equals 'Welcome'	Text matches?	Yes, assertion passes
7	Test passes	N/A	Test marked as passed
8	Close browser simulator	N/A	Browser closed
9	End test	N/A	Test suite ends

💡 Test ends after assertion passes and browser simulator closes

Variable Tracker

Variable	Start	After Step 4	After Step 5	After Step 6	Final
page_url	nil	"/"	"/"	"/"	"/"
element_found	false	false	true	true	true
assertion_passed	false	false	false	true	true

Key Moments - 3 Insights

Why do we need to launch a browser simulator in system tests?

Because Capybara simulates a real user interacting with the app through a browser, so launching a browser simulator lets the test behave like a real user. See execution_table step 3.

What happens if the <h1> element with text 'Welcome' is not found?

The assertion fails at step 6, causing the test to fail and stop. The test won't reach step 7 or beyond.

Why do we close the browser simulator at the end?

To clean up resources and avoid leftover browser processes. This happens at step 8 to keep tests isolated and efficient.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'element_found' after step 5?

A true

B false

C nil

D undefined

💡 Hint

Check variable_tracker row for 'element_found' at 'After Step 5'

At which step does the test confirm the page has loaded?

A Step 2

B Step 4

C Step 6

D Step 8

💡 Hint

Look at execution_table action descriptions for page loading

If the assertion fails, which step would the test NOT reach?

A Step 5

B Step 6

C Step 7

D Step 4

💡 Hint

See execution_table steps after assertion passes

Concept Snapshot

System tests with Capybara simulate user actions in a browser.
Use 'visit' to open pages and 'assert_selector' to check elements.
Tests run in a browser simulator for realistic interaction.
Close the simulator after tests to clean up.
Assertions decide if tests pass or fail.

Full Transcript

System tests with Capybara run by starting a test, setting up the environment, and launching a browser simulator. The test visits a web page, finds elements like headers, and checks if they have expected text. If the checks pass, the test passes. The browser simulator closes after the test to keep things clean. This process helps test the app like a real user would, ensuring the interface works correctly.