Efficiently Testing a Multi-Page Wizard Form with Playwright

Question

I'm in the process of building a smoke testing suite for a web application, specifically using Playwright. I'm encountering a challenge with testing a wizard form that consists of several pages:

1. Personal details
2. Product details
3. Personal Details
4. Confirm and submit

Each of these pages contains various input fields and elements.

The unique aspect of my problem is that the application generates a unique token that identifies each application form instance. Reloading the page or initiating a new test case for the same form results in a 404 Error, which is the expected behavior.

Our current testing approach involves duplicating the functions used on the previous page to navigate to the desired page. However, this approach can lead to lengthy test cases, with a significant portion of the code dedicated to navigating between pages.

I'm looking for insights and best practices on how to structure my Playwright smoke testing suite to handle this scenario more efficiently. Any suggestions on improving the testing workflow and reducing code duplication would be greatly appreciated.

Answer 1

In general, I would approach similar situation like below:

• E2E Tests - Make E2E Tests covering major business flows across these multi pages.
• Page Object: Create single page object for these multi- page wizard to code re-use.
• Page Navigation : Encapsulate long steps of navigation between user actions in functions to write less code as test steps and re-use code.
• Test Data :Let every test create its own data instead of relying on existing data/ data created in previous tests to promote test isolation for more consistent results across runs.
• Page Loads : Wrap navigation and resulting page loads/re-loads in Promises and handle using async-await for more consistent test results across runs instead of relying on hard code waits.