attach_file only works on visible file inputs

[philliplongman]

I've got a test like this. It works fine as long as #file is visible.

defmodule Reader.UserViewsCSVsTest do
  use Reader.FeatureCase, async: true

  import Wallaby.Query, only: [css: 2]

  test "user uploads and views CSV", %{session: session} do
    session
    |> visit("/")
    |> attach_file(css("#file", []), path: "test/fixtures/commas.csv")
  end
end

But I set it to display: none, I get an error—even if I pass visible: false

  1) test user uploads and views CSV (Reader.UserViewsCSVsTest)
     test/features/user_views_CSVs_test.exs:6
     ** (CaseClauseError) no case clause matching: {:error, %HTTPoison.Error{id: nil, reason: :timeout}}
     stacktrace:
       (wallaby) lib/wallaby/element.ex:151: Wallaby.Element.set_value/2
       (wallaby) lib/wallaby/browser.ex:446: Wallaby.Browser.find/3
       test/features/user_views_CSVs_test.exs:12: (test)

[keathley]

Thanks for the writeup @philliplongman.

Its interesting that you're getting an httpoison error for this. I'll try to re-create this on my machine and see if I can figure out whats going on.

[philliplongman]

I have to admit, I don't understand why an HTTP request is involved at all. But I'm still a newer developer, and I assume I just don't understand how a headless driver works.

Here's my repo at it's current commit: https://github.com/philliplongman/csv-reader-elixir/tree/50ca7c634b18522360c1f6df80a74f8938994480

I'm using webpack instead of Brunch—I think that was mentioned in another issue about visibility.

I'm using Vue on the front end. The page actually should be making an HTTP request as soon as the file input changes. But as far as I can tell, the error is happening before that request is made, because it's not hitting the controller.

[keathley]

Thanks for the repo! I'll take a look.

The reason we need to make an http request is due to how we communicate with the browser. We use a technology called WebDriver. WebDriver is a spec that browsers can implement which allows for controlling a browser via a set of http calls. In theory it allows for a single interface to be able to drive multiple types of browser. In practice...well, these are browsers we're talking about so they have a lot of inconsistencies.

[tlrjs]

I ran into this as well. Has anyone figured out how to access a hidden file input with Wallaby?

[keathley]

@tjshipe Does it work if you add visible: false to the selector you're using?

[almirsarajcic]

I've tried it with visible: false and it worked. Thanks.