Extending jest-playwright

[danifornells]

Working in a jest-playwright ecosystem, seems that extending playwright is not working as expected, and queries needs to be imported separately.

So for a better understanding, the code and exception:

require('playwright-testing-library/extend')
const $document = await page.getDocument()

TypeError: page.getDocument is not a function
    >  2 | const $document = await page.getDocument()

My question here is if this integration should be expected to work or not, or if there is any special need for passing the jest-playwright globals to playwright-testing-library somehow.

Thanks 😉

PD: By jest-playwright ecosystem I mean:

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "expect-playwright": "^0.2.5",
    "jest": "^26.4.2",
    "jest-playwright-preset": "1.4.0-rc1",
    "playwright": "^1.4.2",
    "playwright-testing-library": "^2.7.0"
  }

[jrolfs]

tldr; skip to the bottom for a workaround

Sigh, yes I'm aware of this issue and perhaps I should add it as a known issue to the readme for the time being. The main issue is with the type definitions. Playwright publishes a package called playwright-core that's the "no browser" version of playwright. They used to house the types in said package, and therefore the type augmentation that's done to support the testing library API that playwright-testing-library used to augment 'playwright-core/types/types', however the implementation changed in Playwright 1.1 (see https://github.com/hoverinc/playwright-testing-library/pull/48/files#diff-3479e3e08e7576446aedc4529b270e6cL35).

As far as I can tell, is now supposed to be internal to Playwright (microsoft/playwright#3099 (comment)). I've been meaning to open an issue on https://github.com/playwright-community/jest-playwright to suggest that switch from playwright-core to playwright as a dependency (or peerDependency) but I haven't gotten around to it. Now that I've typed all of this out, maybe I'll just reference this comment!

---

Workaround

In the meantime, I've been publishing a version of https://github.com/playwright-community/jest-playwright that depends on playwright (and is therefore compatible with playwright-testing-library/extend) here: @hover/jest-playwright-preset¹

jest.config.js

module.exports = {
  preset: '@hover/jest-playwright-preset'
}

¹Note: the current version of this that's published is essentially jest-playwright-preset@1.3.1 with one type related patch backported from 1.4.0-rc.1. When I attempted to update the forked package to 1.4.0-rc.1 I ran into a problem where playwright-testing-library/extend breaks specifically in Jest's threaded mode (without --runInBand). It's quite difficult to debug but I'll have my eye on this.

[jrolfs]

Ah, if you're not using TypeScript then the above issue regarding playwright-core is irrelevant. It looks like you're actually running into this issue:

¹Note: the current version of this that's published is essentially jest-playwright-preset@1.3.1 with one type related patch backported from 1.4.0-rc.1. When I attempted to update the forked package to 1.4.0-rc.1 I ran into a problem where playwright-testing-library/extend breaks specifically in Jest's threaded mode (without --runInBand). It's quite difficult to debug but I'll have my eye on this.

If that's the case, then you should be able to get around that with --runInBand or by pinning jest-playwright-preset to 1.3.1.

[danifornells]

Thank you very much, really appreciated. Will follow your recommendations and keep an eye on progress. I'll be posting here a stable solution when it's done.

[matchai]

Following jrolfs' advice above, I was personally unable to get both jest-playwright and playwright-testing-library to work together. Both, experimenting with @hover namespaced fork and the original.

From what I can tell, global.page, established by jest-playwright, no longer shares the prototype being altered by playwright-testing-library/extend.

FWIW, I was able to get the basic getDocument functionality to work by directly setting it on the global.page prototype manually:

require("playwright-testing-library/extend");
const { getDocument } = require("playwright-testing-library");

test("Example test", async () => {
  page.__proto__.getDocument = getDocument;
  const $document = await page.getDocument();
});

Would it be possible to have an example project made showing the two working in tandem?

[jrolfs]

@matchai I'll definitely try to get an example up. I really want to get things working with the upstream jest-playwright and it's going to take some investigation because I think the most recent release is when this started happening:

From what I can tell, global.page, established by jest-playwright, no longer shares the prototype being altered by playwright-testing-library/extend.

I'll let you know as soon as I have something!

[jgoux]

I'm very interested in seeing a working example as well, even with a workaround. The testing-library API is too cool to be ignored in the context of playwright and jest! 😄

[jrolfs]

I've decided that the prototype extension approach was more trouble than it's worth given @playwright/test is the recommended test runner.

We released support for @playwright/test in 4.0.1, and I would recommend migrating over if at all possible. If not, we're still supporting standalone Playwright, just not via the prototype.

If, however, the /extend functionality is still very important to you, re-open this issue and let me know. I may consider reintroducing that API, but I'm personally migrating over to @playwright/test in projects that use Playwright + this library.