DEV Community

Cover image for Webship-js: When I attach the file "file name" to "element"
webship.co
webship.co

Posted on

Webship-js: When I attach the file "file name" to "element"

Webship-js: When I attach the file "file name" to "element"

Automated testing isn’t complete without touching the finer details of the digital experience, and file uploads are one of the most crucial. This step reveals whether a site smoothly handles user interactions or stumbles at the first simple challenge. It’s the moment of truth that puts the system under the microscope.

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

This step defines the test for attaching files to the file input element, enabling their upload for use in a subsequent action.

A folder containing a set of test files (e.g., images, documents, etc.) should be placed under the tests/assets directory.
These files must be uploaded in advance with the appropriate file name. During the feature steps, the files are referenced and loaded into the file input element. In the subsequent step, the intended action is performed on the uploaded file.

For the proper configuration of the tests/assets folder path, see the Global Settings page.

Create a step that enables attaching a file to a field identified by its id|class|name|label.

Example:

When I attach the file "profileIcon.jpg" to "#profileIconUpload"
Enter fullscreen mode Exit fullscreen mode

See the full article:https://webship.co/blog/webship-js-when-i-attach-file-file-name-element

Adding this step means leaving no blind spots in the user journey. We upload the file in testing to make sure the user won’t end up uploading their stress later! 😅 Therefore, peace of mind feels much lighter when we know everything works as it should.

Top comments (1)

Collapse
 
onlineproxy profile image
OnlineProxy

Webship-js makes file uploads in headless Selenium tests a breeze by simplifying the whole process. Instead of getting bogged down in technical details, you can use Gherkin steps like "When I attach the file," which makes things feel more intuitive. It can handle multiple uploads, create files on the fly during tests, and it plays nice in CI/CD environments-just make sure your file paths are spot on. While drag-and-drop might throw a curveball, you can still fake it with custom event dispatching. Browser compatibility is solid, especially with Chrome, which tends to be the most reliable. For more complex scenarios, like dealing with iframes, shadow DOMs, or large/corrupted files, Webship-js has your back with some neat workarounds.