Capybara attach_file не запускает обработчик React onChange в Firefox - PullRequest
Новая
       14

Capybara attach_file не запускает обработчик React onChange в Firefox

0 голосов
/ 23 мая 2019

Я тестирую функциональность загрузки файлов на странице, созданной с помощью React. Страница React имеет скрытое поле ввода файла, к которому подключен прослушиватель событий onChange. Когда файл выбран, он вызывает onChange, и файл обрабатывается. У меня есть тест, который использует Capybara и javascript для раскрытия скрытого ввода, использую метод attach_file Capybara, чтобы прикрепить файл к вводу и проверить, чтобы файл загружался и отображался в списке файлов пользователя. Этот тест работает в Chrome, и файл обрабатывается после использования метода attach_file от Capybara, но он не работает в Firefox - файл поступает на вход, но никогда не обрабатывается. Я подозреваю, что по какой-то причине React не обнаруживает onChange в Firefox или не запускается. Мне нужен тест для работы в обоих браузерах.

Я попытался использовать execute_script с соответствующим ванильным javascript (без jquery) для создания и отправки событий изменения и ввода в Firefox, но безуспешно. После всего, что я пытаюсь, я получаю только открытое поле ввода и выбранное имя файла. Как SDET, я должен работать с внешним кодом как есть.

Реагировать на ввод для файла 

<input
          className={css.hiddenInput}
          onChange={event => {
            actions.uploadAttachment(event, personOneId, personTwoId);
          }}
          ref={file => (this.file = file)}
          type="file"
        />

код Ruby / Capybara / javascript, открывающий ввод и прикрепляющий файл 

def expose_attachment_input
      page.execute_script(
        'document.querySelector(`input[class^=attachments__hidden-input]`)
        .setAttribute(`style`, `visibility: visible; width: auto; height: auto;`);'
      )
      page.execute_script(
        'document.querySelector(`input[class^=attachments__hidden-input]`)
        .setAttribute(`name`, `attachments`);'
      )
    end

def add_new_attachment(attachment = 'some.gif')
      expose_attachment_input
      attach_file(
        'attachments',
        File.expand_path("./spec/files/#{attachment}")
      )
    end

И несколько примеров того, как я пытался вызвать событие после завершения файла attach_file 

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('change'))")

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('input'))")

page.execute_script("document.getElementsByName('attachments')[0].dispatchEvent(new Event('change'), { bubbles: true })")

В соответствии с предложениями @Thomas Walpole, я также попробовал следующее и получил следующие ошибки 

page.attach_file(File.expand_path("./spec/files/some.gif"), make_visible: true)
Capybara::ExpectationNotMet: The style changes in :make_visible did not make the file input visible

attach_file(File.expand_path("./spec/files/some.gif”), make_visible: {visibility: 'visible', width: 'auto', height: 'auto'})
The hidden input temporarily flashes visible, then disappears and no file attachment is processed.


attach_file(File.expand_path("./spec/files/some.gif")) do
   page.find('span', text: ‘Add Attachments’).click
 end  
Capybara::ElementNotFound: Unable to find visible file field nil with allow_self true

attach_file(File.expand_path("./spec/files/some.gif”), make_visible: true) do
   page.find('span', text: ‘Add Attachments’).click
 end  
Capybara::ExpectationNotMet: The style changes in :make_visible did not make the file input visible

1 Ответ

0 голосов
/ 23 мая 2019

Тот факт, что он работает в Chrome, но не в Firefox, может указывать на ошибку в Capybara, geckodriver или в вашем приложении, поэтому убедитесь, что вы используете текущие версии Capybara и geckodriver. Если это не помогло, попробуйте щелкнуть другой элемент после присоединения файла, чтобы проверить, вызывает ли это события размытия / изменения (разные браузеры могут генерировать событие в разное время).

Помимо этого, текущие версии Capybara предоставляют поддержку для отображения скрытых входных файлов без необходимости прибегать к пользовательскому JS, который может быть более надежным и иметь более согласованное поведение. В вашем случае это будет что-то вроде (локатор не нужен, если на странице вводится только один файл) 

attach_file(File.expand_path("./spec/files/#{attachment}"), make_visible: true)

Если применяемый CSS по умолчанию не делает видимым ввод файла, вы можете указать пользовательский CSS, например 

attach_file(File.expand_path("./spec/files/#{attachment}"), 
            make_visible: {visibility: 'visible', width: 'auto', height: 'auto'})

Более чистым и более удобным для пользователя решением в самых последних версиях Capybara было бы использовать attach_file в блочном режиме, который требует от вас выполнения действий, которые пользователь будет использовать для запуска выбора файлов, а затем пытается определить, какие ввод файла используется, не беспокоясь о видимости. 

attach_file(File.expand_path("./spec/files/#{attachment}")) do
  click_button('Choose files') # whatever action a user does to trigger file selection
end

Примечание: использование execute_script для ручной генерации и отправки событий, как правило, является плохой идеей при тестировании, поскольку оно позволяет делать то, что пользователь никогда не мог, и может скрывать реальные ошибки в вашем приложении.

...