https://pact.io logo
Join Slack
Powered by
hi team, is there an example on how to get <pact-m...
# pact-js
k
hi team, is there an example on how to get pact-msw-adapter work with playwright? trying to pass the 
window.msw.worker
(react app started with msw mocks) to the 
setupPactMswAdapter
but getting the following error:
Copy code
TypeError: mswMocker.events.on is not a function

       at ../node_modules/@pactflow/pact-msw-adapter/dist/pactMswAdapter.js:39

      37 |     const activeRequestIds = []; // Pending requests which are still valid
      38 |     const matches = []; // Completed request-response pairs
    > 39 |     mswMocker.events.on("request:match", (req) => {
set up here:
Copy code
const worker: any = await page.evaluate('window.msw.worker');

    const pactMswAdapter = setupPactMswAdapter({
      worker,
      options: {
        consumer: "theConsumer",
        providers: {
          ["someProviderService"]: ["/endpoint"],
        },
        debug: true,
      },
    });
y
No I haven't tested with Playwright, can you create a minimal reproducible example in a repo you can share. I have an example of an adapter created specifically for Playwright https://github.com/pactflow/example-bi-directional-consumer-playwright Using the pattern documented here https://docs.pactflow.io/docs/bi-directional-contract-testing/contracts/pact/#converting-mocks-into-a-pact-compatible-format There is a setup guide here for MSW https://docs.pactflow.io/docs/bi-directional-contract-testing/tools/msw and you can create an example playwright test under this folder https://github.com/pactflow/pact-msw-adapter/tree/main/examples Are you actually loading the msw worker in your web app https://github.com/pactflow/pact-msw-adapter/blob/bdae1c64fb996d1820e8223dbf6e258e77a21991/examples/react/src/index.js#L9-L11
s
m
I’m wondering if it makes sense to create your own adapter here - I don’t know playwright and MSW well enough, but would you use them together?
y
https://pact-foundation.slack.com/archives/C9VBGLUM9/p1666178801707839?thread_ts=1666168422.500859&amp;cid=C9VBGLUM9 You could, as msw can also be injected into webapp. UI test frameworks that have access to network requests can do it natively, similar to the pact cypress adapter, and the demo script and example for playwright, which uses playwrights native methods, rather than injecting msw 👍
As to which approach someone would choose and why, not sure yet, injecting mocks into your webapp, outside of your testing framework could be useful for rapid prototyping if you want to see you application running locally perhaps
t
This probably belongs in #CLS16AVEE
k
@Yousaf Nabi (pactflow.io) sure, I created a small example with playwright here: playwright-example
so this example covers the same use case as the cypress example, having a react app loaded with msw mocks, and using playwright to test against it, somehow passing the window.msw.worker to the adapter doesn’t work
updated the example on the branch, which produces the error stated in this thread, just run 
yarn run example:test:playwright
y
Just to manage your expectations, I am unlikely to look at this anytime soon, but the source code is there so you are welcome to debug and propose a PR if required. Otherwise there is an alternative method for using Pact + Playwright together linked in this thread
k
i understand, thanks for your response and info
Open in Slack
PreviousNext
Powered by