Frontend/Web Test Automation: Enhance POM using Playwright Fixtures
In following best practices when implementing a test automation solution for our E2E or integration tests, we tend to use test automation design patterns to organize our work and make our test automation solution maintainable and reusable.
Please refer here for Page Object Model in Playwright. To make the best out of page object model, Playwright has an awesome way to make the code even more reusable, which is using “Fixtures”.
What is Fixtures?
From playwright definition, Playwright Test is based on the concept of test fixtures. Test fixtures are used to establish the environment for each test, giving the test everything it needs and nothing else. Test fixtures are isolated between tests. With fixtures, you can group tests based on their meaning, instead of their common setup.
Explain by Example: Automate Notes web App
If we have a web app for note taking with multiple of flows that could include:
- User Authentication (ex: Login or Sign Up)
- Notes Viewing (ex: list view )
- Notes Management (ex: create, edit, or delete notes)
- Settings (ex: app settings and display)
And then preparing our pages for Tests:
- LoginPage
- NotesListPage
- ManageNotePage
Imagine having having a test that uses a step from each page or multiple of pages
but what if we create our own fixture?
Our own fixture that will define all pages that the app will use, and easily in the test, we call these pages fixture and use it in a smart way
so, let’s get our hands dirty and create our own fixture
1- Define Pages
2- Create the Fixture
3- Use the fixture in test
As simple as that, we maintained a good way to build our tests in an organized and reusable way.
PS: some tips
- We can use the page built in fixture with other pages from the fixtures in our tests
- Having multiple of fixtures is possible and we can use “Merge” to be able to use these multiple fixtures in one test
Playwright makes it very easy to use multiple fixtures in our tests, it enables us to use mergeTests to merge the fixtures
1- Define Merge Fixtures
We have now two fixtures one for pages and another fixture, Let’s have a file of fixtures that would merge all fixtures we have built
2- Use it in Tests
That’s it for now, more to follow! :)
