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

Question

我正在使用 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"}}

我没有在文档中找到如何使用它（通过人偶操作）。你知道正确的用法吗？

jest-dom v 4.2.4
木偶师 v 4.0.1

Answer 1

您确实需要像这样的 page.waitForSelector to wait for the element to be rendered, but you can assign the element to a variable with 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]

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

Using jest-dom matchers with puppeteer objects

reactjs

jestjs

puppeteer

end-to-end