Capybara with Selenium and remote Chrome - how to attach file for upload?












1














My scenario is the clicking icon on the site opens file browser. Is it possible to attach image to that opened file browser window in spec. My config is Docker, Capybara, Selenium driver. I'm testing on both headless and non-headless browser (Chrome)










share|improve this question



























    1














    My scenario is the clicking icon on the site opens file browser. Is it possible to attach image to that opened file browser window in spec. My config is Docker, Capybara, Selenium driver. I'm testing on both headless and non-headless browser (Chrome)










    share|improve this question

























      1












      1








      1







      My scenario is the clicking icon on the site opens file browser. Is it possible to attach image to that opened file browser window in spec. My config is Docker, Capybara, Selenium driver. I'm testing on both headless and non-headless browser (Chrome)










      share|improve this question













      My scenario is the clicking icon on the site opens file browser. Is it possible to attach image to that opened file browser window in spec. My config is Docker, Capybara, Selenium driver. I'm testing on both headless and non-headless browser (Chrome)







      ruby-on-rails selenium rspec capybara selenium-chromedriver






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 20 at 15:01









      Artur79

      7,53011519




      7,53011519
























          2 Answers
          2






          active

          oldest

          votes


















          1














          The issue with File inputs is the actual <input type="file" ...> element is often hidden and then a button is added to the page to trigger the file selection instead. Capybara doesn't interact with non-visible elements since a user couldn't, and unfortunately once the file selection dialog has been shown (system dialog box) the browser no longer has any control over it so it can't be automated. The workaround for this is to not click the button that opens the file selection, and instead temporarily make the <input type="file" ...> element visible on the page so it can be interacted with. To do that Capybara provides a make_visible option as shown in the docs - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#attach_file-instance_method .



          attach_file('name, id, or label text of field', file_to_attach, make_visible: true)





          share|improve this answer































            0














            Normally, the file inputs are hidden as mentioned by Thomas Walpole. In the code, you can see the attribute "hidden" when you see in developer tools.



            You can try removing hidden attribute by JS script and upload the file.



            Capybara.current_session.execute_script(
            "document.querySelector('element_locator').removeAttribute('hidden')"
            )


            And then attach file



            page.attach_file(
            element_locator,
            Rails.root.join("features", "support", "upload_files", "file_name")
            )


            I placed the file to upload in path features->support->upload_files->file_name



            This should work.






            share|improve this answer





















              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395806%2fcapybara-with-selenium-and-remote-chrome-how-to-attach-file-for-upload%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              1














              The issue with File inputs is the actual <input type="file" ...> element is often hidden and then a button is added to the page to trigger the file selection instead. Capybara doesn't interact with non-visible elements since a user couldn't, and unfortunately once the file selection dialog has been shown (system dialog box) the browser no longer has any control over it so it can't be automated. The workaround for this is to not click the button that opens the file selection, and instead temporarily make the <input type="file" ...> element visible on the page so it can be interacted with. To do that Capybara provides a make_visible option as shown in the docs - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#attach_file-instance_method .



              attach_file('name, id, or label text of field', file_to_attach, make_visible: true)





              share|improve this answer




























                1














                The issue with File inputs is the actual <input type="file" ...> element is often hidden and then a button is added to the page to trigger the file selection instead. Capybara doesn't interact with non-visible elements since a user couldn't, and unfortunately once the file selection dialog has been shown (system dialog box) the browser no longer has any control over it so it can't be automated. The workaround for this is to not click the button that opens the file selection, and instead temporarily make the <input type="file" ...> element visible on the page so it can be interacted with. To do that Capybara provides a make_visible option as shown in the docs - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#attach_file-instance_method .



                attach_file('name, id, or label text of field', file_to_attach, make_visible: true)





                share|improve this answer


























                  1












                  1








                  1






                  The issue with File inputs is the actual <input type="file" ...> element is often hidden and then a button is added to the page to trigger the file selection instead. Capybara doesn't interact with non-visible elements since a user couldn't, and unfortunately once the file selection dialog has been shown (system dialog box) the browser no longer has any control over it so it can't be automated. The workaround for this is to not click the button that opens the file selection, and instead temporarily make the <input type="file" ...> element visible on the page so it can be interacted with. To do that Capybara provides a make_visible option as shown in the docs - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#attach_file-instance_method .



                  attach_file('name, id, or label text of field', file_to_attach, make_visible: true)





                  share|improve this answer














                  The issue with File inputs is the actual <input type="file" ...> element is often hidden and then a button is added to the page to trigger the file selection instead. Capybara doesn't interact with non-visible elements since a user couldn't, and unfortunately once the file selection dialog has been shown (system dialog box) the browser no longer has any control over it so it can't be automated. The workaround for this is to not click the button that opens the file selection, and instead temporarily make the <input type="file" ...> element visible on the page so it can be interacted with. To do that Capybara provides a make_visible option as shown in the docs - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#attach_file-instance_method .



                  attach_file('name, id, or label text of field', file_to_attach, make_visible: true)






                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 26 at 19:21

























                  answered Nov 20 at 16:42









                  Thomas Walpole

                  29.9k32647




                  29.9k32647

























                      0














                      Normally, the file inputs are hidden as mentioned by Thomas Walpole. In the code, you can see the attribute "hidden" when you see in developer tools.



                      You can try removing hidden attribute by JS script and upload the file.



                      Capybara.current_session.execute_script(
                      "document.querySelector('element_locator').removeAttribute('hidden')"
                      )


                      And then attach file



                      page.attach_file(
                      element_locator,
                      Rails.root.join("features", "support", "upload_files", "file_name")
                      )


                      I placed the file to upload in path features->support->upload_files->file_name



                      This should work.






                      share|improve this answer


























                        0














                        Normally, the file inputs are hidden as mentioned by Thomas Walpole. In the code, you can see the attribute "hidden" when you see in developer tools.



                        You can try removing hidden attribute by JS script and upload the file.



                        Capybara.current_session.execute_script(
                        "document.querySelector('element_locator').removeAttribute('hidden')"
                        )


                        And then attach file



                        page.attach_file(
                        element_locator,
                        Rails.root.join("features", "support", "upload_files", "file_name")
                        )


                        I placed the file to upload in path features->support->upload_files->file_name



                        This should work.






                        share|improve this answer
























                          0












                          0








                          0






                          Normally, the file inputs are hidden as mentioned by Thomas Walpole. In the code, you can see the attribute "hidden" when you see in developer tools.



                          You can try removing hidden attribute by JS script and upload the file.



                          Capybara.current_session.execute_script(
                          "document.querySelector('element_locator').removeAttribute('hidden')"
                          )


                          And then attach file



                          page.attach_file(
                          element_locator,
                          Rails.root.join("features", "support", "upload_files", "file_name")
                          )


                          I placed the file to upload in path features->support->upload_files->file_name



                          This should work.






                          share|improve this answer












                          Normally, the file inputs are hidden as mentioned by Thomas Walpole. In the code, you can see the attribute "hidden" when you see in developer tools.



                          You can try removing hidden attribute by JS script and upload the file.



                          Capybara.current_session.execute_script(
                          "document.querySelector('element_locator').removeAttribute('hidden')"
                          )


                          And then attach file



                          page.attach_file(
                          element_locator,
                          Rails.root.join("features", "support", "upload_files", "file_name")
                          )


                          I placed the file to upload in path features->support->upload_files->file_name



                          This should work.







                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Nov 21 at 16:51









                          Kiran Reddy

                          164




                          164






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.





                              Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                              Please pay close attention to the following guidance:


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53395806%2fcapybara-with-selenium-and-remote-chrome-how-to-attach-file-for-upload%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              Costa Masnaga

                              Fotorealismo

                              Sidney Franklin