How to wait for a specific API response in your Playwright end-to-end tests

Learn in this video how to monitor network HTTP calls in your end-to-end tests and use Playwright's "waitForResponse" method to capture specific network responses. This approach allows you to wait for specific API calls to validate if you website or app shows the correct data.
Playwright docs: playwright.dev/docs/api/class...
Checkly Playwright monitoring: www.checklyhq.com/product/syn...
#playwright

[@LenaChe977]

Great content🙌 Thanks a lot.

[@ChecklyHQ]

Happy it's been valuable! 💙

[@sheiksadakkathulla7364]

i am using it more than a year ...which is very useful on dynamically generating test data...

[@ChecklyHQ]

Great 👍 Yeah, that's a nice use case!

[@kkrkkr5093]

this video actually came in clutch

[@ChecklyHQ]

Happy this video has been helpful!

[@EricWilliamsonTech]

Great content! Thanks!

[@ChecklyHQ]

Glad you liked it!

[@pineapplesoda]

This is so useful, thank you! I would love to see a video on checking payment transactions.

[@ChecklyHQ]

Happy the videos are useful. Could you explain a bit more detailed what process / transaction you'd like to see?

[@abcdrk]

Pretty helpful content, thanks!

[@ChecklyHQ]

Happy it's been valuable. :)

[@leonidvr6455]

I did similar approach in my UI tests

[@pabloortiz6031]

Thanks

[@ChecklyHQ]

Happy it's been valuable. :)

[@hito6464]

Hi, thank you for the great lesson. I wonder If you could make a video on how to write a test for Adobe Analytics and Google Analytics (dataLayer) requests, which fire on page load and clicks. How to verify the values in the payload of such requests.

[@ChecklyHQ]

Great suggestion! I'll put it on the list!

[@feralgoose7157]

Thanks for this, I have been using network checks to reduce the waits for elements on the page. In my scenario, I wait for a response from the Api that populates the screen and then start interacting with the page. If I don't have this check the test is flaky that Playwright tries to interact with elements that are still getting populated. This seems to work, but it seems navigation from one page to the next is a bit broken, since the page I navigate from needs to know about network traffic to instantiate the page we are going to. I am wondering if there is a better pattern.

[@ChecklyHQ]

It's hard to give advice without knowing the specifics. But generally it's always better to wait for a certain UI state and network waiting should be the last resort. Maybe there's certain data that shows up eventually? When you think of it, users also don't wait for a network request. They just click around, try to be user-first always. :) I hope this helps. 🦝

[@ShaneMc74]

Great video! What would happen in a scenario where the api doesn’t get called or it returns an error (ie. Never resolves with success) will it just hit the test timeout?

[@ChecklyHQ]

Great question! Your assumption is correct and the error handling depends on your project configuration. `waitForResponse()` has a timeout setting to limit the waiting for a particular API response. If this setting isn't set, the general test timeout will be hit eventually. :) It's up to you and the project requirements to find what works best.

[@ShaneMc74]

@@ChecklyHQ Thanks for confirming. Keep up the great videos

[@GavrOleg]

Have you ever encounter this issue: when implementing tests and running locally - everything is ok with "waitForResponse" and test is passing, but when it's being executed in CI (in our case in GitLab) - it throws a timeout exception on this waiting? What could be a reason of that?

[@ChecklyHQ]

Great question. I've never encountered a PWT issue and it's almost always an environment difference. The only way to find out is debug the network and application state via trace files. :) Hope this helps. :)

[@_firearmy]

This is so useful, thank you! I have small doubt. How do I track the API response which is already invoked. Is it possible?

[@ChecklyHQ]

In this situation, the described approach wouldn't work well. But can you describe the scenario you're trying to test? Because I can't think of a case when it would be impossible to attach the network event handler. 🤔

[@_firearmy]

@@ChecklyHQ Thank you for your attention. I require certain metadata from the app that will be captured with every full page load. I need this information to develop test cases. While I can obtain this metadata by either moving a global variable or invoking the metadata API, my objective is to accomplish this without directly modifying the app's code.

[@AvinashKumar-rk5fz]

Hey I have a scenario where I need to click on next button and there is navigation happens which sometimes takes more than 15s and I need to do some assertions but these navigations provides a lot of intermittent issues. Is the issue because of API calls. Please guide me on this

[@ChecklyHQ]

Ideally would check if you could work around these without listening for the network (users wouldn't watch and check the network either). So if you're having a long lasting navigation you could increase the timeout for the assertions / actions on the slow page. :) The overall recommandation is to only listen to the network when you really have to. Hope this helps.