expect(element).toMatchTextContent?

[JoshuaKGoldberg]

Here's what I'm doing now:

const textProperty = await element.getProperty("textContent");
const textValue = await textProperty.jsonValue();
expect(textValue).toEqual("MyText");

I'd be nice to have a concise one-liner:

await expect(element).toMatchTextContent("MyText");

[gregberge]

expect(element).toMatch("MyText") ?

[JoshuaKGoldberg]

Oh hey sorry @neoziro could you please re-open the issue?

That throws an error with string value must be a string.:

FAIL  test\end-to-end\Sample.test.ts (23.415s)
  ● TestName › selecting

    expect(string)[.not].toMatch(expected)

    string value must be a string.
    Received:
      object: {"_client": {"_callbacks": [Map], "_connection": [Connection], "_events": [Object], "_eventsCount": 21, "_lastId": 23, "_maxListeners": undefined, "_sessionId": "3C0BCAE419DF693A81907AB87C8FC1A6:1", "_targetId": "3C0BCAE419DF693A81907AB87C8FC1A6", "domain": null}, "_context": {"_client": [CDPSession], "_contextId": 2, "_frame": [Frame], "_objectHandleFactory": [Function bound createJSHandle]}, "_disposed": false, "_frameManager": {"_client": [CDPSession], "_contextIdToContext": [Map], "_events": [Object], "_eventsCount": 3, "_frames": [Map], "_mainFrame": [Frame], "_maxListeners": undefined, "_page": [Page], "domain": null}, "_page": {"_client": [CDPSession], "_coverage": [Coverage], "_defaultNavigationTimeout": 30000, "_emulationManager": [EmulationManager], "_events": [Object], "_eventsCount": 3, "_frameManager": [FrameManager], "_ignoreHTTPSErrors": false, "_keyboard": [Keyboard], "_maxListeners": undefined, "_mouse": [Mouse], "_networkManager": [NetworkManager], "_pageBindings": [Map], "_screenshotTaskQueue": [TaskQueue], "_target": [Target], "_touchscreen": [Touchscreen], "_tracing": [Tracing], "_viewport": [Object], "domain": null}, "_remoteObject": {"className": "HTMLSpanElement", "description": "span", "objectId": "{\"injectedScriptId\":2,\"id\":3}", "subtype": "node", "type": "object"}}

      81 |                      // Assert
      82 |                      const editableElement = await page.waitForSelector(selectorEditable);
    > 83 |                      await expect(editableElement).toMatch("NOPE");

[gregberge]

Do you use expect-puppeteer? https://github.com/smooth-code/jest-puppeteer/blob/master/packages/expect-puppeteer/README.md#toMatch

[JoshuaKGoldberg]

I do, and other parts of it work correctly.

Perhaps the issue is that it's taking in an element instead of the page? I haven't had time to look too closely...

[gregberge]

It should work element too, maybe the detection is failing, it is actually a bug.

[gregberge]

@JoshuaKGoldberg still relevant?

[JoshuaKGoldberg]

I've switched from Puppeteer to Selenium so I have no idea. I'll just close the issue in the hopes that nobody will report it again. Thanks!

[scragg0x]

So I'm trying to do this with an element handle and it doesn't work as expected.

Example:

const element = await page.$('#element');
expect(element).toMatch("MyText")

I looked at the code and it tries to access .textContent and afiak you need to do something like the OP described to get the textContent:

const textProperty = await element.getProperty("textContent");
const textContent = await textProperty.jsonValue();

https://github.com/smooth-code/jest-puppeteer/blob/master/packages/expect-puppeteer/src/matchers/toMatch.js#L18

[gregberge]

Hello @scragg0x, I think you forgot await in front of expect(element).toMatch("MyText"). In the linked code, we are in a watch function, so it is correct to call textContent directly on the element.