Question

复制步骤

向我们介绍您的环境：

木偶版本：v1.19.0
平台/操作系统版本：Windows 8.1
URL（如果适用）：
Node.js版本：10.16.0

哪些步骤可以重现该问题？

我有以下文件：

PuppeteerTest/
├── test/main.spec.js
index.html

index.html

<textarea></textarea>

<script>
    const textarea = document.querySelector("textarea");
    textarea.addEventListener("keypress", e => {
        const p = document.createElement("p");
        p.textContent = `KeyCode: ${e.keyCode}, Ctrl Pressed: ${e.ctrlKey}, Shift Pressed: ${e.shiftKey}`
        document.body.appendChild(p);
    });
</script>

test / main.spec.js

const expect = require("chai").expect;
const puppeteer = require("puppeteer");

describe("Control Key Issue", async () => {
    it("Doesn't register control-modified keypresses", async () => {
        const browser = await puppeteer.launch({headless: false, slowMo: 50});
        const page = await browser.newPage();
        await page.goto(__dirname + `/../index.html`);
        const textarea = await page.$("textarea");
        await textarea.focus();
        await page.keyboard.down("Control"); // I've also tried ControlLeft;
        await page.keyboard.press("Enter"); // I've also tried "A" and "B"

        const resultingP = await page.evaluate(() => {
            const p = document.querySelector("p");
            if (p) {
                return p.textContent;
            } else {
                return "No keypress event was emitted, so no <p></p>s were generated"
            }
        });
        expect(resultingP).to.not.equal("KeyCode: 10, Ctrl Pressed: true, Shift Pressed: false");
        expect(resultingP).to.equal("No keypress event was emitted, so no <p></p>s were generated");
        browser.close();
    }).timeout(30000);

// To prove Puppeteer works in other cases, I've made the following tests.

    it("Registers non-control-modified keypresses", async () => {
        const browser = await puppeteer.launch({headless: false, slowMo: 50});
        const page = await browser.newPage();
        await page.goto(__dirname + `/../index.html`);
        const textarea = await page.$("textarea");
        await textarea.focus();
        await page.keyboard.press("Enter");

        const resultingP = await page.evaluate(() => {
            const p = document.querySelector("p");
            if (p) {
                return p.textContent;
            } else {
                return "No keypress event was emitted, so no <p></p>s were generated"
            }
        });
        expect(resultingP).to.equal("KeyCode: 13, Ctrl Pressed: false, Shift Pressed: false");
        expect(resultingP).to.not.equal("No keypress event was emitted, so no <p></p>s were generated");
        browser.close();
    }).timeout(30000);

    it("Registers shift-modified keypresses", async () => {
        const browser = await puppeteer.launch({headless: false, slowMo: 50});
        const page = await browser.newPage();
        await page.goto(__dirname + `/../index.html`);
        const textarea = await page.$("textarea");
        await textarea.focus();
        await page.keyboard.down("Shift"); 
        await page.keyboard.press("Enter"); 

        const resultingP = await page.evaluate(() => {
            const p = document.querySelector("p");
            if (p) {
                return p.textContent;
            } else {
                return "No keypress event was emitted, so no <p></p>s were generated"
            }
        });
        expect(resultingP).to.equal("KeyCode: 13, Ctrl Pressed: false, Shift Pressed: true");
        expect(resultingP).to.not.equal("No keypress event was emitted, so no <p></p>s were generated");
        browser.close();
    }).timeout(30000);
});

预期结果是什么？ 手动完成后，Control + Enter会创建一个keypress事件，因此我希望它使用e.keyCode === 10（或13，但在现实世界中，Ctrl + Enter会生成10的键码）来调度keypress事件。我期望e.ctrlKey === true。

会发生什么？ 没有。按下Control键并按下另一个键时，不会发生任何事件。我是在做错什么，还是一个错误？

Answer 1

问题

这看起来像是操纵up的错误。但是请记住，keypress事件不会在 Ctrl 按键上监听。引用MDN docs：

按下产生字符值的键时会触发 keypress 事件。产生字符值的键的示例是字母，数字和标点键。不会产生字符值的键示例包括修饰键，例如 Alt ， Shift ， Ctrl 或 Meta 。

但是它至少应在按 Enter 时触发。

解决方案

对我有用的是在HTML文档中监听keydown事件。更改将是以下行：

textarea.addEventListener("keydown", e => {
    // ...
});

请尝试使用代码中的第一个测试（“不注册控件修改的按键”）进行尝试。我将expect(...)行修改为console.log(resultingP)以打印结果，并在控制台中返回了以下内容：

KeyCode: 17, Ctrl Pressed: true, Shift Pressed: false

页面本身显示以下两行：

KeyCode: 17, Ctrl Pressed: true, Shift Pressed: false
KeyCode: 13, Ctrl Pressed: true, Shift Pressed: false

如何使用page.keyboard.down（“ Control”）获取page.keyboard.press（“ [任何键]”）来调度按键事件

复制步骤

1 个答案: