System tests with Capybara in Ruby on Rails - Performance & Optimization

Performance: System tests with Capybara

MEDIUM IMPACT

System tests with Capybara affect the overall test suite runtime and browser interaction speed, impacting developer feedback loop and CI pipeline duration.

Selecting elements in system tests

Ruby on Rails

visit '/users'
find('#submit-button').click

Using specific IDs or data attributes reduces DOM search time and speeds up test execution.

📈 Performance Gainsingle fast DOM query, reduces test runtime

Selecting elements in system tests

Ruby on Rails

visit '/users'
find('div').click
find('div').click
find('div').click

Using generic selectors like 'div' causes slow element lookup and may trigger multiple unnecessary DOM queries.

📉 Performance Costtriggers multiple DOM queries and slows test execution

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Generic selectors (e.g., 'div')	Multiple DOM queries	Multiple reflows if clicks trigger layout	High paint cost if many updates	[X] Bad
Specific selectors (e.g., '#id', '[data-test]')	Single targeted DOM query	Minimal reflows	Low paint cost	[OK] Good
Fixed sleep waits	No DOM operations during wait	None	Blocks test thread	[X] Bad
Capybara wait methods	DOM queries with timeout	Minimal reflows	Non-blocking	[OK] Good
Full browser mode	Full DOM and rendering	Multiple reflows	High paint and CPU cost	[X] Bad
Headless browser mode	Full DOM but no UI paint	Minimal paint cost	Lower CPU usage	[OK] Good

Rendering Pipeline

Capybara system tests simulate user interactions by controlling a browser or driver, triggering DOM updates and rendering cycles as a real user would.

→DOM Manipulation

→Layout

→Paint

→JavaScript Execution

⚠️ BottleneckJavaScript Execution and DOM queries during element lookup

Optimization Tips

1Use specific selectors like IDs or data attributes to speed up element lookup.

2Avoid fixed sleep delays; use Capybara's waiting methods instead.

3Run tests in headless mode to reduce resource usage and speed up execution.

Performance Quiz - 3 Questions

What is a performance drawback of using generic selectors like 'div' in Capybara system tests?

A They increase bundle size

B They reduce test coverage

C They cause multiple slow DOM queries and slow down tests

D They cause browser crashes

DevTools: Performance

How to check: Run system tests with browser open, record performance profile in DevTools during test run, then analyze timeline for long tasks and layout thrashing.

What to look for: Look for long scripting tasks, repeated layout recalculations, and excessive paint events indicating slow test interactions.

Practice

1. What is the main purpose of system tests with Capybara in a Rails application?

easy

A. To test individual Ruby methods for correctness

B. To measure server response time under load

C. To check database schema migrations

D. To simulate user actions in a real browser and check app behavior

Solution

1. Step 1: Understand system tests role

   System tests simulate how a real user interacts with the app through a browser.

2. Step 2: Compare with other test types

   Unlike unit tests or performance tests, system tests focus on full app behavior with UI.

3. Final Answer:

   To simulate user actions in a real browser and check app behavior -> Option D

4. Quick Check:

   System tests = simulate user in browser [OK]

Hint: System tests mimic real user clicks and typing [OK]

Common Mistakes:

• Confusing system tests with unit tests
• Thinking system tests check only backend code
• Assuming system tests measure performance

2. Which of the following is the correct way to visit the homepage in a Capybara system test?

easy

A. navigate_to root_url

B. go_to '/'

C. visit root_path

D. open_page '/'

Solution

1. Step 1: Recall Capybara visit syntax

   Capybara uses the method visit with a path or URL to open a page.

2. Step 2: Match correct method and argument

   root_path is the Rails helper for homepage path, so visit root_path is correct.

3. Final Answer:

   visit root_path -> Option C

4. Quick Check:

   Capybara visit + path helper = visit root_path [OK]

Hint: Use 'visit' with Rails path helpers to open pages [OK]

Common Mistakes:

• Using non-existent methods like go_to or open_page
• Confusing root_path with root_url in system tests
• Forgetting to use visit before path

3. Given this system test code snippet, what will be the output on the page?

visit root_path
fill_in 'Email', with: '[e-mail]'
fill_in 'Password', with: 'secret'
click_button 'Log in'
expect(page).to have_content('Welcome, [e-mail]')

medium

A. Test passes if 'Welcome, [e-mail]' appears after login

B. Test fails because 'fill_in' cannot find fields

C. Test raises error due to missing 'visit' method

D. Test passes without checking page content

Solution

1. Step 1: Analyze test steps

   The test visits the homepage, fills in login form fields, clicks login, then checks for welcome message.

2. Step 2: Understand Capybara behavior

   If the login works and page shows the welcome text, have_content will pass and test passes.

3. Final Answer:

   Test passes if 'Welcome, [e-mail]' appears after login -> Option A

4. Quick Check:

   fill_in + click_button + have_content = success check [OK]

Hint: Check page content after actions to confirm success [OK]

Common Mistakes:

• Assuming fill_in fails without checking form existence
• Forgetting to call visit before actions
• Ignoring the expect(page).to have_content assertion

4. You wrote this system test but it fails with "Capybara::ElementNotFound" error:

visit root_path
fill_in 'Username', with: 'testuser'
click_button 'Submit'

What is the most likely cause?

medium

A. Capybara does not support fill_in method

B. The form does not have a field labeled 'Username'

C. The button 'Submit' is missing from the page

D. You forgot to call visit before fill_in

Solution

1. Step 1: Understand Capybara::ElementNotFound meaning

   This error means Capybara could not find the form field or button with given label.

2. Step 2: Check test code and error cause

   Since visit is called, the likely cause is the field labeled 'Username' does not exist on the page.

3. Final Answer:

   The form does not have a field labeled 'Username' -> Option B

4. Quick Check:

   ElementNotFound = missing field or button [OK]

Hint: Check labels exactly match form fields and buttons [OK]

Common Mistakes:

• Assuming visit was not called when it was
• Thinking Capybara lacks fill_in support
• Ignoring exact label spelling and case

5. You want to write a system test that logs in a user, visits their profile page, and verifies their username is shown. Which sequence correctly uses Capybara commands?

hard

A. visit login_path; fill_in 'Email', with: user.email; fill_in 'Password', with: user.password; click_button 'Log in'; visit profile_path(user); expect(page).to have_content(user.username)

B. fill_in 'Email', with: user.email; click_button 'Log in'; visit profile_path(user); expect(page).to have_content(user.username)

C. visit profile_path(user); fill_in 'Email', with: user.email; click_button 'Log in'; expect(page).to have_content(user.username)

D. visit login_path; click_button 'Log in'; fill_in 'Email', with: user.email; fill_in 'Password', with: user.password; expect(page).to have_content(user.username)

Solution

1. Step 1: Identify correct login flow

   You must visit the login page first, then fill in email and password, then click login.

2. Step 2: Visit profile after login and check content

   After successful login, visit the profile page and check the username is displayed.

3. Final Answer:

   visit login_path; fill_in 'Email', with: user.email; fill_in 'Password', with: user.password; click_button 'Log in'; visit profile_path(user); expect(page).to have_content(user.username) -> Option A

4. Quick Check:

   Login then visit profile then check content [OK]

Hint: Always visit pages before interacting or checking content [OK]

Common Mistakes:

• Trying to fill_in before visiting login page
• Visiting profile before logging in
• Clicking buttons before filling required fields