Additional Playwright Documentation For Async API Calls

[zcabkle]

Is your feature request related to a problem? Please describe.

I'm doing a project in react.js and needed to write some tests

I was trying to test some React components. When trying to use Playwright testing for the first time, I found it difficult to implement and debug tests on a component that has an async get request in the useEffect method.

I tried mocking the APIs, however, I found that using 'await' only waited for the component to render and not for the API call to finish, and I couldn't find enough documentation to get me unstuck.

This is the documentation that I used: https://playwright.dev/docs/mock https://playwright.dev/docs/mock-browser-apis

This was my first time using Playwright I am not sure if I was trying to use Playwright incorrectly.

Describe the solution you'd like

Some documentation on how to use Playwright on component that have async functions. Maybe some extra general documentation about async components may even help.

Describe alternatives you've considered

I ended up using the React Testing Library.

This is the React Testing Library code that I was trying to implement in Playwright. I was trying to wait for the page to render AND wait for the async API call to finish before running the except lines. I just found it quite difficult to find resources to help me out with this completing this task in Playwright.

---

🎓 Add a tag to this issue for your current education role: student

💻 Add a tag to this issue for tech topic: Developer Tools

---

I am a student. This post is being raised as UCL feedback. I am working with Olanrewaju Oyinbooke and Lee Stott

[github-actions[bot]]

Thank you for submitting this issue! The team will review your issue, tag with the appropriate tags, and comment with any additional questions on information needed. :sparkles:

[aslushnikov]

This is the React Testing Library code that I was trying to implement in Playwright. I was trying to wait for the page to render AND wait for the async API call to finish before running the except lines. I just found it quite difficult to find resources to help me out with this completing this task in Playwright.

@zcabkle Playwright component testing is experimental and thus doesn't have much documentation yet. We're aware of the issue, and we'll add in documentation once the component testing will be promoted to stable.