How to intercept Graphql request?

[ThiagoMFerreira]

Hello,
I need to intercept Grahpql requests to my tests, but this is fetch type, so the Intercept service isn't getting the request, is there any way to intercept this request?

the request is returning the result of this way
data: {values: {totalPages: 10,…}},…} data: {values: {totalPages: 10,…}} values: {totalPages: 10,…}

Thank You.

[ruancarvalho]

Hey @ThiagoMFerreira, did you had any progress with this kind of tests?
I believe I'm having the same issues.

It doesn't catch graphql requests, although they're shown in the network tab.

[ThiagoMFerreira]

Hey @ThiagoMFerreira, did you had any progress with this kind of tests?
I believe I'm having the same issues.

It doesn't catch graphql requests, although they're shown in the network tab.

Hi @ruancarvalho any progress yet 😔

[chmanie]

GraphQL requests are not particularly special. This plugin has been supporting fetch since v3 (https://github.com/chmanie/wdio-intercept-service/blob/master/CHANGELOG.md#---300--13022019).
Have you noticed this:

There's one catch though: you can't intercept HTTP calls that are initiated on page load (like in most SPAs), as it requires some setup work that can only be done after the page is loaded (due to limitations in selenium). That means you can just capture requests that were initiated inside a test.

[andreluisce]

Hey @chmanie Even though my requests happens inside my test, it does not capture the Grapqh requests. Do you have any thoughts about it?

[tehhowch]

@andreluisce are the requests issued from an iframe?

[trietnguyen267]

I had same problem when trying intercepting graphql request which it would return JSON data. it seems interceptor didnt recognised the requests as ajax calls at all

[PeterPimentel]

@trietnguyen267 I had the same problem.
Solved it using the mock function https://webdriver.io/docs/mocksandspies/#spies

You are able to mock the graphql requests and then create a helper function to validate what you want based on the operationName.

const mocks = await browser.mock('**/graphql', { method: 'post' })

console.log(mock.calls[0].postData)