Cannot submit form when testing with playwright

App Building
1

Hi, I run into this issue:

  • Goal: I want to test my app using playwright

  • Steps: Given a simple form with a standard submit button that triggers a query on submit. Inside a playwright test, if i do something like

await page.getByRole('button', { name: 'Submit' }).click();

Despite the button is found by playwright, the submit event never occurs

  • Details: If i change the interaction type inside the button from submit to default and add the query trigger as an event listener, it works. But all the form validation logic is gone as well, and has to be rewritten with a run script handler

I created a little repo (https://github.com/lastraperas/retool-examples) with the setup code for running the playwright test and 2 versions of a really simple app. The only thing that's different between them is the button interaction type and that one fails the test and the other passes.

Hopes this help to understand what's going on, and if is there any other workaround possible that can be testable and doesn't involve losing the build validation logic.

Thanks
Mariano

2 Likes
2

Hello @mariano!

Super impressed with the github repo and all the work you have done!

We are currently work on a major push to add built in testing functionality for an upcoming major patch which will solve this problem and add in a ton of helpful features for writing, testing and debugging Retool apps.

Stay tuned!

3

Hi @Jack_T ,
Thanks for your reply. I run into this guide, and assumed playwright was supported.

Looking forward for the new features

5

@mariano Ah yes my apologies, as cited in the doc you linked we do currently support playwright.

To be frank I am not sure why the submit event is not occurring if you specified so in playwright.

I can ask our engineering team and check if this is a known bug and if anyone on our teams know if a workaround that doesn't involving losing the build validation logic.

Will keep you updated on our further releases as we look to streamline the testing automation process.

6

Heya y'all!

After our engineering team was able to investigate this a bit, they found that the easiest thing to do is to update the playwright tests to focus the button and then press the enter keystroke instead of clicking.

So from:
await button.click();

to:
await button.focus(); await page.keyboard.press("Enter");

Give this a try and let me know if you have any additional questions!

1 Like