На прошлой неделе я создал пост, показывающий вам, как загрузить файл в WebdriverIO.
Однако я не рассмотрел одну вещь: как загрузить файл, когда элемент ввода сайты.

Давайте рассмотрим пример того, как мы можем решить эту проблему. Я использую online2pdf в качестве нашего тестового сайта для этого примера.

Примечание. Для этого тестового сайта родительский элемент div, содержащий входные данные, был скрыт, поэтому, чтобы сделать его интерактивным, мне пришлось сделать его видимым для WebdriverIO с помощью команды browser.execute (см. код ниже).

const path = require('path');
describe('Upload File Hidden Input', () => {
  it('should be able to upload a file on hidden input', () => {
    // find your selectors
    const inputDiv = $('#div_file_box0');
    const input = $('#input_file0');
    const submitBtn = $('.convert_button');
    // store test file path
    const filePath = path.join(__dirname, '../data/chrome.png');
    // use browser.uploadFile to upload the test file
    const remoteFilePath = browser.uploadFile(filePath);
    // access the test page
    browser.url('https://online2pdf.com/');
    // change display to block from none for the hidden div
    browser.execute(function () {
      document.getElementById('div_file_box0').style.display = 'block';
    });
    // wait for div to be displayed
    inputDiv.waitForDisplayed();
    // set file path value in the input field
    input.setValue(remoteFilePath);
    submitBtn.click(); // click the submit button
    // temporary pause to see if the file got upload successfully
    browser.pause(5000);
    // Add your assertion here
  });
});

💎 Этот код также доступен на GitHub, чтобы вы могли получить доступ и поиграть с ним.

Посмотрите это видео, чтобы увидеть подробное объяснение приведенного выше кода:

Чтобы узнать больше о WebdriverIO, ознакомьтесь с моей серией бесплатных руководств здесь -

https://www.youtube.com/watch?v=e8goAKb6CC0&list=PL6AdzyjjD5HBbt9amjf3wIVMaobb28ZYN.