Frontend/Web Test Automation: Mock MFA login + Playwright

This is steps to be able to successfully mock MFA during running a UI test with playwright

MFA stands for the Multi Factor Authentication

Photo by Kevin Ku on Unsplash

Explain by Example

1- Define MFAPage

2- Define OTP helper

Define a helper to generate our OTP to be able to bypass our MFA page

3- Usage in Test

First, of course we need to save our OTP in the environment before usage in test

PS: some tips

• It might be tricky when usage in parallel tests, so maybe it is better to mock the component completely in the app code when tests are happening.
• Secret storage: you can add them as a GCP secret, and getting them while running the tests via Github actions
• To produce the OTP, I followed this great blog post.

That’s it for now 🎉

HAPPY TESTING!