typescript '元素句柄< Element>|不能将“null”赋给类型为“Element”的参数

nzkunb0c 于 2023-01-21 发布在 TypeScript

关注(0)|答案(1)|浏览(130)

我使用Puppeteer和Jest来测试如果按下/键，#keys是否变为display: flex：

import * as puppeteer from 'puppeteer';
import { log } from 'console';

describe('Puppeteer Test', () => {
    let browser: puppeteer.Browser;
    let page: puppeteer.Page;

    beforeAll(async () => {
        browser = await puppeteer.launch({
            headless: true,
            defaultViewport: null,
        });
        page = await browser.newPage();
        await page.goto('http://localhost:5500/dist/dummy.html');
    });

    test('`#keys` has display: flex after pressing `/`', async () => {
        const keysElement = await page.$('#keys');
        await page.keyboard.press('/');

        expect(window.getComputedStyle(keysElement).display).toBe('flex');
    });

    afterAll(async () => {
        await browser.close();
    });
});

我收到此TypeScript错误：
常量键元素：puppeteer.ElementHandle|零
类型为“ElementHandle”的参数|“null”不能赋给类型〉“Element”的参数。类型“null”不能赋给类型“Element”。ts（2345）
我知道它的意思。getComputedStyle()需要一个Element，但是keysElement是一个ElementHandle<Element> | null。但是我不确定如何将它转换成一个元素。
如果我写window.getComputedStyle(keysElement).display，我会得到另一个错误：
类型“ElementHandle”的转换|将“null”转换为类型“Element”可能是错误的，因为这两种类型彼此之间的重叠程度都不够。如果是有意的，请先将表达式转换为“unknown "。类型”ElementHandle“缺少类型”Element“的以下属性：属性、类列表、类名、客户端高度以及其他164个.ts（2352）
注意：抱歉，我不知道如何分享实时的Jest + Puppeteer + TypeScript代码。

typescript

来源：https://stackoverflow.com/questions/75175836/elementhandleelement-null-is-not-assignable-to-parameter-of-type-element

1条答案

按热度按时间

31moq8wy1#

我不确定window指的是什么，我会尝试使用evaluate块来访问浏览器的window：

test('`#keys` has display: flex after pressing `/`', async () => {
    await page.keyboard.press('/');
    const display = await page.$eval('#keys', el => getComputedStyle(el).display);
    expect(display).toBe('flex');
});

最小的、可运行的示例：

const puppeteer = require("puppeteer"); // ^19.4.1

const html = `
<style>.foo {display: flex;}</style>
<p>x</p>
<script>
document.addEventListener("keydown", e => {
  if (e.code === "NumpadDivide") {
    document.querySelector("p").classList.add("foo");
  }
});
</script>`;

let browser;
(async () => {
  browser = await puppeteer.launch();
  const [page] = await browser.pages();
  await page.setContent(html);
  const displayBefore = await page.$eval("p", el => getComputedStyle(el).display);
  console.log(displayBefore); // => block
  await page.keyboard.press("/");
  const displayAfter = await page.$eval("p", el => getComputedStyle(el).display);
  console.log(displayAfter); // => flex
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

赞(0）回复(0）举报 2023-01-21

我来回答

typescript '元素句柄< Element>|不能将“null”赋给类型为“Element”的参数

1条答案

相关问题

热门标签

最新问答