This step fills an input field located by one of its HTML attributes rather than its visible label. When you append by attr or by attribute to the phrasing, the selector is built from the attribute value you provide. If the value starts with # or . it is used as a CSS selector directly. Without a prefix and without an explicit attribute name, the value is matched against id, class, name, data-testid, data-test-id, data-test, data-cy, aria-label, value, placeholder, and title in that order.
To pin the lookup to a specific attribute, add by its "ATTR" attribute or by "ATTR" attr. For example, by its "placeholder" attribute restricts matching to the placeholder attribute only. The field is cleared before the new value is typed. Both I and we are accepted.
Accepted phrasings
When I fill in "SELECTOR" with "VALUE" by attr
When I fill in "SELECTOR" with "VALUE" by attribute
When we fill in "SELECTOR" with "VALUE" by attr
And I fill in "SELECTOR" with "VALUE" by its "ATTR" attribute
And I fill in "SELECTOR" with "VALUE" by "ATTR" attr
Examples
When I fill in "#uname" with "John Smith" by attr
When I fill in "uname" with "John Smith" by attr
And I fill in "pwordcss" with "s3cret" by "class" attr
And I fill in "Your full name" with "John Smith" by its "placeholder" attribute
In a real scenario
Scenario: Content editor fills in a page description by attribute
Given I am a logged in user with the "Content editor" user
And I go to "/node/add/page"
And wait
When I fill in "Test Page Title" for "Title"
And I fill in "Test description for the new page." for "#edit-field-description-0-value" by attr
And I press the "Save" button
And wait
Then I should see "Test Page Title"