improve playwright tests

[nichtsam]

Related: #931

Flakiness reasons:

• Some tests check for pending states, but states might resolve before they get verified.
• faker.internet.username() can generate usernames that exceed the length limit defined in SignupFormSchema.
• Some tests interact with components that require JS before it's fully loaded (e.g., Radix Checkbox).

Test Plan

Checklist

• Tests updated
• Docs updated

Screenshots

[kentcdodds]

That looks good to me! Thanks!

[nichtsam]

That looks good to me! Thanks!

Hey! I’ve been working on this partly to showcase the issues, which is why I added the reliableAction logic. I’m not sure if it’s the best solution, but if you think it works well, I can mark it as ready for review.

I don’t think I’ve fixed all the flakiness yet, but I believe these changes have reduced it quite a bit—at least on my device 😅.

[kentcdodds]

I don't really want to go with the reliable action approach. I would like to dig a little deeper.

[nichtsam]

I don't really want to go with the reliable action approach. I would like to dig a little deeper.

I dug a bit deeper and found that one issue was JavaScript not being loaded. Since the page is SSR-ed, the visibility check always passes, and Playwright proceeds with the click. However, the Radix checkbox requires JavaScript to function, so the checked state isn’t updated, resulting in ineffective clicks.

[kentcdodds]

These are good improvements. Thank you a lot!