When I attach the file "file name" to "element"

This step attaches a local file to an <input type="file"> element on the page. The first argument is the file name - a file that must exist inside the tests/assets/ folder of your project (configurable via this.assetsFolder). The second argument is a CSS selector that must resolve to the file input element. The step uses Playwright's setInputFiles method, which works reliably even when the input is hidden or visually replaced by a styled button, because Playwright interacts with the underlying input directly rather than simulating a file chooser dialog.

The file path is resolved at runtime using path.resolve against this.assetsFolder, so only the file name is needed - not a full path. The selector may be any valid CSS selector: an id like #avatar-upload, an attribute selector like input[name=photo], or a data attribute like [data-testid=csv-upload]. After attaching the file, a separate press or click step is normally required to trigger the actual upload. If the file name does not exist in the assets folder, Playwright will throw an error before interacting with the page.

Accepted phrasings

When I attach the file "photo.jpg" to "#avatar-upload"
When we attach file "resume.pdf" to "#resume"
And I attach the file "logo.svg" to "input[name=logo]"
When I attach file "report-2026-q1.csv" to "[data-testid=csv-upload]"

Examples

When I attach the file "profile-icon.jpg" to "#profile-icon-upload"
When we attach file "resume.pdf" to "#resume"
And I attach the file "logo.svg" to "input[name=logo]"
When I attach file "report-2026-q1.csv" to "[data-testid=csv-upload]"

In a real scenario

Scenario: Upload an image file and save the media entry
  Given I am on "/media/add/image"
    And wait
  Then I should see "Allowed types: png gif jpg jpeg webp."
  When I attach the file "flag-earth.jpg" to "edit-field-media-image-0-upload"
    And wait
    And I press the "Save" button
    And wait
  Then I should see "Alternative text"
  When I fill in "Flag Earth in space" for "field_media_image[0][alt]"
    And I press the "Save" button
    And wait
  Then I should see "Flag Earth"

Related steps

Back to Action Steps