Clipboard API

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

Основные возможности Clipboard API

  1. Чтение данных из буфера обмена Для получения данных из буфера обмена используется метод navigator.clipboard.readText(). Он возвращает Promise с текстом, который можно использовать для дальнейших проверок:

    cy.window().then((win) => {
    win.navigator.clipboard.readText().then((text) => {
        expect(text).to.equal('Текст для проверки');
    });
});

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

  2. Запись данных в буфер обмена Метод navigator.clipboard.writeText(text) позволяет программно поместить текст в буфер обмена:

    cy.window().then((win) => {
    win.navigator.clipboard.writeText('Скопированный текст');
});

    После выполнения операции можно проверить корректность вставки с помощью команды cy.get().invoke('val') или аналогичных.

Интеграция Clipboard API с Cypress

Cypress не предоставляет встроенных команд для работы с буфером обмена, поэтому взаимодействие происходит через cy.window() и вызовы методов navigator.clipboard. Для упрощения тестов часто создаются кастомные команды:

Cypress.Commands.add('copyToClipboard', (text) => {
    cy.window().then((win) => {
        return win.navigator.clipboard.writeText(text);
    });
});

Cypress.Commands.add('readFromClipboard', () => {
    return cy.window().then((win) => {
        return win.navigator.clipboard.readText();
    });
});

Использование кастомных команд делает тесты более читаемыми и удобными:

cy.copyToClipboard('Тестовый текст');
cy.readFromClipboard().then((text) => {
    expect(text).to.equal('Тестовый текст');
});

Проверка копирования через пользовательские действия

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

  1. Копирование через комбинацию клавиш

    cy.get('#inputField').type('Тестовый текст{selectall}{ctrl}c');
cy.readFromClipboard().then((text) => {
    expect(text).to.equal('Тестовый текст');
});

    Особенности:

    • {ctrl}c имитирует Ctrl+C (на Mac — {cmd}c);
    • {selectall} выделяет весь текст в поле.

  2. Копирование через кнопки

    Часто на сайтах есть кнопки “Скопировать”. Cypress позволяет кликнуть на такую кнопку и проверить буфер обмена:

    cy.get('#copyButton').click();
cy.readFromClipboard().should('eq', 'Данные для копирования');

    Это особенно важно для тестирования функционала генерации ссылок, кодов или сообщений.

Обработка ошибок Clipboard API

  • Отказ в доступе При попытке прочитать или записать буфер обмена без взаимодействия пользователя методы могут выбросить ошибку. Рекомендуется оборачивать вызовы в блоки then или использовать catch:

    cy.window().then((win) => {
    return win.navigator.clipboard.readText().catch(() => '');
}).then((text) => {
    expect(text).to.not.be.empty;
});

  • Поддержка браузеров Clipboard API поддерживается в современных версиях Chrome, Edge, Firefox и Safari. В тестах Cypress следует учитывать потенциальные ограничения в старых версиях браузеров или при запуске в headless режиме.

Лучшие практики тестирования Clipboard

  1. Использовать кастомные команды для повторяющихся действий — повышает читаемость тестов и снижает дублирование кода.
  2. Эмулировать пользовательские действия — клики и комбинации клавиш обеспечивают более реалистичное тестирование.
  3. Проверять ошибки и исключения — это помогает выявлять ситуации, когда буфер обмена недоступен.
  4. Изолировать тесты — каждый тест должен начинать с чистого состояния буфера обмена, чтобы избежать зависимости от предыдущих операций.

Примеры комплексного теста

describe('Clipboard API тестирование', () => {
    it('копирование через кнопку', () => {
        cy.visit('/clipboard-demo');
        cy.get('#copyButton').click();
        cy.readFromClipboard().should('eq', 'Текст для копирования');
    });

    it('вставка из буфера', () => {
        cy.copyToClipboard('Вставляемый текст');
        cy.get('#inputField').focus().then(() => {
            cy.window().then((win) => {
                win.navigator.clipboard.readText().then((text) => {
                    cy.get('#inputField').type(text);
                    cy.get('#inputField').should('have.value', 'Вставляемый текст');
                });
            });
        });
    });
});

Такой подход позволяет полностью покрыть сценарии копирования и вставки, включая взаимодействие с интерфейсом и проверку состояния данных.

Оглавление