Acceptance Tests: Use the most specific selector (#661)

Capybara provides a wide range of semantically meaningful [selectors][], and also provides affordances for applications to declare their own through the [Capybara.add_selector][] interface. In the sample Acceptance test, replace the Exercise phase's [within][] call with a call to [within_fieldset][]. The `within` call's `"#sign_up"` argument scopes the subsequent calls to `fill_in` and `click_button` to operate on elements nested inside an element with `[id="sign_up"]`. The `within_fieldset` call's "Sign up"` argument (its "locator") scopes the calls to `fill_in` and `click_button` to operate on elements nested inside a [`<fieldset>` element][fieldset] with a descendant [`<legend>` element][legend] that contains the text "Sign up". Similarly, replace the Verify phase's [have_content][] call with one to [have_button][]. A call to `have_content("Sign out")` will succeed if the phrase `Sign out` exists as visible text anywhere on the page. A call to `have_button("Sign out")` will only match a `<button>` element with `Sign out` as its text or an `<input type="button" value="Sign out">` element. [selectors]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Selector#built-in-selectors [add_selector]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara.add_selector [within]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Session:within [within_fieldset]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Session:within_fieldset [fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset [legend]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend [have_content]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/RSpecMatchers:have_content [have_button]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/RSpecMatchers:have_button
thoughtbot · May 31, 2022 · 70e1faa · 70e1faa
1 parent 7a7faaf
commit 70e1faa
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/testing-rspec/README.md b/testing-rspec/README.md
@@ -45,6 +45,7 @@
 
 [Sample](acceptance_test_spec.rb)
 
+- Use the most specific [selectors][] available.
 - Avoid `it` block descriptions that add no information, such as "successfully."
 - Avoid `it` block descriptions that repeat the top-level `describe` block
   description.
@@ -58,6 +59,8 @@
 
 > system specs were previously called feature specs and lived in `spec/features`
 
+[selectors]: https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Selector
+
 ## Factories
 
 - Order `factories.rb` contents: sequences, traits, factory definitions.

diff --git a/testing-rspec/acceptance_test_spec.rb b/testing-rspec/acceptance_test_spec.rb
@@ -6,12 +6,12 @@
   it "signs up the user with valid details" do
     visit sign_up_path
 
-    within "#sign_up" do
+    within_fieldset "Sign up" do
       fill_in "Email", with: "[email protected]"
       fill_in "Password", with: "Examp1ePa$$"
       click_button "Sign up"
     end
 
-    expect(page).to have_content("Sign out")
+    expect(page).to have_button("Sign out")
   end
 end