paint-brush
How to Use Components in Playwrightby@puppo
342 reads
342 reads

How to Use Components in Playwright

by Luca Del PuppoFebruary 9th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Today I'll speak about a beta feature in Playwright: Components. The team is building a new feature to write component tests with Playwright, so it's time to see how it works.
featured image - How to Use Components in Playwright
Luca Del Puppo HackerNoon profile picture


Hi there,

Today I'll speak about a beta feature in Playwright: Components.


The team is building a new feature to write component tests with Playwright, so it's time to see how it works.

Installation

To start to use this feature, you have to install it. To do that, type in your terminal


npm init playwright@latest -- --ct


The command asks you two questions:

  • Which framework do you use? (experimental) choose to react to this tutorial
  • Install Playwright browsers choose to true


When the installation ends, there will be a new file in your project called: playwright-ct.config.ts. This file contains the configuration for the components' testing.For this tutorial, you have to change only one configuration, testDir property from ./ to ./src. Playwright uses this configuration to understand where the files used for the components' tests are located. In this example, you'll put the test file in the same folder as the component.

First Test

Let's start with the first component test.


Create a file called Icon.spec.tsx in the folder src/components/Icon/, and inside of it, copy this code.


import { expect, test } from '@playwright/experimental-ct-react';
import Icon from './Icon';

test.use({ viewport: { width: 500, height: 500 } });

const props = {
  src: 'src',
  title: 'title',
}

test('should work', async ({ mount }) => {
  const component = await mount(<Icon src={props.src} title={props.title} />);
  await expect(component).toHaveAttribute('src', 'src');
  await expect(component).toHaveAttribute('title', props.title);
});


As you can see, the structure is similar to other Testing Frameworks.


You have to import the methods relative to react components from the path @playwright/experimental-ct-react and import your component.

Then you can set up the viewport for your test; it's important to understand that the tests run in different browsers, so you can also test your components in different viewports. And at the end, it's time to check your component.


The test structure is straightforward; using the mount method, you can render the component in the DOM, and then you can check the result using the Playwright APIs.


For instance, in this case, the test checks if the src and title attributes have the correct value.

Using these tests, you can check the proper logic or the right representation of your components and guarantee the right render in different browsers.

Run the test

Cool, you set up Playwright, and you wrote the tests. Now it's time to run it.Easy peasy lemon squeezy, type in your terminal the following command


npx playwright test -c playwright-ct.config.ts


and then


npx playwright show-report


the result is like this.


Playwright result


As you can notice, Playwright runs the test in three different browsers by default. You can decide where to run the tests, adding or removing the browsers from the configuration file.


Perfect! I think you have a good introduction to component testing with Playwright.

The feature is in experimental mode, so use it carefully, please.

You can find out more info in the official documentation if you want to dive into it.


I hope you enjoyed this content.

See you soon folk.


Bye Bye 👋


You can find the code of this post here


Also published here.