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

LoginPage

NotesListPage

ManageNotePage

2- Create the Fixture

NotesAppFixtures

3- Use the fixture in test

EditNoteTest

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

tips1

• 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

tips2

2- Use it in Tests

tips3

That’s it for now, more to follow! :)

HAPPY TESTING!