Как получить скопированное содержимое в буфер обмена в Cypress

Question

Как получить содержимое "буфера обмена" в кипарисе. У меня есть кнопка в моем веб-приложении, при нажатии на кнопку система выполнит «копирование в буфер обмена», и появится сообщение. Ниже приведен пример содержимого URL, которое копируется в буфер обмена ( содержание этого URL отличается от URL веб-сайта )

https://someurl.net/machines/0c459829-a5b1-4d4b-b3c3-18b03c1c969a/attachments/a30ceca7-198e-4d87-a550-04c97fbb9231/download

Я дважды проверял, что в этом теге кнопки нет атрибута href. Итак, я использую плагин под названием clipboardy, и я добавил plugins/index.js file

 const clipboardy = require('clipboardy');
    module.exports = ( on ) => {
        on('task', {
            getClipboard () {
                return clipboardy.readSync();
            }
        });
    };

В моем тесте я использовал cy.task () для получения содержимого буфера обмена, но это не печатает фактический URL содержание

cy.get('td').find('div').find('span').find('button').find('i').eq(0).click().then(()=>{
          cy.task('getClipboard').then((data)=>{
          console.log("Helloooo:"+data);
      })
    })

<td class="sc-hgRTRy duUdhJ">
<div>
<span class="sc-bYwvMP jTmLTC">
<span class="sc-jzJRlG iVpVVy">
<span role="button" aria-expanded="true" aria-haspopup="true" aria-owns="5aa03785-1370-455e-a838-4154f7481a7b">
<button class="sc-feJyhm cJOKrG">
<i class="icon fas fa-link sc-htpNat cQABgO" aria-hidden="true" data-component-type="icon">
</i>
</button>
</span>
</span>
</span>
</div>
</td>

Answer 1

Доступ к буферу обмена можно обойти, но основная проблема заключается в том, что document.execCommand ('copy') не работает (как указано выше), что, как я считаю, является основным (и единственным?) Способом для вашего приложения. для программного помещения текста в буфер обмена пользователя.

Предполагая, что это происходит каким-то образом (или фиксируется в восходящем потоке), проверка содержимого буфера обмена может быть выполнена, например, с помощью clipboardy:

npm i - D clipboardy

plugins / index. js:

const clipboardy = require('clipboardy');
module.exports = ( on ) => {
    on('task', {
        getClipboard () {
            return clipboardy.readSync();
        }
    });
};

В вашей спецификации:

describe('test', () => {
    it('test', () => {
        cy.document().then( doc => {
            doc.body.innerHTML = '<input id="inp">';
        });
        cy.get('#inp').type('test{selectall}');
        cy.document().then( doc => {
            doc.execCommand('copy');
        });
        cy.task('getClipboard').should('contain', 'test');
    });
});

Надеюсь, этот код будет вам полезен. Спасибо.

Answer 2

Чтение этого действительно помогло мне решить мою проблему, мне пришлось использовать смесь из OP и первого комментария. Вот что сработало для меня:

     cy.get(':nth-child(2) > .mat-card > .row > .col-sm-3 > .mat-focus-indicator').click().then(() => {
        cy.task('getClipboard').then(($clip) => {
             const url = $clip;
             cy.log('this is what was in clipboard', url);
             cy.visit(url);
         });
     });

Это дало мне URL-адрес, который я хотел, с помощью кнопки, которую я нажал. Затем я просто передал это прямо в cy.visit, чтобы посетить только что скопированный URL-адрес. Сработало отлично.

Answer 3

Мне удалось получить скопированную ссылку, распечатав полученное значение после нажатия кнопки, а затем выполнив поиск объекта в консоли, чтобы найти ссылку. Я нашел ссылку в [object]._vClipboard.clipboardAction.text, как вы можете видеть ниже:

cy.get('[data-test=copy-link-button]').click().then(($clipboard) => {
   const copiedLink = $clipboard[0]._vClipboard.clipboardAction.text;
   cy.visit(copiedLink);
});

Надеюсь, это поможет.