Playwright Fixtures - Little Walkthrough

Rate this content
Bookmark

What are fixtures? How can I create one? How can I use it? I will answer all this questions with a small but explanatory live code example.

Lia Moreira
Lia Moreira
6 min
07 Dec, 2023

Video Summary and Transcription

Fixtures in Playwright are like small environments where you define methods and control the testing process. By creating reusable fixtures, you can make tests more readable and reusable. The fixture structure consists of a before block, the test, and an after block. Using fixtures allows you to access methods created in a page object, improving code readability and reusability.

Available in Español

1. Introduction to Fixtures

Short description:

Hello, everyone. I am Lia, the gatekeeper of the application's quality. My goal is to help you understand fixtures and how to create your own. Fixtures are like small environments in Playwright, where you define methods and stuff. Playwright gives us the opportunity to create our own fixtures, providing control over the testing process.

Hello, everyone. I am Lia. I hope you are having fun today. My job description at Bleep is quality assurance engineer, but I like to describe myself as the gatekeeper of the application's quality. My goal here is, at the end of this seven minutes more or less, you get a better understanding of what is a fixture and how you can create your own.

So let's start from the beginning. What is a fixture? Well, I like to describe fixtures in Playwright just like a little small environment where exists methods and stuff that I defined. I use these analogies like, imagine a ball pit where Playwright is the ball pit and fixtures are the small balls that are inside of the ball pit.

And why? Why do you use fixtures? So Playwright is fixture based. Everything that we use in Playwright is a fixture. Page is a fixture. Context browser is a fixture. And as I said previous, Playwright gives us the opportunity to create our own. And you can ask, okay, if Playwright gives us the opportunity, sorry, if Playwright gives us the fixture already, why do I need to create my own? Well, the answer is control. But okay, this is not working. Of course we need to have problems. Okay, control. Okay. Control of what? Well, let's see a little example.

2. Creating Reusable Fixtures

Short description:

To make the test more readable and reusable, I pass it to a page object with my own methods. By creating a fixture, I can make these methods available for use. The fixture structure consists of a before block, the test, and an after block. Instead of importing test and using page, I import and use my fixture on the test. This allows me to access the methods I created in the page object, making the code more readable and reusable. Playwright fixtures provide control over the methods used in the fixture, creating a small and controllable environment.

So this is a test that I created, and you can see that it's using the page fixture. I'm importing test from Playwright. I have a before it. I am checking for some titles and filling some forms. But this is not really reusable and you cannot really understand if you don't have the context of the application, what is being done here.

So how can I create this more easy to read and more reusable for everyone that needs to add tests to use it? So the answer is, I'm going to pass this to a page object that has my own methods. And you can see here that I have getTitle, clickButtons, fillForms. So this is my methods, my page objects, but this only by itself does not make them available on the page fixture.

So what I need to do to make them available to use is, well, create a fixture. So the structure here is, I need to have a function that is going to say to Playwright, add my fixture to the land of the feature. So test is the land of the features and I'm going to extend my own features. And in my fixture definition, there is going to be my test. You can use other fixtures like a fixture section to do stuff, but the main stuff here is the structure. So the structure for the fixture is going to be the before block, the test, and then the after block. So what I'm doing here is, if you look at the previous, the initial test, I have a before hook and comparing to my fixture, the same before hook is there. Then I'm going to use my methods in the initial page and after the run, I'm going to console.log something.

So how can I use this in my test? So instead of importing test, instead of using page, now what I'm going to do is import my fixture and use my fixture on the test and import my test that is the actual fixture. And as you can see there, it has access to my methods that I created in the page object. It's a little more readable and it's very reusable because if I want to have, let's say, another 10 tests that go through this, you can just reuse it instead of just having to recode everything. So the control that PlayWrite Fixtures gives us is I can decide what methods do I need to use or what I want to use in my fixture. I have a really small environment that is very controllable and very reusable. So, I hope that this gives you a little bit more of insight on fixtures and how you can use it in your tests. And that's it guys.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!
Effective Performance Testing to your Server with Autocannon
TestJS Summit 2021TestJS Summit 2021
36 min
Effective Performance Testing to your Server with Autocannon
Top Content
Performance testing expertise that is developed for a long time. In order to measure your server performance you need a tool that can efficiently simulate a lot of abilities and give you good measurements according your analysing criteria.Autocannon NPM library gave me exactly that - that library is super easy to install and has a very simple API to work with. Within a really short amount of time you can start do performance testing to your application and get good measurements in development environment and in your performance labs, and generate complicated testing scenarios.In this talk I will introduce Autocannon, explain how to efficiently analyse your server performance with it, and show how it helped me to understand complicated performance issues in my Node.js servers. At the end of this lecture, developers will be able to have the ability to integrate a fast and easy tool in order to measure your server performance.
Delightful Integration Tests With Testcontainers
TestJS Summit 2022TestJS Summit 2022
21 min
Delightful Integration Tests With Testcontainers
Top Content
Dockerized services are an excellent tool for creating repeatable, isolated environments ideal for integration tests. In this session, we'll look at the Testcontainers libraries which provide flexible and intuitive API for programmatically controlling lifecycle of your service dependencies in Docker containers. Running databases, Kafka, Elasticsearch, and even cloud technologies, straight from your test code ensures environment config is always up-to-date and consistent during local development and in CI pipelines.You’ll learn everything necessary to start adding powerful integration tests to your codebase without the headache of managing external service dependencies manually!
Visual Regression with Puppeteer, Playwright and Cypress
TestJS Summit 2021TestJS Summit 2021
9 min
Visual Regression with Puppeteer, Playwright and Cypress
Visual Regression tests components via screenshot matching. I'll show how you do that in three different libraries/frameworks. Additionally, I will use Storybook to extract the components from your SPA choice.
Playwright Can Do This?
TestJS Summit 2022TestJS Summit 2022
23 min
Playwright Can Do This?
Guaranteeing that your application doesn't break while constantly shipping new features is tough. Obviously, with a continually growing app or site, you can't test everything manually all the time!Test automation and monitoring are crucial to avoiding shipping broken apps and sites. But what functionality should you test? When should you run your tests? And aren't complex test suites super slow?In this session, we'll get our hands on Playwright, the end-to-end testing framework, and learn how to automate headless browsers to ensure that you confidently ship new features.
The Lazy Developer Guide: How to Automate Code Updates?
DevOps.js Conf 2022DevOps.js Conf 2022
22 min
The Lazy Developer Guide: How to Automate Code Updates?
How to update hundreds of projects all at once? With organizations rapidly growing, demand for the scalability of the teams grows which directly impacts projects structure and ownership. The usual dilemma is mono- vs. multi-repos, but ... What if I tell you that it does not matter much? Both approaches can punch you in the face at some point, so perhaps it is better to think bottom-up.
Today I will walk you through some of the biggest challenges that exist in both approaches and those are managing dependencies across a few hundred projects, global code updates and many other things. I will also show you examples of how we solved this inside Infobip through building our own internal libraries.

Workshops on related topic

Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Automated Testing Using WebdriverIO
TestJS Summit 2022TestJS Summit 2022
163 min
Automated Testing Using WebdriverIO
Workshop
Kevin Lamping
Kevin Lamping
In this workshop, I cover not only what WebdriverIO can do, but also how you'll be using it day-to-day. I've built the exercises around real-world scenarios that demonstrate how you would actually set things up. It's not just "what to do," but specifically "how to get there." We'll cover the fundamentals of Automated UI testing so you can write maintainable, useful tests for your website and/or web app.
JS Security Testing Automation for Developers on Every Build
TestJS Summit 2021TestJS Summit 2021
111 min
JS Security Testing Automation for Developers on Every Build
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives/alerts, without slowing you down.

Join this workshop to learn different ways developers can access Nexploit & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's Nexploit scanner with GitHub Actions
- Understand how modern applications, APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results
Security Testing Automation for Developers on Every Build
GraphQL Galaxy 2021GraphQL Galaxy 2021
82 min
Security Testing Automation for Developers on Every Build
WorkshopFree
Oliver Moradov
Bar Hofesh
2 authors
As a developer, you need to deliver fast, and you simply don't have the time to constantly think about security. Still, if something goes wrong it's your job to fix it, but security testing blocks your automation, creates bottlenecks and just delays releases, especially with graphQL...but it doesn't have to...

NeuraLegion's developer-first Dynamic Application Security Testing (DAST) scanner enables developers to detect, prioritise and remediate security issues EARLY, on every commit, with NO false positives / alerts, without slowing you down.

Join this workshop to learn different ways developers can access NeuraLegion's DAST scanner & start scanning without leaving the terminal!

We will be going through the set up end-to-end, whilst setting up a pipeline for a vulnerable GraphQL target, running security tests and looking at the results.

Table of contents:
- What developer-first DAST (Dynamic Application Security Testing) actually is and how it works
- See where and how a modern, accurate dev-first DAST fits in the CI/CD
- Integrate NeuraLegion's scanner with GitHub Actions
- Understand how modern applications, GraphQL and other APIs and authentication mechanisms can be tested
- Fork a repo, set up a pipeline, run security tests and look at the results