Introduce test automation with Playwright

[incorbador]

Why

As we are completing our initial version of react-sdk and react we want to add automated testing for the react package. We want to do that now because it tells us, if our code so far is testable. Additionally we then know if we break some of the existing capabilities of react-sdk and react when we change things in the frontend or in the backend.

TODO

• [x] make a small concept what we need to mock for these tests
• [x] evaluate what we need to build to support these tests (do we need a separate test example application or can we use/adapt our current react-example)
• [x] add tests for signUp flow (we build tests for login, translations and UI customizations in a follow up ticket)
• [x] include these tests in a GitHub actions
• [x] Tests must be useable for React and other frameworks like Vue.js and Angular as well (we need to check how we "select" elements like "click button x"), so tests are not only used to test if react is bugfree but if Vue.js "has the same UI implementation" as well
• [ ] Tests run against self started instance of the project

Acceptance criteria

• [x] one test for sign up that shows that passkey creation works
• [x] tests is green for the current state of the react package

Implementation idea

What do we need to mock:

• Authenticators: There is the concept of virtual authenticators => these can be used to test webAuthn flows
• Corbado Relying Party Server: Here we can just use a dedicated Corabdo project (we can create a new one here where Abdullah and Martin both have access to) the only interesting thing here is email OTP => for the beginning we can make use of special test users that are supported by our Corbado backend (e.g. we can create a test user called internal-testing@corbado.com with a fixed OTP code like 123123) => ask @corbadovych for a project ID, he basically manages the "test projects"

[incorbador]

Tradeoff:

• Playwright does not support IE11
• Playwright is the more powerful tool though (support for passkeys)

=> For now we will use Playwright because of its better passkey support

[Aby-JS]

Implementation plan for this ticket after research:

• Create a new package called @corbado/e2e-tests
• In new package setup a way for testing SDKs
• In new package setup a way for testing complete packages with UI
• Use the new package in React SDK and React examples in playground
• Setup a single command to run tests for all playground apps
• Setup Github action for running tests on all PRs.

[incorbador]

@Aby-JS Fixed test OTP codes have been deployed. We made a small change though. For our three test projects (pro-503401103218055321, pro-3652881945085154854 and pro-1743528526530787479) all email addresses that follow the pattern integration-test-\s@corbado.com will get the same OTP code 150919. (This makes it easier for other integration tests).

[Aby-JS]

@incorbador the PR for this has been merged. Can you please add a rule for main branch that we need to run this job before PR is merged. You can do this in settings for the javascript repository.