prix-fixe

Expand History Expand History
Collapse History Collapse History

Render <label> and <textarea>

This commit resolves the previous error:

Error:
UserSharesAMessageTest#test_visiting_the_index:
Capybara::ElementNotFound: Unable to find field "Message"
    test/system/user_shares_a_message_test.rb:9:in `block in <class:UserSharesAMessageTest>'

When invoked on the page object, fill_in, Capybara will locate the corresponding <input type="text"> or <textarea> by resolving the first argument (the locator) by matching its:

  • [name] attribute
  • [id] attribute
  • Capybara.test_id attribute
  • the text of a <label> element with a [for] attribute that references a <textarea> or <input type="text">

When invoked on an element directly, a missing locator will be resolved on self or a descendant.

This commit renders a <label> element with internationalized text, and a <textarea> element that the <label> references.

If we want our page to be accessible, it’s important that every <form> field has a corresponding <label> associated with it.

Modern browsers can infer a lot of helpful behavior for pages that render HTML elements with appropriate semantics, including some behavior that improves the accessibility of the content.

Ensuring that our browser-driven tests interact with the underlying elements based on <label> text improves the odds that the page is accessible.

Accessibility and leveraging semantics-based behavior aside, system tests should interact with the page in the same way that end-users will. Users visiting a page in a web browser won’t be interacting with the page with CSS selectors or HTML attribute, so our tests shouldn’t either.

When run again, the system test raises a new error:

Error:
UserSharesAMessageTest#test_visiting_the_index:
Capybara::ElementNotFound: Unable to find link or button "Share"
    test/system/user_shares_a_message_test.rb:10:in `block in <class:UserSharesAMessageTest>'