Test UI in Isolation With Playwright
Hi there! I hope you are doing well!.
Today I would like to show you a very nice feature released in the latest version of Playwright.
I’m pretty sure some of you might have heard about it or even worked with it.
If you are a Front-End developer or working with a Front-End application, you will be familiar with some libraries for that, such as react, vue, react testing, etc.
Well, yes, the feature I would like to show you is called “Component Testing”.
Component testing is a technique that allows us to test software in isolation without integrating each individual part. It is very popular when speaking about microservices, for example.
But this time, we will do it from the Front End. So … let’s call it “UI Component Testing”.
What Playwright has done is to merge both react and playwright functionalities. But .. you might be wondering what is the main difference with react testing (For Unit Testing) ? The main difference is that the components are now rendered in a real browser, instead of the virtual domain (Like JSDOM) used by the previously mentioned tool.
“Oh alright, but how does it affect the way we test?”
- Sometimes, for UI Testing, JSDom is not enough, since it lacks layouting functionalities, it is purely Javascript and it does not act as a real browser. Maybe mocking everything helps, but of course, it is not very easy and could take a lot of time.
So basically, with this feature, you can test sliders, scrolling, and you can even do Visual Testing, but instead of rendering the whole application, you can “mount” only the component you need to test.
So, let’s go to the “funny” part and see a basic example.
Before starting to write the tests, there are few things to do:
- Install Playwright (npm init playwright@latest — — ct)
If you already have a project, you can install the module directly by running:
npm install @playwright/experimental-ct-react , but you will need to create some files as well. (You can refer to this link to see the files that need to be added to your project):
- Playwright folder
- index.html
- index.js
Once installed, you can start writing your tests, let’s see a simple test class called componentsExample.spec.tsx
What are we doing?
First of all, import the playwright module + your components, as you can see at the top of the test class.
Now we can write the first test. So as you can see in the first example, we are testing a Cookiebanner component, adding a disclaimer text and “mounting” it. As mentioned before, this component will be rendered in a real browser, that’s why we can use Playwright features to find locators and write our assertions.
The second example is to test a Carousel with some sliders. In this case, we are using “mount” but also, if you take a closer look, we can include the “page” to be used as well, so if you need to wait for some event, take a screenshot, or also, do some network interception, you can! I am just using the page here to find some of the locators, and also the mounted component where we have the “title”.
The configuration can be done in the playwright.config file in the same way you configure any project, it means that you can run this headless !
And that’s all! You can now render only what you need to test instead of the whole app to validate your UI !
I hope it helps!
Feel free to share!
Happy Testing!
