This step is the reverse-syntax, attribute-based variant of the fill step: the value you want to type comes first, followed by the field selector. This ordering can read more naturally in some contexts - for example, "fill in John Smith for #uname by attr" - and produces exactly the same result as the standard order. The selector is resolved the same way as in the standard attribute variant: a leading # or . is treated as a CSS selector, a bare string is matched across common attributes, and you may pin to a specific attribute with by its "ATTR" attribute.
The field is cleared before the value is typed. Both I and we are accepted. Use this variant when value-first phrasing makes your scenario more readable.
Accepted phrasings
When I fill in "VALUE" for "SELECTOR" by attr
When I fill in "VALUE" for "SELECTOR" by attribute
When we fill in "VALUE" for "SELECTOR" by attr
And I fill in "VALUE" for "SELECTOR" by its "ATTR" attribute
And I fill in "VALUE" for "SELECTOR" by "ATTR" attr
Examples
When I fill in "John Smith" for "#uname" by attr
When I fill in "John Smith" for "uname" by attr
And I fill in "s3cret" for "password" by "class" attr
And I fill in "John Smith" for "Your full name" by its "placeholder" attribute
In a real scenario
Scenario: Content editor fills page description using reverse attribute syntax
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 Blog Post Title" for "Title"
And I fill in "Summary of the blog post." for "#edit-field-description-0-value" by attr
And I press the "Save" button
And wait
Then I should see "Test Blog Post Title"