Automation stories: Usefulness of Playwright fixtures

Kostiantyn Teltov
5 min readNov 29, 2022

Good day to all,

Who makes this world a better place. Yes, I’m talking about you, QA’s.

It is not a secret, Playwright is a modern and very popular e2e test automation framework. If you are not yet familiar with the tool, then it’s time to start getting acquainted. I don’t want to describe Playwright basics. In the Internet, you may find a lot articles for beginners. One of the main advantages is that you may easily start test automation with Playwright.

In the article I’ll try to depict more advanced Playwright feature — “Fixtures”.

With Fixtures you may predefine something for your test or to the group of the tests. Personally, I was very happy to discover this feature before I started design of our test automation solution.

Default Fixtures

Actually, I believe, you have already used fixtures when you called “page” argument.

There are other predefined fixtures exist. Playwright documentation:

Let’s try to consider how you can create and use custom fixtures.

Predefined Page Objects

Probably the most obvious. You can predefine initialization of the page objects inside of the specific test fixture. You can even add some additional pre-initialization logic if you want. So, how to do it?

Let’s create some typescript file e.g. playwright-fixture-extention.ts

Inside of this file, create a type object. Add fields of object type you want to use. In my example you may see it is just a page names, like LoginPage, HomePage and etc.

Note: This is not part of the fixtures, but here is Login page class example:

Next, you need to export cons extending base logic with Types, in our case it’s Pages. Inside of this method you need to specify object where you are initializing pages. Please look at the screen carefully.

Finally you can export default test and expect. Because you probably wanna use it too. All done. Let’s jump into the file with tests

Create test file if you haven’t done it yet. Import fixture.

Your page variables will be available inside of the test arguments.

Predefined environment variables

So, you want to use some environment variables in your tests. Implementation looks the same.

  • Create type object with object fields
  • Use extend method where you should specify this object (You may use multiple types like I did in my example)
  • Initialize variables inside

Now, it is available in scope of test fixture.

Services and other

Let’s imagine that you need to access Database or some API service in the test. The cool thing is that you may predefine these façade classes inside of the custom fixture.

Once more, principle is the same. But I want to repeat it once again:)

Predefine some type object with service fields.

Extend base with this type and initialize it.

Use it as you usually do with other arguments.

So, as you may see, all my three examples implemented the same way. I just wanna show you an options.

What next?

In the examples above, I described options I used most often. Anyway, Playwright gives you more deep setup options.

For instance, you may predefine some environment specific data or default values when you start you page. Also, you may predefine more than one fixture and use it for the different test files.

I recommend to use options I already described and try to play around with extension of logic. From my point of view Playwright documentation looks sufficient, you may find there all you need.

Conclusion

Playwright contains a lot of the useful fixtures. Sometimes you just need to find them. Fixtures (or I would call it as Customer Fixtures) looks brilliant and can help you to resolve a lot of test solution design problems.

Thanks a lot for reading! Hope you have found something new.

--

--

Kostiantyn Teltov

From Ukraine with NLAW. QA Tech Lead/SDET/QA Architect (C#, JS/TS, Java). Like to build testing processes and help people learn. Dream about making indie games