selectFile

Выбирает файл или файлы в элементе HTML5 input или имитирует перетаскивание файла или файлов в браузер.

Синтаксис

.selectFile(file)
.selectFile(file, options)
.selectFile([file1, file2, ...])
.selectFile([file1, file2, ...], options)

Использование

Правильное использование

cy.get('input[type=file]').selectFile('file.json')
cy.get('input[type=file]').selectFile(['file.json', 'file2.json'])

cy.get('input[type=file]').selectFile({
  contents: Cypress.Buffer.from('file contents'),
  fileName: 'file.txt',
  mimeType: 'text/plain',
  lastModified: Date.now(),
})

cy.get('input[type=file]').selectFile('file.json', { action: 'drag-drop' })
cy.document().selectFile('file.json', { action: 'drag-drop' })

Неправильное использование

// Errors, cannot be chained off 'cy'
cy.selectFile('file.json')

// Will attempt to find a file called 'file contents'
// on disk, probably not what you intended
cy.get('input[type=file]').selectFile('file contents')

Аргументы

file (Строка, Массив, Объект или Cypress.Буфер)

Либо один файл, либо массив файлов. Файл может быть:

• Путь к файлу в корне проекта (каталог, содержащий файл конфигурации Cypress по умолчанию). Например: 'path/to/file.json'
• @alias - псевдоним любого типа, ранее сохранённый с помощью .as(). Например: '@alias'
• Объект TypedArray, содержащий двоичные данные, такие как Uint8Array.from('123'). Cypress.Buffer объекты, такие как те, которые возвращаются cy.readFile('file.json', { encoding: null }) или создаются Cypress.Buffer.from('foo') являются экземплярами TypedArray.
• Объект с непустым свойством contents, определяющим подробности о файле. Например: {contents: '@alias', fileName: 'file.json'}

Если предоставлен объект, он может содержать следующие свойства.

options (Объект)

Передайте объект options, чтобы изменить поведение .selectFile() по умолчанию.

Возвращаемые значения

• .selectFile() возвращает тот же объект, который был предоставлен предыдущей командой.

Действие

В зависимости от установленного в аргументе action .selectFile() может имитировать два разных поведения пользователя:

select (по умолчанию)

По умолчанию .selectFile() работает в режиме «выбор», имитируя выбор одного или нескольких файлов в элементе ввода HTML5. В этом режиме объект должен быть единственным элементом input с атрибутом type="file", или элементом label , связанным с элементом ввода (либо атрибутом for , либо содержащим элемент ввода).

drag-drop

Установка действия в drag-drop изменяет поведение команды на имитацию перетаскивания файлов из операционной системы в браузер и их выгрузку над выбранным объектом. В этом режиме объект может быть любым элементом DOM или всем документом document.

Примеры

Из файла на диске

cy.get('input[type=file]').selectFile('path/to/file.json')
cy.get('input[type=file]').selectFile('path/to/file.png')

Если задан путь, .selectFile() будет искать файл относительно корня проекта и прикреплять его точно так, как он существует на диске. Это предпочтительный способ работы с файлами на диске, избегая многих проблем, связанных с кодировкой.

В скрытом поле ввода

cy.get('input[type=file]').selectFile('file.json', { force: true })

Во многих современных приложениях скрытое поле ввода активируется пользователем при нажатии кнопки. В таких случаях вам необходимо указать Cypress игнорировать проверки на возможность действия и выбрать файл, даже если пользователь не может напрямую активировать поле ввода файла.

Из фикстуры

cy.fixture('file.json', { encoding: null }).as('myFixture')
cy.get('input[type=file]').selectFile('@myFixture')

Обратите внимание на использование кодирования null. По умолчанию cy.fixture() и cy.readFile() пытаются интерпретировать файлы, считанные с диска, что приведет к декодированию файла JSON и его повторной кодировке в строку utf-8 — содержимое будет сохранено, но форматирование не будет, а кодировка может измениться. Дополнительную информацию о кодировании файлов см. в cy.fixture или cy.readFile.

Из ответа API

cy.request('http://localhost:8888/users/827').its('body').as('responseBody')

cy.get('input[type=file]').selectFile('@responseBody')

Обработка данных внутри теста

cy.readFile('users.json')
  .then((users) => {
    users[0].username = 'JohnCena'
  })
  .as('myFile')

cy.get('input[type=file]').selectFile('@myFile')

Выбор нескольких файлов

cy.get('input[type=file]').selectFile([
  'file1.json',
  'file2.json',
  'file3.json',
])

Это может не сработать, если у поля ввода файлов нет свойства multiple.

Настройка fileName, mimeType и lastModified

cy.get('input[type=file][multiple]')
  .selectFile([
    {
      contents: 'cypress/fixtures/example.json',
    },
    {
      contents: 'cypress/fixtures/example.json',
      fileName: 'file.png',
    },
    {
      contents: 'cypress/fixtures/example.json',
      fileName: 'file.png',
      mimeType: 'text/plain',
      lastModified: new Date('Feb 18 1989').valueOf(),
    },
  ])
  .then(($input) => {
    const files = $input[0].files

    // If nothing is specified, the fileName and MIME type will be inferred from the path on disk.:
    expect(files[0].name).to.eq('example.json')
    expect(files[0].type).to.eq('application/json')

    // If the fileName is given, the MIME type will be inferred based on that.
    expect(files[1].name).to.eq('file.png')
    expect(files[1].type).to.eq('image/png')

    // But an explicitly specified MIME type is always used.
    expect(files[2].name).to.eq('file.png')
    expect(files[2].type).to.eq('text/plain')

    // lastModified defaults to the current time, but can be overridden.
    expect(files[0].lastModified).to.be.closeTo(Date.now(), 1000)
    expect(files[1].lastModified).to.be.closeTo(Date.now(), 1000)
    expect(files[2].lastModified).to.eql(new Date('Feb 18 1989').valueOf())
  })

Перетаскивание файла на документ

cy.document().selectFile('file.json', { action: 'drag-drop' })

Примечания

Существование

Утверждение существования файла по умолчанию

При разрешении пути к файлу .selectFile() проверяет, существует ли файл, и выдаст ошибку, если файла нет. Он будет повторять попытку чтения файла, если он не существует изначально, до тех пор, пока файл не появится или команда не выйдет за пределы времени ожидания.

// will fail after the defaultCommandTimeout is reached
cy.get('input[type=file]').selectFile('does-not-exist.yaml')

Действенность

Элемент должен сначала достигнуть действенности

.selectFile() — это команда "действия", которая следует всем правилам действенности.

Правила

Требования

• .selectFile() требует цепочки команд, которые возвращают элемент(ы) DOM. С действием input (по умолчанию) это дополнительно требует единственного элемента input с type="file", или элемента label , привязанного к нему.
• Если задан путь, .selectFile() требует, чтобы файл существовал.
• Если задан псевдоним, .selectFile() требует, чтобы объект псевдонима не был null или undefined.

Утверждения

• .selectFile() автоматически будет ожидать, пока элемент достигнет состояния готовности к действию.

Ограничения по времени

• .selectFile() может выйти за пределы времени ожидания, ожидая, пока элемент достигнет состояния готовности к действию.
• .selectFile() может выйти за пределы времени ожидания, ожидая, пока файл появится на диске или псевдоним разрешится.

Журнал команд

Выбрать файл для ввода

cy.get('.file-input').selectFile(Cypress.Buffer.from('Hello world'))

Вышеуказанные команды отобразятся в журнале команд как:

При нажатии на selectFile в журнале команд консоль выведет следующее:

История

Признание сообщества

Команда .selectFile() черпает вдохновение из ныне устаревшего плагина Cypress File Upload. Она стала возможной благодаря @abramenal и участникам репозитория cypress-file-upload.

См. также

• Руководство: Переменные и псевдонимы
• .fixture()
• .get()
• .readFile()