El siguiente código funciona cuando el titiritero se ejecuta con { headless: false } pero falla cuando es verdadero. El error es DataError: No valid data on clipboard. .
¿Por qué está pasando esto? ¿Hay alguna forma de evitarlo?
import * as puppeteer from "puppeteer"; const browser = puppeteer.launch({ headless: true }); const page = browser.then((browser) => browser.newPage()); const blank = page.then((page) => page.goto("https://example.com")); const context = browser.then((browser) => browser.defaultBrowserContext()); context.then((context) => context.overridePermissions("https://example.com", ["clipboard-read"]) ); async function getClipboardData() { await blank; const p = await page; await p.bringToFront(); await p.click("body"); return p.evaluate(function () { return new Promise((res, rej) => { navigator.clipboard .read() .then(async (clipboards) => { res(null); }) .catch((error) => rej(error.toString())); }); }); } getClipboardData() .then(() => console.log("It works!")) .catch((e) => console.log(e)); // Outputs DataErrorLa misma situación ocurre cuando se intenta activar CTRL+V desde headless:
import * as puppeteer from "puppeteer"; const browser = puppeteer.launch({ headless: true }); const page = browser.then((browser) => browser.newPage()); const blank = page.then((page) => page.goto("https://example.com")); const context = browser.then((browser) => browser.defaultBrowserContext()); async function getClipboardData() { await blank; const p = await page; await p.bringToFront(); await p.click("body"); let result = p.evaluate(function () { return new Promise((res, rej) => { document.querySelector("body").addEventListener("paste", (event) => { res(event.clipboardData.types); }); }); }); await p.keyboard.down("Control"); await p.keyboard.press("V"); await p.keyboard.up("Control"); return result; } getClipboardData() .then((x) => console.log(x)) // Outputs [] .catch((e) => console.log(e));