时间戳

首页 > 解决方案 > 将 jest-dom 匹配器与 puppeteer 对象一起使用

reactjs - 将 jest-dom 匹配器与 puppeteer 对象一起使用

问题描述

我正在使用 puppeteer 和 jest 为 React 应用程序编写端到端测试。

我通过 import 扩展了期望匹配器，当我尝试在 puppeteer 的对象上使用其中一个导入的匹配器时@testing-library/jest-dom/extend-expect遇到错误。received value must be an HTMLElement or an SVGElement

let bg = await page.waitForSelector('#bg'); // puppeteer
expect(bg).toBeVisible(); // jest

received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: {"_client": {"_callbacks": [Map], "_connection": [Connection], "_sessionId": "B2257B3009305E280640F675C248F61E", "_targetType": "page", "emitter": [Object], "eventsMap": [Map]}, "_context": {"_client": [CDPSession], "_contextId": 3, "_world": [DOMWorld]}, "_disposed": false, "_frameManager": {"_client": [CDPSession], "_contextIdToContext": [Map], "_frames": [Map], "_isolatedWorlds": [Set], "_mainFrame": [Frame], "_networkManager": [NetworkManager], "_page": [Page], "_timeoutSettings": [TimeoutSettings], "emitter": [Object], "eventsMap": [Map]}, "_page": {"_accessibility": [Accessibility], "_client": [CDPSession], "_closed": false, "_coverage": [Coverage], "_emulationManager": [EmulationManager], "_fileChooserInterceptors": [Set], "_frameManager": [FrameManager], "_javascriptEnabled": true, "_keyboard": [Keyboard], "_mouse": [Mouse], "_pageBindings": [Map], "_screenshotTaskQueue": [ScreenshotTaskQueue], "_target": [Target], "_timeoutSettings": [TimeoutSettings], "_touchscreen": [Touchscreen], "_tracing": [Tracing], "_viewport": [Object], "_workers": [Map], "emitter": [Object], "eventsMap": [Map]}, "_remoteObject": {"className": "HTMLCanvasElement", "description": "canvas#bg", "objectId": "{\"injectedScriptId\":3,\"id\":3}", "subtype": "node", "type": "object"}}

我还没有在文档中找到如何使用它（使用 puppeteer）。你知道正确的用法吗？

jest-dom v 4.2.4
puppeteer v 4.0.1

标签： reactjsjestjspuppeteerend-to-end

解决方案

您确实需要page.waitForSelector等待元素被呈现，但您可以将元素分配给一个变量page.$（它document.querySelector在页面内运行），如下所示：

await page.waitForSelector('#bg'); // puppeteer
const bg = await page.$('#bg');

但正如其他人所建议的那样：它不能与@testing-library/jest-dom/extend-expect.

使用 puppeteer，您可以像这样检查可见性：

test('should check if element is visible', async function() {
    const isVisible = await page.evaluate(() => {
      const el = document.querySelector('my-selector');
      if (!el)
        return false;
      const style = window.getComputedStyle(el);
      return style && style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
    });
    expect(isVisible).toBe(true);
  })

[来源isVisible：Andrey Lushnikov, puppeteer GitHub]

推荐阅读