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

【问题标题】：Using jest-dom matchers with puppeteer objects将 jest-dom 匹配器与 puppeteer 对象一起使用
【发布时间】：2020-10-19 00:35:33
【问题描述】：

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

我通过导入 @testing-library/jest-dom/extend-expect 扩展了期望匹配器，当我尝试在 puppeteer 的对象上使用其中一个导入的匹配器时遇到错误 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

【问题讨论】：

waitForSelector 是否应该返回最终匹配的元素？似乎没有一个示例使用返回值。
它们是正交的。 jest-dom 依赖 Node JSDOM，对 Puppeteer 没用。 Puppeteer 使用底层真实 DOM。

标签： reactjs jestjs puppeteer end-to-end

【解决方案1】：

您确实需要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);
  })

[source of isVisible: Andrey Lushnikov, puppeteer GitHub]

【讨论】：