如何在柏树中获取复制到剪贴板的内容

Question

如何在 cypress 中获取“剪贴板”内容。我的 Web 应用程序中有一个按钮，单击按钮系统将执行“复制到剪贴板”并显示一条消息。以下是复制到剪贴板的 url 内容示例（此 url 内容与网站 url 不同）

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

我仔细检查href了该按钮标签中没有属性。所以我使用了一个名为 clipboardy 的插件，并添加了plugins/index.js文件

 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);
      })
    })

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

Answer 1

如果你不想使用剪贴板包，你也可以使用这个：

cy.window().then((win) => {
    win.navigator.clipboard.readText().then((text) => {
      expect(text).to.eq('your copied text');
    });
  });

在你的情况下，它会变成类似的东西

   cy.get('td').find('div').find('span').find('button').find('i').eq(0).click().then(()=>{
    cy.window().then((win) => {
      win.navigator.clipboard.readText().then((text) => {
        console.log("Helloooo:"+text);
      });
    });
   })

Answer 2

我在 Gleb Bahmutov 的视频Access the Clipboard from Cypress test using Electron browser中找到了这个很好且简单的测试剪贴板内容的解决方案。

cy.window().its('navigator.clipboard')
  .invoke('readText').should('equal', 'copied text')

它使用新的剪贴板 API（Chrome、FF 和 Opera：2018；Safari 和 Edge：2020；IE：否）

在视频中，Gleb 还建议使用旧的（且已弃用的）方法来测试不支持 Clipboard API 的浏览器的情况document.execCommand('copy')。

它期望页面有一个输入字段或文本区域来粘贴内容。我们假设它是textarea#paste-here.

// delete navigator.clipboard to force the app to use execCommand
cy.visit('index.html', {
  onBeforeLoad(window) {
    delete window.navigator.__proto__.clipboard
  }
})
cy.document().then(document => cy.spy(document, 'execCommand').as('exec'))

/* trigger the copy action here... cy.get(...).click() */

cy.get('@exec').should('have.been.calledOnceWith', 'copy')

cy.get('#paste-here').focus()
cy.document().invoke('execCommand', 'paste')

cy.get('#paste-here').should('have.value', 'copied text')

由于剪贴板权限对话框，此测试只能在 Electron 浏览器中自动化（CI）。要使其在 Chrome 中运行，请观看 Gleb 的另一个视频，来自 Cypress Test 的授予 Chrome 浏览器剪贴板权限。否则，您可以使用测试配置对象限制测试仅在 Electron 中运行：

describe('Clipboard', {browser: 'electron'}, () => {
...

Answer 3

访问剪贴板可以解决，但主要问题是 document.execCommand('copy') 不起作用（如上所述），我认为这是您的应用程序以编程方式放置的主要（也是唯一？）方式用户剪贴板的文本。

假设它以某种方式发生（或固定在上游），可以使用剪贴板来检查剪贴板的内容：

npm i -D clipboardy

插件/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 4

迟到了，但如果有人从 @marzzy 的回答中收到“文档未聚焦”错误：

cy.window().then((win) => {
    win.navigator.clipboard.readText().then((text) => {
      expect(text).to.eq('your copied text');
    });
  });

要么是因为：

1. 您正在从 devtools 控制台或代码片段执行代码

2. 或者，如果您使用 Chrome，则必须授予其剪贴板权限，如下所示：

cy.wrap(
    Cypress.automation('remote:debugger:protocol', {
        command: 'Browser.grantPermissions',
        params: {
          permissions: ['clipboardReadWrite', 'clipboardSanitizedWrite'],
          origin: window.location.origin,
        },
    }),
);

来源：https ://www.youtube.com/watch?v=4eEc3x24D64