Replies: 3 comments 1 reply
-
Sameeee..... |
Beta Was this translation helpful? Give feedback.
-
Hello! As far as I know, server actions in Next.js work differently from API endpoints. While they might use POST requests internally, they aren't exposed as standard HTTP endpoints like route handlers. I think server actions use a Remote Procedure Call (RPC)-like mechanism as you say, which communicates directly with the backend without exposing a traditional request-response cycle over HTTP. Because of this, server actions are designed to bypass public exposure, which is why Playwright can't intercept them, leading to undefined responses or connection closed errors. In contrast, if you wrap your server action logic inside a route.js API handler, you're converting it into a regular HTTP API endpoint, making it interceptable by Playwright. However, doing so defeats the purpose of using server actions, which are intended for internal backend communication only. In summary, Playwright is not equipped to intercept these internal RPC calls like it would with normal HTTP requests. And of course, Vercel's engineers would provide a better answer. Maybe if you ask on the Vercel forum, they could give more detailed guidance... |
Beta Was this translation helpful? Give feedback.
-
I wrote an article that may help you https://dev.to/weamadel/configure-playwright-with-nextjs-mock-apis-for-testing-44oh |
Beta Was this translation helpful? Give feedback.
-
Summary
Hello!
In the last two days, I've tried to write e2e tests for a simple form status (idle, loading, success, error) using playwright.
This form uses a server-action (not linked to a form, but triggered by a button click) that sends mails.
The return value of this server-action is a simple "success" or "error".
I wanted to intercept the server-action's POST request to avoid getting spammed by test mails and manipulate the response to emulate errors, but it seems very finicky to get to work...
I make use of the
useTransition
hook to keep track of the pending state and the server-action is contained in a function called "submitForm", which is called usingstartTransition
on submit button click. (part of the code in the "Additional information").What does work:
Removing the server-action and using a normal
route.js
POST endpoint works as expected with the basic@playwright/test
(using theroute
handler), without even needing to use the experimental proxy.Funnily enough, since I was lazy, this
route.js
endpoint is just a wrapper to the server-action, but this doesn't seem to be a problem (probably because we are already in the server, so it really is just a normal function).I understand that this is functionally the same, but I would like to follow the good pattern of using server-actions whenever I don't need to expose the endpoints to the public, so I'd like to find a solution to this problem, also for the future (if I can't mock server-actions, I would probably move away from them, and I really like the DEV-X they bring).
Things I tried:
This successfully intercepts the POST request and returns the correct values when inspecting the network but the server action returns
undefined
whenconsole.debug
ing the output.Nothing really happens and the calls get through, without being intercepted.
Nothing changes.
My suspicion:
Server actions seem to make use of a RPC architecture.
If I understand correctly, this entails that there is one endpoint which "handles" the different calls and returns values using websockets/streams.
This means that when I intercept the call, the server-action closes said connection, making the server-action throw said "Connection closed" error.
As written previously, this DOES NOT happen with normal
route.js
endpoints and testing proceeds as expected.How could I solve this?
I'm also confused about the use-case of the testmode functionality, as playwright's handler seems to intercept the calls correctly (but maybe just if they are server-actions?).
Tagging people that worked on the experimental testmode:
@ijjk @kevva @samcx @agadzik
Additional information
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions